hybrid混合开发之“一知半解”（下）

话不多说直接奔入主题，了解了使用hybrid的原因，以及更新上线流程，我们在这里再说一下 js 如何与客户端通信。。

schema协议

使用：NgariHealth://直接打开纳里健康 app

内置上线

• 将封装的schema 协议打包，内置到客户端
• 客户端每次启动 wenview，都默认执行打包好的 invoke.js
• 本地加载，免去网络加载的时间，更快
• 本地加载，没有网络请求，黑客看不到 schema 协议，更加安全
• 通讯的基本形式：调用能力，传递参数，监听回调

void function (window, undefined) {
    //调用 schema 协议
    function _invoke(action, data, callback) {
        //拼接 schema 协议
        var schema = 'myapp://utils/' + action
        //拼接参数
        schema += '?a=a';
        for (const key in data) {
            if (data.hasOwnProperty(key)) {
                const element = data[key];
                schema += '&' + key + '=' + element;

            }
        }
        // 处理 callback
        var callbackName = '';
        if (typeof callback === 'string') {
            callbackName = callback;
        } else {
            callbackName = action + Date.now();
            window[callbackName] = callback;
        }

        schema += 'callback=' + callbackName;

        var iframe = document.createElement('iframe');
        iframe.src = schema;
        var body = document.body;
        body.appendChild(iframe);
        setTimeout(()=>{
            body.removeChild(iframe);
            iframe = null;
        })
    }
    //暴露到全局变量
    window.invoke = {
        share: function (data, callback) {
            _invoke('share', data, callback);
        },
        scan: function (data, callback) {
            _invoke('share', data, callback);
        },
        login: function (data, callback) {
            _invoke('share', data, callback);
        },
    }
}(window)

总结

• 通讯的基本形式：调用能力，传递参数，监听回调
• 调用schema 代码的封装
• 内置上线，更快，更安全