【5+】Webview页面之间的数据交流

一个App，其中大部分是要对页面之间的数据进行交互。

碧如：A打开B页面，B页面执行一些代码，再通知回A页面。

这可能是h5+er们遇到最常见的一个场景了。

ok，我们将问题实例化：

A页面有个选择地区的按钮，需要打开B页面选择一个地区，然后获取到选取结果返回给A页面并展示。

我们看看用mui.fire怎么来实现这个功能

A页面

        <header class="mui-bar mui-bar-nav">
            <h1 class="mui-title">A</h1>
        </header>
        <div class="mui-content">
            <input type="text" readonly placeholder="未选择">
            <button type="button" class="mui-btn mui-btn-blue">选取地区</button>
        </div>
        
        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            // 自定义监听select事件
            document.addEventListener('select', function(e){
                var text = e.detail.text;
                document.querySelector("input").value = text;
            });
            // 按钮点击事件
            document.querySelector(".mui-btn-blue").addEventListener('tap', function(){
                // 打开B页面，选取一个结果
                mui.openWindow('B.html');
            });
        </script>

B页面

        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
            <h1 class="mui-title">B</h1>
        </header>
        <div class="mui-content">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        上海
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        深圳
                    </a>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-navigate-right">
                        北京
                    </a>
                </li>
            </ul>
        </div>

        <script src="js/mui.min.js"></script>
        <script type="text/javascript">
            mui.init();
            mui('ul').on('tap', 'li', function() {
                // 获取当前选择的内容
                var text = this.innerText;
                // 通知上个页面
                var w = plus.webview.currentWebview();
                var opener = w.opener();
                mui.fire(opener, "select",{
                    text: text
                });
                // 关闭本页面
                w.close();
            });

真机调试一下，o98k。

但是！我个人还是建议脱离mui.js来实现这个功能

可以借用咱们之前文章里面的讲过的，利用webview对象的evalJS方法

【5+】跨webview多页面 触发事件（一）
【5+】跨webview多页面 触发事件（一）

感觉用Broadcast.js有点小题大做

那咱们就写一个类似Android中的onActivityResult和setResult方法

新建一个app.js，作为一个自己的插件，里面实现两个方法 onActivityResult 和 setResult

(function(app){
    
    /**
     * 打开一个页面
     * @param {String} url 页面路径
     * @param {String} id 页面id
     * @param {Object} ex 参数
     * @param {Function} callback 
     */
    app.onActivityResult = function(url, id, ex, callback){
        
    };
    
    /**
     * 返回创建者页面数据
     * @param {Object} data 需要返回的数据
     * @return {Webview} w 当前webview
     */
    app.setResult = function(data){
        
    };
    
    
}(window.app || (window.app = {})));

我们一步步来，先看看setResult如何触发上个页面的函数

    /**
     * 返回创建者页面数据
     * @param {Object} data 需要返回的数据
     * @return {Webview} w 当前webview
     */
    app.setResult = function(data){
        // 获取当前webview
        var indexW = plus.webview.currentWebview();
        // 获取创建者的webview
        var opener = indexW.opener();
        // 执行js字符串
        opener.evalJS();// ??????
    };

卧槽，那么，问题来了，evalJS该执行什么呢？

如果我在A页面的window对象下定一个函数

window.test = function(data){
    alert(JSON.stringify(data));
}

那么，我们在evalJS里面就该这么写

        // 执行js字符串
        var jsstr = "window.test && window.test(" + JSON.stringify(data) + ")";
        opener.evalJS(jsstr); 

好吧，考虑到一个页面可能通过这个方式打开多个页面，那么我们这个test函数就得改一个不重复唯一的名称，并且定义放到onActivityResult方法里面

    var _id = 0,
        _tempName = '',
        ow,cw;

        /**
         * 打开一个页面
         * @param {String} url 页面路径
         * @param {String} id 页面id
         * @param {Object} ex 参数
         * @param {Function} callback 
         */
        app.onActivityResult = function(url, id, ex, callback) {
            
            // 生成唯一回调函数名称
            _tempName = 'APP_RESULT_FUN_' + _id++;
            // 定义函数
            window[_tempName] = function(data){
                // 执行自定义回调
                callback(data);
            };
            // 传递函数名称到目标页面
            ex.callbackName = _tempName;
            
            // 显示菊花
            cw = plus.nativeUI.showWaiting();
            
            // 创建目标页面 
            ow = plus.webview.create(url, id, {
                render: "always"
            }, ex);
            // title更新时显示 页面
            ow.addEventListener('titleUpdate', function(){
                // 关闭菊花
                cw && (cw.close(),cw = null);
                // 显示页面
                ow.show('pop-in');
            });
            // 页面关闭时，注销window下此次事件
            ow.addEventListener('close', function(){
                  setTimeout(function(){
                      window[_tempName] = null;
                  });
            });
            
        };

生成特殊一个函数，并把函数名通过extras的方式传参到目标页面，
相应的，setResult方法也需要少许更改

    /**
     * 返回创建者页面数据
     * @param {Object} data 需要返回的数据
     * @return {Webview} w 当前webview
     */
    app.setResult = function(data) {
        // 获取当前webview
        var indexW = plus.webview.currentWebview();
        // js字符串
        var jsstr = "";
        // 如果存在自定义回调函数名
        if(indexW.callbackName){
            // 拼接js字符串
            jsstr = "window." + indexW.callbackName;
            jsstr = jsstr + "&&" + jsstr + "(" + JSON.stringify(data) + ")";
            // 执行
            indexW.opener().evalJS(jsstr);
        }
        // 返回当前页面
        return indexW;
    };

试试引用后在AB页面测试一下

            // A页面 按钮点击事件
            document.querySelector(".mui-btn-blue").addEventListener('tap', function(){
                // 打开B页面，选取一个结果
                app.onActivityResult('B.html', 'B', {}, function(data){
                    // 修改内容
                    document.querySelector("input").value = data.text;
                });
            });
            
            // B页面 选项点击事件
            mui('ul').on('tap', 'li', function() {
                // 获取当前选择的内容
                var text = this.innerText;
                // 通知上个页面 并关闭本页面
                app.setResult({
                    text: text
                }).close();
            });

卧槽666。

class Man{
    constructor(){
        this.name = 'newsning'
    }
    say(){
        console.log('天行健, 君子以自强不息. ')
    }
}