APP跳转外部链接并数据通信

案例效果

APP外部链接跳转到自定义的页面，外部地址需要头部引入mui的js代码

案例截图

实现思路

例如：表单中的按钮事件触发弹出个外部链接

1. 点击表单中按钮的自定义功能脚本事件，执行跳转b页面并携带参数
2. b页面获得到参数进行业务逻辑处理；
3. b页面处理完业务逻辑派发事件到表单中的监听方法；
4. 表单监听方法接收到b页面派发的事件处理业务逻辑；

操作步骤

1. 表单页面跳转b页面携带参数，在功能脚本中添加该方法；

    JE.openWindow({
        url: 'http://baidu.com', //跳转b页面的地址
        id: 'openWindow_baidu', // 绑定跳转的b的面板id，表单通过该id进行数据传输
        extras: { // 自定义跳转到b页面需要携带的参数
            fnName: 'tabFn',  // b页面根据业务逻辑，通过调用tabFn事件名通知表单并携带数据
            a_Id: plus.webview.currentWebview().id, // 表单页面的id，b页面拿到该id才能和表单传输数据
        }
    });
    function dochange(e) {
        console.log('外部链接事件传递的参数', e);
        alert('成功监听到外部链接传递的事件');
        // 拿到b页面中的e，执行业务中的代码
        // 处理完业务后删除掉该事件
        window.removeEventListener('tabFn', dochange);
    }
    // 监听b页面传递过来的数据处理业务逻辑
    window.addEventListener('tabFn', dochange);

2. b页面获得到参数进行业务逻辑处理

    const b_webview = plus.webview.currentWebview(); // 获取表单页面跳转过来的传递的参数，当前b页面面板
    const a_id = b_webview.a_Id; // 表单页面的面板id；
    const a_fnName = b_webview.fnName; // 表单页面的监听事件名称

3. b页面处理完业务逻辑派发事件到表单页面

    const a_webview = plus.webview.getWebviewById(a_id); // 根据当前b面板的id获取到表单面板
    const datas = {test: 'b页面的测试数据'}
    mui.fire(a_webview, a_fnName, {datas}); // 向表单页面派发事件，触发表单页面的监听

4. 表单接收到b页面派发的事件处理业务逻辑

已经在第一步注册过该事件,拿到b页面的数据就可处理对应的业务逻辑

    function dochange(e) {
        console.log('外部链接事件传递的参数', e);
        alert('成功监听到外部链接传递的事件');
        // 拿到b页面中的e，执行业务中的代码
        // 处理完业务后删除掉该事件
        window.removeEventListener('tabFn', dochange);
    }
    // 监听b页面传递过来的数据处理业务逻辑
    window.addEventListener('tabFn', dochange);

相关代码

    /**
     * 表单页面跳转到b页面 ---> 当前是表单页面的代码 
     */ 
    JE.openWindow({
        url: 'http://baidu.com', //跳转b页面的地址
        id: 'openWindow_baidu', // 绑定跳转的b的面板id，表单通过该id进行数据传输
        extras: { // 自定义跳转到b页面需要携带的参数
            fnName: 'tabFn',  // b页面根据业务逻辑，通过调用tabFn事件名通知表单并携带数据
            a_Id: plus.webview.currentWebview().id, // 表单页面的id，b页面拿到该id才能和表单传输数据
        }
    });
    function dochange(e) {
        console.log('外部链接事件传递的参数', e);
        alert('成功监听到外部链接传递的事件');
        // 拿到b页面中的e，执行业务中的代码
        // 处理完业务后删除掉该事件
        window.removeEventListener('tabFn', dochange);
    }
    // 监听b页面传递过来的数据处理业务逻辑
    window.addEventListener('tabFn', dochange);


    /**
     * b页面完成业务逻辑后触发表单页面
     */ 
    const b_webview = plus.webview.currentWebview(); // 获取表单页面跳转过来的传递的参数，当前b页面面板
    const a_id = b_webview.a_Id; // 表单页面的面板id；
    const a_fnName = b_webview.fnName; // 表单页面的监听事件名称
    const a_webview = plus.webview.getWebviewById(a_id); // 根据当前表单面板的id获取到表单面板
    const datas = {test: 'b页面的测试数据'}
    mui.fire(a_webview, a_fnName, {datas}); // 向表单页面派发事件，触发表单页面的监听

关键字，相关问题

• 数据通信，外部链接，跳转，打开新页面
• 引入外部链接进行跳转，外部链接数据通信，跳转外部链接怎么实现