【quickhybrid】架构一个Hybrid框架（三）

最新推荐文章于 2025-04-07 15:38:54 发布

原创最新推荐文章于 2025-04-07 15:38:54 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Hybrid #QuickHybrid

QuickHybrid 专栏收录该内容

4 篇文章

订阅专栏

本文介绍H5页面如何通过JS调用Native API实现与原生应用的交互，包括打开新页面、设置标题及关闭页面等操作，并提供具体代码示例。

【上一篇】

应用示例：

打开新页面 -》page模块-》open方法

HTML：

<a class="mui-navigate-right api-class" id="{{DOMAIN_URL}}/app/knowledge?is_cs=1"  href="javascript:void(0);">指南解读</a>

JS执行API:' + id);

    //callbackId:病例集',

        // 额外数据  是对于方法传递的额外参数，原生容器会解析成JSONObject

        data: {



        },

        success: function(result) {

            //所有的API调用错误都会走失败回调

            console.log(error);

            showTips('<span style="" font-size:13.5pt;"="">失败:' + JSON.stringify(error));

        }

    });

};

大致流程：H5页面：JS调起对应的API，与Native通信，API实现JSBridge的通信，在对应环境的API中可以添加模块和方法。打开新页面，最简单的方式就是quick.page.open(‘http://www.baidu.com？..’)，但是总要有调起API的行为。

打开新页面 -》page模块-》openLocal方法

对于quick.page.openLocal():打开应用内的原生页面，

写法详见：https://quickhybrid.github.io/quickhybrid-doc/api/api_page/api_page.html

打开应用内原生页面

// 示例页面不一定可以打开，仅供参考
var className = quick.os.android ? 'com.epoint.demo.view.ComponentCaseActivity' : 'EPTFileSelectViewController';

quick.page.openLocal({
    className: className,
    isOpenExist: 0,
    data: {
        key1: 'value1'
    },
    success: function(result) {
        /**
         * 目标页面关闭后会触发这个回调
         * 参数需要原生页面主动设置result才能正常返回
         * {
                resultData: '可能是json，也可能是普通字符串，要看怎么传参的'
           }
         */

    },
    error: function(error) {}
});