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

【上一篇】

应用示例：

打开新页面 -》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) {} });

  

对于quick.navigator.setTitle方法，可以仿照上述调起API，也可以在script标签中直接写quick.navigator.setTitle（‘我的知识库’），这样当页面加载的时候就会自动控制标题为‘我的知识库’，而不用点击触发quick中的API。

   对于quick.page.close方法，，有很多种传参的方式，本次开发使用的是兼容传参，即quick.page.close（‘value’）。

其他API调用案例详情，请参考-》手册 -》API

文档链接：https://quickhybrid.github.io/quickhybrid-doc/

github上的源码：Android版   IOS版

【下一篇】

原文出处