Skip to content
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. 防劫持

公共参考链接

前端面试知识点汇总