(window.webpackJsonp=window.webpackJsonp||[]).push([[47],{462:function(t,a,n){t.exports=n.p+"assets/img/cml_doc_android_02.bd113158.png"},463:function(t,a,n){t.exports=n.p+"assets/img/cml_doc_android_03.14b87b33.png"},464:function(t,a,n){t.exports=n.p+"assets/img/cml_doc_android_04.31081a1a.png"},509:function(t,a,n){"use strict";n.r(a);var s=n(17),e=Object(s.a)({},(function(){var t=this,a=t.$createElement,s=t._self._c||a;return s("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[s("h1",{attrs:{id:"cml-android-sdk-使用范例"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#cml-android-sdk-使用范例"}},[t._v("#")]),t._v(" CML Android SDK 使用范例")]),t._v(" "),s("p",[t._v("以一个小 Demo 工程，讲述 CML Android SDK 的使用方式，引领轻松入门。"),s("font",{attrs:{color:"#FF0000"}},[t._v("Demo 工程在根目录 app 目录下")]),t._v("，用 Android Studio 导入并 run 起来后，再对照以下说明文档看会好理解。")],1),t._v(" "),s("p",[s("font",{attrs:{color:"#FF0000"}},[t._v("根目录 assets 目录下的 cml-demo-say.zip 是个简单的示例工程")])],1),t._v(" "),s("p",[t._v("用来演示 Native 和 Weex 容器或 web 容器的双向通信。app 目录下 Demo 工程加载的 Weex bundle 和 H5 页就是这个工程实现的。")]),t._v(" "),s("h2",{attrs:{id:"compile-依赖添加"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#compile-依赖添加"}},[t._v("#")]),t._v(" compile 依赖添加")]),t._v(" "),s("h3",{attrs:{id:"项目根目录-build-gradle-里添加-maven-仓库地址"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#项目根目录-build-gradle-里添加-maven-仓库地址"}},[t._v("#")]),t._v(" 项目根目录 build.gradle 里添加 maven 仓库地址")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("buildscript {\n    repositories {~~~~\n        jcenter()\n        maven {\n            url 'https://maven.google.com/'\n        }\n    }\n    ...\n}\n\nallprojects {\n    repositories {\n        maven {\n            url 'https://maven.google.com/'\n        }\n        jcenter()\n        mavenCentral()\n        ...\n    }\n}\n")])])]),s("h3",{attrs:{id:"在-app-模块的-build-gradle-里添加依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#在-app-模块的-build-gradle-里添加依赖"}},[t._v("#")]),t._v(" 在 App 模块的 build.gradle 里添加依赖")]),t._v(" "),s("h4",{attrs:{id:"首先添加如下依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#首先添加如下依赖"}},[t._v("#")]),t._v(" 首先添加如下依赖")]),t._v(" "),s("div",{staticClass:"language-gradle extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('dependencies {\n    ...\n    compile "com.android.support:support-v4:$SUPPORT_VER"\n    compile "com.android.support:appcompat-v7:$SUPPORT_VER"\n    compile "com.android.support:recyclerview-v7:$SUPPORT_VER"\n\tcompile "com.didiglobal.chameleon:cmlsdk:$VERSION"\n\tcompile "com.didiglobal.chameleon:cmlweb:$VERSION"\n}\n')])])]),s("h4",{attrs:{id:"添加渲染引擎依赖"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#添加渲染引擎依赖"}},[t._v("#")]),t._v(" 添加渲染引擎依赖")]),t._v(" "),s("p",[t._v("CML Native SDK 采用 Weex 作为渲染引擎，当前依赖的 Weex 版本是")]),t._v(" "),s("ul",[s("li",[t._v("weex -> com.taobao.android:weex_sdk:0.20.0.2")])]),t._v(" "),s("div",{staticClass:"language-gradle extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('dependencies {\n    ...\n\tcompile "com.didiglobal.chameleon:cmlweex:$VERSION"\n}\n')])])]),s("p",[t._v("com.android.tools.build:gradle 3.0 以后的版本用 "),s("code",[t._v("implementation")]),t._v(" 替换 "),s("code",[t._v("compile")]),t._v("，完整的依赖列表可参考示例工程。")]),t._v(" "),s("h2",{attrs:{id:"权限添加及-android-6-0-以上系统授权"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#权限添加及-android-6-0-以上系统授权"}},[t._v("#")]),t._v(" 权限添加及 Android 6.0 以上系统授权")]),t._v(" "),s("p",[t._v("CML SDK 已经添加了如下权限，android 6.0 以上系统版本需要在调起相关页面后手动授权。")]),t._v(" "),s("div",{staticClass:"language-gradle extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />\n    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />\n    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />\n    <uses-permission android:name="android.permission.READ_PHONE_STATE" />\n')])])]),s("h2",{attrs:{id:"混淆"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#混淆"}},[t._v("#")]),t._v(" 混淆")]),t._v(" "),s("p",[t._v("参考示例工程")]),t._v(" "),s("h2",{attrs:{id:"初始化入口"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#初始化入口"}},[t._v("#")]),t._v(" 初始化入口")]),t._v(" "),s("p",[t._v("实现自己的 Application 类，在应用启动的时候进行初始化调用。")]),t._v(" "),s("h3",{attrs:{id:"application-demo"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#application-demo"}},[t._v("#")]),t._v(" Application demo")]),t._v(" "),s("div",{staticClass:"language-java extra-class"},[s("pre",{pre:!0,attrs:{class:"language-java"}},[s("code",[s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MyApplication")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("extends")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Application")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("implements")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlConfig")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCreate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCreate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n        "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("init")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("configAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开发阶段可以禁用js bundle缓存")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEnvironment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("CML_ALLOW_BUNDLE_CACHE "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token boolean"}},[t._v("false")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 开发阶段手动降级测试")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.CML_DEGRADE = false;")]),t._v("\n\n        "),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 注册降级Adapter")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEnvironment")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setDegradeAdapter")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlDegradeDefault")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setToastAdapter(xxx);")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setLoggerAdapter(xxx);")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setDialogAdapter(xxx);")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setNavigatorAdapter(xxx);")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setStatisticsAdapter(xxx);")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//        CmlEnvironment.setImageLoaderAdapter(xxx);")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("public")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerModule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("registerModule")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ModuleDemo")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("class")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"将-application-添加到-androidmanifest-xml"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#将-application-添加到-androidmanifest-xml"}},[t._v("#")]),t._v(" 将 Application 添加到 AndroidManifest.xml")]),t._v(" "),s("div",{staticClass:"language-xml extra-class"},[s("pre",{pre:!0,attrs:{class:"language-xml"}},[s("code",[t._v('<application\n\tandroid:name=".MyApplication"\n\tandroid:allowBackup="false"\n\t...\n'),s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token tag"}},[s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("application")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),s("h3",{attrs:{id:"适配器的实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#适配器的实现"}},[t._v("#")]),t._v(" 适配器的实现")]),t._v(" "),s("p",[t._v("适配器是暴露给 SDK 使用者的一组接口，用于提供扩展 SDK 的能力，其中一部分接口提供了默认实现，未提供默认实现的需要使用者自己实现并注册到 SDK 中。")]),t._v(" "),s("p",[s("img",{attrs:{src:n(462),alt:"image"}})]),t._v(" "),s("ul",[s("li",[s("p",[t._v("以下适配器提供了默认实现\nhttp / json / log / modal / storage / thread / websocket / imagloader")])]),t._v(" "),s("li",[s("p",[t._v("以下适配器未提供默认实现\nnavigator / degrade / statistics")])])]),t._v(" "),s("p",[t._v("以降级适配器举例，只需要两个步骤：")]),t._v(" "),s("ul",[s("li",[t._v("新建类 CmlDegradeDefault，实现接口 ICmlDegradeAdapter")]),t._v(" "),s("li",[t._v("在 MyApplication 的 configAdapter 方法里注册适配器。")])]),t._v(" "),s("h3",{attrs:{id:"module-的实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#module-的实现"}},[t._v("#")]),t._v(" Module 的实现")]),t._v(" "),s("p",[t._v("module 的基本概念可参看"),s("RouterLink",{attrs:{to:"/docs/sdk.html#module-的使用"}},[t._v("这里")]),t._v(", SDK 层实现在如下位置：")],1),t._v(" "),s("p",[s("img",{attrs:{src:n(463),alt:"image"}})]),t._v(" "),s("p",[t._v("module 的实现主要分两个步骤，一个是 Native 侧的代码实现，一个是 js 侧的代码实现。同时，native 和 js 的通信是双向的，及 Native 可以主动调用 js 侧的方法，js 侧也可以主动调用 Native 侧的方法。")]),t._v(" "),s("p",[s("img",{attrs:{src:n(464),alt:"image"}})]),t._v(" "),s("h4",{attrs:{id:"native-侧的实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#native-侧的实现"}},[t._v("#")]),t._v(" Native 侧的实现")]),t._v(" "),s("p",[s("font",{attrs:{color:"#FF0000"}},[t._v("以下内容请在 CML SDK Demo 运行起来的前提下阅读，方便理解即将描述的内容。")])],1),t._v(" "),s("p",[t._v("实现一个 Module 扩展需要如下几个步骤：")]),t._v(" "),s("ul",[s("li",[t._v("根据需求和前端 RD 确定 module/method/args 参数")]),t._v(" "),s("li",[t._v("Native RD 根据约定实现 Module 扩展，前端 RD 根据约定实现 js 并打包成 jsbundle")]),t._v(" "),s("li",[t._v("Native RD 可以将 jsbundle 放到 assets 目录下加载调试，也可以远程加载调试")])]),t._v(" "),s("p",[t._v("demo 实现了双向通信，js 调用 Native 接口约定如下"),s("RouterLink",{attrs:{to:"/docs/sdk.html#module-的使用"}},[t._v("(module 的概念)")]),t._v(":")],1),t._v(" "),s("ul",[s("li",[t._v("Module 名是 "),s("code",[t._v("moduleDemo")])]),t._v(" "),s("li",[t._v("method 名是 "),s("code",[t._v("sayHello")])]),t._v(" "),s("li",[t._v("args 名是 "),s("code",[t._v('{"content":"测试"}')])])]),t._v(" "),s("p",[t._v("实现的效果是点击 jsbundle 里的按钮，会弹 "),s("code",[t._v("测试")]),t._v(" toast")]),t._v(" "),s("p",[t._v("native 调用 js 接口约定如下:")]),t._v(" "),s("ul",[s("li",[t._v("Module 名是 "),s("code",[t._v("moduleDemo")])]),t._v(" "),s("li",[t._v("method 名是 "),s("code",[t._v("NaTellJS")])]),t._v(" "),s("li",[t._v("args 名是 "),s("code",[t._v('{"content":"测试"}')])])]),t._v(" "),s("p",[t._v("实现的效果是点击 Native 侧的按钮，会动态改变 jsbundle 里的文字显示。")]),t._v(" "),s("p",[t._v("module 的实现需要先了解 3 个注解")]),t._v(" "),s("ul",[s("li",[t._v("@CmlModule 标注这个类是扩展模块")]),t._v(" "),s("li",[t._v("@CmlMethod 标注可供 JS 侧调用的方法")]),t._v(" "),s("li",[t._v("@CmlParam 标注调用的参数")])]),t._v(" "),s("p",[t._v("以下是根据约定实现的 Module 扩展示例")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('@CmlModule(alias = "moduleDemo")\npublic class ModuleDemo {\n    @CmlMethod(alias = "sayHello")\n    public void sayHello(ICmlActivityInstance instance, @CmlParam(name = "content") String content) {\n        Toast.makeText(instance.getContext(), content, Toast.LENGTH_SHORT);\n    }\n}\n')])])]),s("p",[t._v("将 Module 注册到 SDK")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("public class MyApplication extends Application implements CmlConfig {\n    @Override\n    public void onCreate() {\n        super.onCreate();\n\n        CmlEngine.getInstance().init(this, this);\n        CmlEngine.getInstance().registerModule(ModuleDemo.class); // 在这里注册\n    }\n\t...\n}\n")])])]),s("p",[t._v("从前端 RD 拿到 JSBundle， 进行渲染，重点关注 Demo 工程里 CmlViewActivity")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('private static final String URL_JS_BUNDLE_OK = "https://www.example.com/degradle.html?cml_addr=http://172.22.138.92:8000/weex/cml-demo-say.js";\n\n@Override\nprotected void onCreate(Bundle savedInstanceState) {\n\t....\n\t// cmlView.render(URL_JS_BUNDLE_OK, null); // 加载远程jsbundle\n\tcmlView.render("file://local/cml-demo-say.js", null); // 加载assets目录里的jsbundle\n\t...\n}\n')])])]),s("p",[t._v("js 侧的实现以及 jsbundle 打包参看接下来的 4.4.2 小结。")]),t._v(" "),s("h4",{attrs:{id:"js-侧的实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#js-侧的实现"}},[t._v("#")]),t._v(" js 侧的实现")]),t._v(" "),s("p",[t._v("同样以上面要实现的 Module 和方法为例，我们来看一下 js 侧的实现。")]),t._v(" "),s("p",[s("font",{attrs:{color:"#FF0000"}},[t._v("参考根目录 assets 目录下的 cml-demo-say.zip")])],1),t._v(" "),s("p",[t._v("1.初始化前端项目（也可以使用已有的项目）")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("cml init project\n请输入项目名称 cml-demo-say\n")])])]),s("p",[t._v("2.打开项目下 src/pages/index/index.cml 文件，粘贴以下代码。以下代码主要是展示了 js 和 Native 双向的通信的方法实现。先粘贴，然后我们在下面介绍通信封装的原理。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('<template>\n  <page title="chameleon">\n    <scroller height="{{winHeight}}">\n      <view class="scroller-wrap">\n        <view style="padding: 20cpx;">\n          <text>1，JS调用Native</text>\n          <text>callback返回内容: {{callbackRes}}</text>\n          <button\n            c-bind:onclick="sayHello"\n            text="JS调用Native sayHello方法"\n            style="margin-top: 20cpx;"\n          ></button>\n        </view>\n        <view style="padding: 20cpx;">\n          <text>2，Native调用JS 的NaTellJS方法已经注册监听，点击Native的改变文字按钮,下发状态文字将改变</text>\n          <text>状态：{{status}}</text>\n        </view>\n      </view>\n    </scroller>\n  </page>\n</template>\n\n<script>\nimport cml from "chameleon-api";\nimport cmlBridge from "chameleon-bridge";\n\nclass Index {\n  data = {\n    title: "chameleon",\n    callbackRes: \'\',\n    status: \'等待Native调用\',\n    winHeight: 0\n  }\n  methods = {\n    // 此处的方法实现你可以封装到其他目录，作为统一扩展的api\n    sayHello() {\n      cmlBridge.callNative(\n        \'moduleDemo\', // 模块名\n        \'sayHello\', // 方法名\n        { content: \'HelloCML\' }, // 参数\n        res => {\n          this.callbackRes = res;\n        } // 回调方法\n      );\n    }\n  }\n  mounted() {\n    // 主动监听客户端调用js\n    cmlBridge.listenNative(\n      \'moduleDemo\', // 模块名\n      \'NaTellJS\', // 方法名\n      res => {\n        this.status = res.content;\n      }\n    );\n    cml.getSystemInfo().then((info) => {\n      this.winHeight = Number(info.viewportHeight)\n    });\n  }\n}\nexport default new Index();\n<\/script>\n\n<style scoped>\n.scroller-wrap {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n</style>\n<script cml-type="json">\n{\n  "base": {\n    "usingComponents": {\n    }\n  },\n  "wx": {\n    "navigationBarTitleText": "index",\n    "backgroundTextStyle": "dark",\n    "backgroundColor": "#E2E2E2"\n  }\n}\n<\/script>\n')])])]),s("p",[t._v("3.你可以运行"),s("code",[t._v("cml weex dev")]),t._v("或者"),s("code",[t._v("cml weex build")]),t._v('命令，将 jsbundle 文件的在线地址或本地文件给到 Native 同学，按照上面 Native 部分提到的集成方式（本地或远程地址）进行联调。点击第一项的按钮你可以看到，客户端弹出了"HelloCML"的弹框。同时在'),s("code",[t._v("callback返回内容:")]),t._v("后返回了内容。点击 Native 端的“改变文字”按钮，在页面上的“状态：”后显示了客户端发来的“测试”字样。")]),t._v(" "),s("p",[t._v("4.接下来我们看一下原理：")]),t._v(" "),s("p",[t._v("我们通过"),s("code",[t._v("chameleon-bridge")]),t._v("提供的 callNative 和 listenNative 来与端通信，他们的参数及意义如下：")]),t._v(" "),s("ul",[s("li",[t._v("callNative(module:String, method:String, args:Object, callback:Function) JS 主动调用 Native 方法")]),t._v(" "),s("li",[t._v("listenNative(module:String, method:String, callback:Function) 监听 Native 调用 js")])]),t._v(" "),s("h5",{attrs:{id:"js-主动调用-native-方法"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#js-主动调用-native-方法"}},[t._v("#")]),t._v(" JS 主动调用 Native 方法")]),t._v(" "),s("p",[t._v("首先看 methods 里我们通过"),s("code",[t._v("chameleon-bridge")]),t._v("提供的 callNative 方法实现了 sayHello 方法，让 js 与 Native 主动通信。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("sayHello() {\n    cmlBridge.callNative(\n        'moduleDemo', // 模块名\n        'sayHello', // 方法名\n        { content: 'HelloCML' }, // 参数\n        res => {\n            this.callbackRes = res;\n        } // 回调方法\n    );\n}\n")])])]),s("p",[t._v("这样就调用到了 Native 的模块名为 moduleDemo 的模块的 sayHello 方法，同时 Native 会回调我们。"),s("strong",[t._v("当然你还可以封装到其他目录，作为统一扩展的 api 来存放并引入到项目文件中使用。")])]),t._v(" "),s("h5",{attrs:{id:"监听-native-调用-js"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#监听-native-调用-js"}},[t._v("#")]),t._v(" 监听 Native 调用 js")]),t._v(" "),s("p",[t._v("mounted 里我们通过"),s("code",[t._v("chameleon-bridge")]),t._v("提供的 listenNative 方法在页面初始化时监听了客户端要调用我们的模块名为 moduleDemo 的 NaTellJS 方法。注意，这个模块在前端其实可以理解为一个和 Native 同学约定的方法命名集合。调用前端"),s("code",[t._v("chameleon-bridge")]),t._v("库的 listenNative 方法会进行监听的注册，便可以被客户端调用到。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("cmlBridge.listenNative(\n    'moduleDemo', // 模块名\n    'NaTellJS', // 方法名\n    res => {\n        this.status = res.content;\n    }\n);\n")])])]),s("p",[s("strong",[t._v("同样你可以将此方法封装到其他 api 集合位置，进行引入使用")]),t._v("，如：")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("export function onNaTellJS(callback) {\n    cmlBridge.listenNative(\n        'moduleDemo', // 模块名\n        'NaTellJS', // 方法名\n        callback\n    );\n}\n")])])]),s("p",[t._v("如此一来，你便可以封装自己的扩展 api 了。")]),t._v(" "),s("h3",{attrs:{id:"js-bundle-缓存的禁用"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#js-bundle-缓存的禁用"}},[t._v("#")]),t._v(" js bundle 缓存的禁用")]),t._v(" "),s("p",[t._v("开发截断为了方便实时预览效果，可以关闭 js bundle 的缓存。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("@Override\npublic void configAdapter() {\n\t// 开发阶段可以禁用js bundle缓存\n\tCmlEnvironment.CML_ALLOW_BUNDLE_CACHE = false;\n\n\t...\n\n}\n")])])]),s("h2",{attrs:{id:"页面调起"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#页面调起"}},[t._v("#")]),t._v(" 页面调起")]),t._v(" "),s("h3",{attrs:{id:"整个页面使用-cml-容器实现"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#整个页面使用-cml-容器实现"}},[t._v("#")]),t._v(" 整个页面使用 CML 容器实现")]),t._v(" "),s("div",{staticClass:"language-java extra-class"},[s("pre",{pre:!0,attrs:{class:"language-java"}},[s("code",[s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("activity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),s("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// 即将支持")]),t._v("\n"),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlEngine")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("getInstance")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("launchPage")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("activity"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" url"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" options"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" requestCode"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" launchCallback"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),s("h3",{attrs:{id:"使用-cmlview"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#使用-cmlview"}},[t._v("#")]),t._v(" 使用 CmlView")]),t._v(" "),s("p",[s("font",{attrs:{color:"#FF0000"}},[t._v("参考根目录 app 目录下 demo")])],1),t._v(" "),s("p",[t._v("CmlView 用在和原生 Native View 混合布局的场景，")]),t._v(" "),s("div",{staticClass:"language-java extra-class"},[s("pre",{pre:!0,attrs:{class:"language-java"}},[s("code",[t._v("    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("private")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlView")]),t._v(" cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protected")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCreate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Nullable")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("Bundle")]),t._v(" savedInstanceState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCreate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("savedInstanceState"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("setContentView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("R")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("layout"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("activity_test_cml_view"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrameLayout")]),t._v(" flRoot "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("findViewById")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("R")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("id"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("fl_root"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        cmlView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("CmlView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("this")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        flRoot"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("addView")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("new")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("FrameLayout")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LayoutParams")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ViewGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LayoutParams")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MATCH_PARENT"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("ViewGroup")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("LayoutParams")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("MATCH_PARENT"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onCreate")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("render")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token class-name"}},[t._v("MainActivity")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("TEST_URL"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protected")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onResume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onResume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cmlView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onResume")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protected")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onPause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onPause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cmlView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onPause")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n    "),s("span",{pre:!0,attrs:{class:"token annotation punctuation"}},[t._v("@Override")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("protected")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("void")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onDestroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("super")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onDestroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("if")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("cmlView "),s("span",{pre:!0,attrs:{class:"token operator"}},[t._v("!=")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("null")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v(" "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n            cmlView"),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),s("span",{pre:!0,attrs:{class:"token function"}},[t._v("onDestroy")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n        "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n    "),s("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),s("h3",{attrs:{id:"打开普通-url"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#打开普通-url"}},[t._v("#")]),t._v(" 打开普通 URL")]),t._v(" "),s("p",[t._v("如果打开的是普通的 URL，则会自动使用 CmlWebEngine 调起 Web Container，渲染 H5 页面")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('    // 演示打开一般的URL\n    private static final String URL_NORMAL = "https://www.didiglobal.com";\n    ...\n\n    @Override\n    public void onClick(View view) {\n        switch (view.getId()) {\n            case R.id.txt_open_url:\n                CmlEngine.getInstance().launchPage(this, URL_NORMAL, null);\n                break;\n            ...\n        }\n    }\n')])])]),s("h3",{attrs:{id:"打开-js-bundle"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#打开-js-bundle"}},[t._v("#")]),t._v(" 打开 JS Bundle")]),t._v(" "),s("p",[t._v("如果打开的是 JS Bundle URL，则会自动使用 Native 渲染引擎调起 Native Container，渲染 JS Bundle")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('    // 这是一个可以正常打开的 JS_BUNDLE\n    private static final String URL_JS_BUNDLE_OK = "https://beatles-chameleon.github.io/chameleon-ui-builtin/dist/web/chameleon-ui-builtin.html?cml_addr=https%3A%2F%2Fbeatles-chameleon.github.io%2Fchameleon-ui-builtin%2Fdist%2Fweex%2Fchameleon-ui-builtin.js#/";\n    ...\n\n    @Override\n    public void onClick(View view) {\n        switch (view.getId()) {\n        \t...\n            case R.id.txt_open_js_bundle:\n                CmlEngine.getInstance().launchPage(this, URL_JS_BUNDLE_OK, null);\n                break;\n            ...\n        }\n    }\n')])])]),s("h3",{attrs:{id:"预加载"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#预加载"}},[t._v("#")]),t._v(" 预加载")]),t._v(" "),s("p",[t._v("如果打开的是一个已经预加载过的 JS Bundle URL，则会忽略下载过程，直接使用 Native 渲染引擎渲染界面")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('    // 这是一个测试预加载的 JS_BUNDLE\n    private static final String URL_JS_BUNDLE_PRELOAD = "https://beatles-chameleon.github.io/chameleon-ui-builtin/dist/web/chameleon-ui-builtin.html?cml_addr=https%3A%2F%2Fbeatles-chameleon.github.io%2Fchameleon-ui-builtin%2Fdist%2Fweex%2Fchameleon-ui-builtin.js#/";\n    ...\n\n    @Override\n    public void onClick(View view) {\n        switch (view.getId()) {\n        \t...\n            case R.id.txt_preload:\n                CmlEngine.getInstance().launchPage(this, URL_JS_BUNDLE_PRELOAD, null);\n                break;\n            ...\n        }\n    }\n')])])]),s("h3",{attrs:{id:"自动降级"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#自动降级"}},[t._v("#")]),t._v(" 自动降级")]),t._v(" "),s("p",[t._v("如果打开的是一个错误的 JS Bundle URL，则会自动降级，使用 CmlWebEngine 调起 Web Container，渲染前面 H5 地址页面，具体可以查看")]),t._v(" "),s("ul",[s("li",[t._v("工程化 -> cmlUrl 一节关于，cmlUrl 的定义")]),t._v(" "),s("li",[t._v("Native 渲染能力接入 -> 自动降级 一节，关于自动降级的详细说明")])]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v('    // 这是一个错误的 JS_BUNDLE\n    private static final String URL_JS_BUNDLE_ERR = "https://www.didiglobal.com?cml_addr=xxx.js";\n    ...\n\n    @Override\n    public void onClick(View view) {\n        switch (view.getId()) {\n            ...\n            case R.id.txt_degrade:\n                CmlEngine.getInstance().launchPage(this, URL_JS_BUNDLE_ERR, null);\n                break;\n        }\n    }\n')])])]),s("h2",{attrs:{id:"预加载-2"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#预加载-2"}},[t._v("#")]),t._v(" 预加载")]),t._v(" "),s("p",[t._v("如果某些 js bundle 不需要实时下载下来渲染，可以先配置到预加载列表里提前下载下来，提升用户交互体验。")]),t._v(" "),s("h3",{attrs:{id:"预加载列表的配置"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#预加载列表的配置"}},[t._v("#")]),t._v(" 预加载列表的配置")]),t._v(" "),s("p",[t._v("组装 CmlBundle 列表，并通过 CmlEngine 接口设置到 SDK 里，具体可以参考 demo。")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("   private List<CmlBundle> getPreloadList() {\n        CmlJsBundleEnvironment.DEBUG = true;\n        List<CmlBundle> cmlModels = new ArrayList<>();\n        CmlBundle model = new CmlBundle();\n        model.bundle = Util.parseCmlUrl(URL_JS_BUNDLE_PRELOAD);\n        model.priority = 2;\n        cmlModels.add(model);\n        return cmlModels;\n    }\n\n    ...\n\n    CmlEngine.getInstance().initPreloadList(getPreloadList());\n")])])]),s("h3",{attrs:{id:"开始预加载列表"}},[s("a",{staticClass:"header-anchor",attrs:{href:"#开始预加载列表"}},[t._v("#")]),t._v(" 开始预加载列表")]),t._v(" "),s("p",[t._v("根据使用方的业务，在适当位置执行预加载")]),t._v(" "),s("div",{staticClass:"language- extra-class"},[s("pre",{pre:!0,attrs:{class:"language-text"}},[s("code",[t._v("CmlEngine.getInstance().performPreload();\n")])])])])}),[],!1,null,null,null);a.default=e.exports}}]);