Skip to content

Android WebView 架构与分析

webview 与 hybrid 开发

native 原生开发中的组件

hybrid 混合开发 webview 代码示例

/**
 * Sample creating 1 webviews.
 */
public class WebView1 extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {;
        setContentView(R.layout.webview_1);

        WebView wv = (WebView) findViewById(R.id.wv1);
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WebView.setWebContentsDebuggingEnabled(true);
        }
        wv.getSettings().setBuiltInZoomControls(true);
        wv.getSettings().setJavaScriptEnabled(false);
        wv.setWebViewClient(new WebViewClient());
        wv.loadUrl("file:///android_asset/html/index.html");
        super.onCreate(savedInstanceState);
    }
}

hybrid 混合开发中的 app webview 组件

hybrid 混合开发中的 app webview 控件

微信小程序主流架构基于 webview 开发

支付宝小程序基于 webview 开发

web 应用中的浏览器 webview 组件

web 应用中的浏览器 webview 控件

native 视角下的 webview 控件

  • uiautomator 框架把 webview 组件“翻译”成了原生组件
  • uiautomatorviewer、appium desktop、weditor 等都可以分析
  • uiautomatorviewer 对 java 版本有要求，需要 1.8.0_60 以下的版本
  • uiautomatorviewer 首次分析 webview 组件时需多刷新一次
  • 控件转换
  • html 控件尽量用原生控件表达，比如文本转 TextView，图片转 Image
  • 无适合原生控件表达的 html 控件用 android.view.View 表达
  • 属性转换
  • html 控件中的属性用原生控件表达，根据不同的版本转换为 resource-id content-desc text
  • native 无法表达的 html 属性会丢失，比如 class href src 等属性

转换示例

webview 组件的真正分析方法

  • uiautomatorviewer 的分析是不完整的
  • 浏览器分析工具可以分析 webview 控件完整信息

webview 调试开关

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    WebView.setWebContentsDebuggingEnabled(true);
}

//适合正式上线的app，至于debug开启的时候，才开启webview的调试
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
}

各平台 webview 组件的调试开关

平台 webview 组件调试开关 应用 webview 组件调试开关 可调试
as 模拟器 android 6.0 默认开启 ✅ 可调试
as 模拟器 android 7.0 及以上默认关闭 关闭
as 模拟器 android 7.0 及以上默认关闭 开启 ✅ 可调试
真机默认关闭 开启 ✅ 可调试
真机默认关闭 关闭
微信小程序内核 某些老版本默认开启 ✅ 可调试
微信小程序内核 默认关闭

强行打开 webview 调试开关的办法

  • root 手机修改 webview 内核 xposed
  • 使用沙箱，hook webview 组件的调用 virtualapp
  • 自己编译 android 系统

因为这些方法不常用且有各种局限，所以使用不多，仅限于安全领域研究。使用最多的办法是通过后门开启调试开关

webview 正确分析方法

  • 打开 webview 调试开关
  • 打开带有 webview 的页面
  • 打开浏览器的分析工具
  • chrome://inspect
  • [推荐] edge://inspect
  • firefox about:debugging

直接调试浏览器中的 web app

真机上调试小程序

调试雪球 webview 组件

  • 需要在 Android 6.0 模拟器上
  • 真机上需要开启 webview 调试开关的特定版本

总结

  • 了解 webview 原理
  • 掌握 webview 分析方法
  • 了解 webview 基本属性
  • 为自动化测试做铺垫