周陆军博客

Appearance

On this page

混合app相关问题 ​

jsBridge是如何做到h5和原生应用的交互 ​

  1. 参考链接

jsBridge H5和原生交互

IOS、Android与H5通信-JsBridge原理(总结)

iOS下JS与OC互相调用（三）--MessageHandler

WebView之app与h5间的交互

  1. 详解

    • 实现
    javascript
    js调用原生约定方法名encyclopedia 注意需要判断设备类型 然后调用方法如下

ios：window.webkit.messageHandlers.encyclopedia.postMessage({});同步返回值

android：window.android.encyclopedia();

原生调用js 方法 window.testBridge = function() {
    //do something
}
    • MessageHandler 是什么？

    WKWebView 初始化时，有一个参数叫configuration，它是WKWebViewConfiguration类型的参数。

    WKWebViewConfiguration有一个属性叫userContentController，它又是WKUserContentController类型的参数。

    WKUserContentController对象有一个方法- addScriptMessageHandler:name:，把这个功能简称为MessageHandler。

    addScriptMessageHandler:name:有两个参数，第一个参数是userContentController的代理对象，第二个参数是JS里发送postMessage的对象。

    • window.android原理

    app初始化设置开启javascript

    java
    WebSettings mSettings = this.getSettings();
mSettings.setJavaScriptEnabled(true);   //开启javascript

    添加js接口

    java
    //第二个字段是WebViewJsInterface接口的对象名，在h5调用时需要用到
mWebView.addJavascriptInterface(new WebViewJsInterface(), "android");

    定义接口方法，给h5调用

    java
    public class WebViewJsInterface {
    @JavascriptInterface
    public void actionShare(String json) {
    //TODO
    }
}

    在h5页面加载完后注入js代码（让h5能够识别当前是android调用还是ios调用）

    java
    mWebView.setWebViewCallback(new ProgressWebView.WebViewCallback() {
    @Override
    public void onPageFinished(WebView view, String url) {
        //加载一个js，返回当前的平台信息：android
        view.loadUrl("javascript:function qlClient(){return \"android\";}");
        //TODO
    }

    @Override
    public void onShouldOverrideUrlLoading(WebView view, String url) {
    }
});

    h5端调用

    javascript
    window.android.actionShare(json)
    • JsBridge原理

    H5和原生app（ios，android）交互的载体基本都是基于Webview，可以把Webview看作是一个性能打八折的移动浏览器。

    • ios调用Javascript
    1. WKWebView：最新，IOS8+，建议使用
    2. UIWebView：第一代，较老
    3. JavaScriptCore：IOS7+，能执行js代码，小程序、react native使用
    • Javascript 调用 ios（oc、swift）

    通过拦截URL，在webview发起特殊请求，如jsbridge://...，被native捕捉到，发现特殊请求就执行相应逻辑

    javascript
    var src= 'jsbridge://method?参数1=value1&参数2=value2';
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = src;
document.body.appendChild(iframe);
//再删除iframesetTimeout(function() {
    iframe.remove();
}, 50);
    • Android调用JS代码

    1. WebView的loadUrl

    2. WebView的evaluateJavascript

    • JS调用Android代码

    1. WebView的addJavascriptInterface进行对象映射

    2. WebViewClient 的 shouldOverrideUrlLoading 方法回调拦截 url

    3. WebChromeClient 的onJsAlert、onJsConfirm、onJsPrompt方法回调拦截JS对话框alert()、confirm()、prompt() 消息

webview性能优化 ​

  1. 参考链接

WebView优化提升H5加载速度方案

  1. 详解

    • WebView加载H5经历的过程

      WebView初始化->建立连接，接收页面、样式、渲染(白屏，对应浏览器打开url过程)->解析执行脚本、获取后端数据(加载中)->渲染展示

    • 优化

      1. 客户端启动后，就初始化一个全局WebView，隐藏起来备用

        因为二次初始化webview时间，比首次初始化快40ms左右

      2. 数据预请求

        WebView初始化慢，可以通过客户端预先或者同时先请求数据，让后端和网络不要闲着等待WebView初始化。

      3. 离线包

        离线包由h5提供，包里面的结构基本和线上一致，本身我们的h5网页就是放在cdn上，这次只不过是拿出来，打成压缩包，放在Android的apk包里，从网上拿资源改为本地拿资源

腾讯x5内核 ​

  1. 参考链接

腾讯x5内核集成，优化web加载速度

  1. 详解

    1. 速度快：相比系统webview的网页打开速度有30+%的提升；
    2. 省流量：使用云端优化技术使流量节省20+%；
    3. 更安全：安全问题可以在24小时内修复；
    4. 更稳定：经过亿级用户的使用考验，CRASH率低于0.15%；
    5. 兼容好：无系统内核的碎片化问题，更少的兼容性问题；
    6. 体验优：支持夜间模式、适屏排版、字体设置等浏览增强功能；
    7. 功能全：在Html5、ES6上有更完整支持；
    8. 更强大：集成强大的视频播放器，支持视频格式远多于系统webview；
    9. 视频和文件格式的支持x5内核多于系统内核
    10. 防劫持

公共参考链接 ​

前端面试知识点汇总