Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
12.c44665a3.js 80.5 KB
Newer Older
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
1 
(window.webpackJsonp=window.webpackJsonp||[]).push([[12],{149:function(t,a,s){t.exports=s.p+"assets/img/cml-project.e50ef814.png"},150:function(t,a,s){t.exports=s.p+"assets/img/project-config.28771b63.png"},460:function(t,a,s){t.exports=s.p+"assets/img/wx-project.7841ae19.png"},461:function(t,a,s){t.exports=s.p+"assets/img/init-component.814a18cc.png"},511:function(t,a,s){"use strict";s.r(a);var n=s(17),e=Object(n.a)({},(function(){var t=this,a=t.$createElement,n=t._self._c||a;return n("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[n("h1",{attrs:{id:"迁移微信小程序项目到-cml"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移微信小程序项目到-cml"}},[t._v("#")]),t._v(" 迁移微信小程序项目到 CML")]),t._v(" "),n("h2",{attrs:{id:"迁移原则："}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移原则："}},[t._v("#")]),t._v(" 迁移原则：")]),t._v(" "),n("p",[t._v("以小逻辑块为单位，对照老代码，以 cml 语法重写，报错可修正")]),t._v(" "),n("p",[t._v("这样可避免以下问题：")]),t._v(" "),n("p",[t._v("1、大块逻辑迁移会导致报错无法追查")]),t._v(" "),n("p",[t._v("2、直接 copy 会导致语法隐藏 bug 不可控（虽然 ide 没有问题，但真机调试出问题）")]),t._v(" "),n("p",[t._v("请尽量按照 cml 语法重写迁移，避免语法纠错浪费时间")]),t._v(" "),n("h4",{attrs:{id:"小程序多文件结构-cml-单文件页面"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序多文件结构-cml-单文件页面"}},[t._v("#")]),t._v(" 小程序多文件结构 -> cml 单文件页面")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("xxx.wxml")]),t._v(" "),n("td",[n("code",[t._v("<template></template>")])])]),t._v(" "),n("tr",[n("td",[t._v("xxx.js")]),t._v(" "),n("td",[n("code",[t._v("<script><\/script>")])])]),t._v(" "),n("tr",[n("td",[t._v("xxx.wxss")]),t._v(" "),n("td",[n("code",[t._v("<style></style>")])])]),t._v(" "),n("tr",[n("td",[t._v("xxx.json")]),t._v(" "),n("td",[n("code",[t._v('<script cml-type="json"><\/script>')])])])])]),t._v(" "),n("h2",{attrs:{id:"项目初始化"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#项目初始化"}},[t._v("#")]),t._v(" 项目初始化")]),t._v(" "),n("div",{staticClass:"language- extra-class"},[n("pre",{pre:!0,attrs:{class:"language-text"}},[n("code",[t._v("cml init project\n\n")])])]),n("p",[t._v("初始化后，CML 项目如下：")]),t._v(" "),n("img",{attrs:{src:s(149),width:"150px"}}),t._v(" "),n("p",[t._v("依具体情况配置构建平台和配置平台基础样式。")]),t._v(" "),n("p",[t._v("可修改 "),n("code",[t._v("chameleon.config.js")]),t._v(" 的 "),n("code",[t._v("platforms")]),t._v(" 和 "),n("code",[t._v("baseStyle")]),t._v(" 字段，如下：")]),t._v(" "),n("img",{attrs:{src:s(150),width:"400px"}}),t._v(" "),n("p",[t._v("假设有下面 👇 结构的小程序项目")]),t._v(" "),n("img",{attrs:{src:s(460),width:"400px"}}),t._v(" "),n("p",[t._v("pages 下包含各个页面，components 下包含各个组件代码")]),t._v(" "),n("h2",{attrs:{id:"迁移-app-js、app-json"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移-app-js、app-json"}},[t._v("#")]),t._v(" 迁移 app.js、app.json")]),t._v(" "),n("p",[n("strong",[t._v("小程序代码配置")]),n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE",target:"_blank",rel:"noopener noreferrer"}},[t._v("微信应用的配置"),n("OutboundLink")],1)]),t._v(" "),n("p",[t._v("app.json")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index2"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"pages/index4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"window"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarBackgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#fff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WeChat"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"black"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n")])])]),n("h3",{attrs:{id:"迁移-app-json-路由-pages-配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移-app-json-路由-pages-配置"}},[t._v("#")]),t._v(" 迁移 app.json ———— 路由 pages 配置")]),t._v(" "),n("p",[t._v("以上小程序 "),n("code",[t._v("app.json")]),t._v(" 中 "),n("code",[t._v("pages")]),t._v(" 字段 -> "),n("code",[t._v("src/router.config.json")]),t._v(" 中 "),n("code",[t._v("path")]),t._v(" 字段")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mode"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"history"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"domain"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"https://www.chameleon.com"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"routes"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("[")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/cml/h5/index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/pages/index1/index1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"首页"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index.php"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/cml/h5/inner-detail"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/pages/index2/index2"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"首页"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index.php"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/cml/h5/inner-home"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/pages/index3/index3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"首页"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index.php"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"url"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/cml/h5/inner-my"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"path"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/pages/index4/index4"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"name"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"首页"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"mock"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index.php"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("]")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("h3",{attrs:{id:"迁移-app-json-其他配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移-app-json-其他配置"}},[t._v("#")]),t._v(" 迁移 app.json ———— 其他配置")]),t._v(" "),n("p",[t._v("小程序 "),n("code",[t._v("app.json")]),t._v(" 中 其他字段 -> "),n("code",[t._v("src/app/app.cml")]),t._v(" 中配置")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"json"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"window"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"light"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarBackgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#fff"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Chameleon"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"black"')]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),n("h3",{attrs:{id:"迁移-app-js-生命周期映射"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移-app-js-生命周期映射"}},[t._v("#")]),t._v(" 迁移 app.js ———— 生命周期映射")]),t._v(" "),n("p",[t._v("小程序 "),n("code",[t._v("app.js")]),t._v("中的生命周期 -> "),n("code",[t._v("src/app/app.cml")])]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("onLaunch")]),t._v(" "),n("td",[t._v("beforeCreate")])]),t._v(" "),n("tr",[n("td",[t._v("onShow")]),t._v(" "),n("td",[t._v("mounted")])]),t._v(" "),n("tr",[n("td",[t._v("onHide")]),t._v(" "),n("td",[t._v("destroyed")])])])]),t._v(" "),n("p",[t._v("总结")]),t._v(" "),n("p",[t._v("小程序中"),n("code",[t._v("app.json app.js app.wxss")]),t._v("和 "),n("code",[t._v("src/app/app.cml")]),t._v("的对应关系如下")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序 app.js")]),t._v(" "),n("th",[t._v("CML 项目 src/app/app.cml")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("app.js")]),t._v(" "),n("td",[n("code",[t._v("<script><\/script>")])])]),t._v(" "),n("tr",[n("td",[t._v("app.wxss")]),t._v(" "),n("td",[n("code",[t._v("<style></style>")])])]),t._v(" "),n("tr",[n("td",[t._v("app.json")]),t._v(" "),n("td",[n("code",[t._v('<script cml-type="json"><\/script>')])])])])]),t._v(" "),n("h2",{attrs:{id:"迁移页面"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移页面"}},[t._v("#")]),t._v(" 迁移页面")]),t._v(" "),n("h3",{attrs:{id:"新建页面"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#新建页面"}},[t._v("#")]),t._v(" 新建页面")]),t._v(" "),n("p",[t._v("如上所述，小程序 "),n("code",[t._v("app.json")]),t._v(" 中 "),n("code",[t._v("pages")]),t._v(" 每个字段，对应"),n("code",[t._v("router.config.json")]),t._v("中每条路由项，对应 CML 项目的每个页面")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("cml init page\n\n输入 index1\n\ncml init page\n\n输入 index2\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),t._v("\n")])])]),n("p",[t._v("利用命令行命令，在"),n("code",[t._v("src/pages")]),t._v("中生成对应的页面")]),t._v(" "),n("h3",{attrs:{id:"迁移页面配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移页面配置"}},[t._v("#")]),t._v(" 迁移"),n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE",target:"_blank",rel:"noopener noreferrer"}},[t._v("页面配置"),n("OutboundLink")],1)]),t._v(" "),n("p",[t._v("假设小程序原有页面 "),n("code",[t._v("index1.json")]),t._v(" 配置如下")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component1"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component2"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp2"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component3"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#E2E2E2"')]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("修改"),n("code",[t._v("src/pages/index1.cml")]),t._v(" 页面配置，如下：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),t._v("script cml"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"json"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"usingComponents"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n     \t"),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component1"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp1"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component2"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp2"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n        "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"my-component3"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"/components/comp3"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"wx"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"navigationBarTitleText"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"index"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundTextStyle"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"dark"')]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"backgroundColor"')]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v('"#E2E2E2"')]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("<")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("/")]),t._v("script"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(">")]),t._v("\n")])])]),n("p",[t._v("其中：")]),t._v(" "),n("ul",[n("li",[n("p",[n("code",[t._v("base")]),t._v(" 代表各个小程序页面的共有配置")])]),t._v(" "),n("li",[n("p",[n("code",[t._v("wx")]),t._v(" 代表微信小程序端特有的配置")])])]),t._v(" "),n("h3",{attrs:{id:"迁移页面-生命周期映射"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移页面-生命周期映射"}},[t._v("#")]),t._v(" 迁移页面 ———— 生命周期映射")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("onLoad")]),t._v(" "),n("td",[t._v("created")])]),t._v(" "),n("tr",[n("td",[t._v("onShow")]),t._v(" "),n("td",[t._v("onShow")])]),t._v(" "),n("tr",[n("td",[t._v("onReady")]),t._v(" "),n("td",[t._v("mounted")])]),t._v(" "),n("tr",[n("td",[t._v("onHide")]),t._v(" "),n("td",[t._v("onHide")])]),t._v(" "),n("tr",[n("td",[t._v("onUnload")]),t._v(" "),n("td",[t._v("destroyed")])]),t._v(" "),n("tr",[n("td",[t._v("onShareAppMessage")]),t._v(" "),n("td",[t._v("生命周期多态")])])])]),t._v(" "),n("p",[t._v("总结")]),t._v(" "),n("p",[t._v("1 小程序页面的迁移都要通过 "),n("code",[t._v("cml init page")]),t._v("去初始化这个页面")]),t._v(" "),n("p",[t._v("2 初始化的页面要在"),n("code",[t._v("src/router.config.json")]),t._v("配置对应的"),n("code",[t._v("path")]),t._v("字段")]),t._v(" "),n("h2",{attrs:{id:"迁移组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移组件"}},[t._v("#")]),t._v(" 迁移组件")]),t._v(" "),n("h3",{attrs:{id:"新建组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#新建组件"}},[t._v("#")]),t._v(" 新建组件")]),t._v(" "),n("p",[t._v("如上，"),n("code",[t._v("index1.json")]),t._v("页面中引用了组件 "),n("code",[t._v("comp1 comp2 comp3")]),t._v(";")]),t._v(" "),n("p",[t._v("组件分为："),n("code",[t._v("普通组件")]),t._v(" 和 "),n("code",[t._v("多态组件")])]),t._v(" "),n("p",[t._v("这里以"),n("code",[t._v("普通组件")]),t._v("为例，多态组件具体使用可以"),n("RouterLink",{attrs:{to:"/docs/poly.html"}},[t._v("参考")])],1),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("cml init component\n选择 "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("普通组件")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("component"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n输入 comp1\n\ncml init component\n选择 "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("普通组件")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),t._v("normal"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("-")]),t._v("component"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),t._v("\n输入 comp2\n\n"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("...")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("\n")])])]),n("img",{attrs:{src:s(461),width:"400px"}}),t._v(" "),n("p",[t._v("之后，会在 "),n("code",[t._v("src/components")]),t._v("下生成对应的组件;")]),t._v(" "),n("h3",{attrs:{id:"迁移组件-配置"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移组件-配置"}},[t._v("#")]),t._v(" 迁移组件 ———— 配置")]),t._v(" "),n("p",[t._v("同"),n("code",[t._v("4.2 迁移页面配置")])]),t._v(" "),n("h3",{attrs:{id:"迁移组件-生命周期映射"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#迁移组件-生命周期映射"}},[t._v("#")]),t._v(" 迁移组件 ———— 生命周期映射")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("created")]),t._v(" "),n("td",[t._v("created")])]),t._v(" "),n("tr",[n("td",[t._v("attached")]),t._v(" "),n("td",[t._v("beforeMount")])]),t._v(" "),n("tr",[n("td",[t._v("ready")]),t._v(" "),n("td",[t._v("mounted")])]),t._v(" "),n("tr",[n("td",[t._v("detached")]),t._v(" "),n("td",[t._v("destroyed")])])])]),t._v(" "),n("p",[t._v("总结")]),t._v(" "),n("p",[t._v("1 小程序组件的迁移都要通过 "),n("code",[t._v("cml init component")]),t._v("去初始化这个组件")]),t._v(" "),n("p",[t._v("2 初始化的组件要在使用该组件的地方配置 "),n("code",[t._v("usingComponents")]),t._v("字段")]),t._v(" "),n("h2",{attrs:{id:"页面-组件迁移细节"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#页面-组件迁移细节"}},[t._v("#")]),t._v(" 页面&&组件迁移细节")]),t._v(" "),n("h3",{attrs:{id:"template模板迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#template模板迁移"}},[t._v("#")]),t._v(" "),n("code",[t._v("template")]),t._v("模板迁移")]),t._v(" "),n("p",[t._v("这里以 CML 语法为例："),n("RouterLink",{attrs:{to:"/docs/cml.html"}},[t._v("CML 基础语法")])],1),t._v(" "),n("h4",{attrs:{id:"数据绑定、条件渲染、循环、事件绑定的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#数据绑定、条件渲染、循环、事件绑定的迁移"}},[t._v("#")]),t._v(" 数据绑定、条件渲染、循环、事件绑定的迁移")]),t._v(" "),n("p",[t._v("假设，原有小程序代码，如下：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("class")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("scroller-wrap"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  数据绑定\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  条件渲染\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition1}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("wx:if"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("elif")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition2}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("wx:elif"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("else")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("wx:else"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  循环\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-index")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for-item")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  事件绑定\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-hi")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("WeChat"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapName"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Click me!"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("那么，使用 CML 语法后：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  数据绑定\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  条件渲染\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition1}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("c-if"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-else-if")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{condition2}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("c-else-if"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-else")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("c-else"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  循环\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{array}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for-index")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("index"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for-item")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("item"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  事件绑定\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("data-hi")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("WeChat"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapName"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Click me!"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  CML 语法扩展了事件绑定，支持直接在函数中传参\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("id")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapTest"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindtap")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("tapName('weChat',1,2,item)"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("Click me!"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h4",{attrs:{id:"小程序内置组件-cml-内置组件"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序内置组件-cml-内置组件"}},[t._v("#")]),t._v(" 小程序内置组件 -> cml 内置组件")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("view")]),t._v(" "),n("td",[t._v("view")])]),t._v(" "),n("tr",[n("td",[t._v("text")]),t._v(" "),n("td",[t._v("text")])]),t._v(" "),n("tr",[n("td",[t._v("block")]),t._v(" "),n("td",[t._v("block")])]),t._v(" "),n("tr",[n("td",[t._v("scroll-view")]),t._v(" "),n("td",[t._v("scroller")])]),t._v(" "),n("tr",[n("td",[t._v("list")]),t._v(" "),n("td",[t._v("list")])]),t._v(" "),n("tr",[n("td",[t._v("swiper")]),t._v(" "),n("td",[t._v("carousel")])]),t._v(" "),n("tr",[n("td",[t._v("button")]),t._v(" "),n("td",[t._v("button")])]),t._v(" "),n("tr",[n("td",[t._v("input")]),t._v(" "),n("td",[t._v("input")])]),t._v(" "),n("tr",[n("td",[t._v("textarea")]),t._v(" "),n("td",[t._v("textarea")])]),t._v(" "),n("tr",[n("td",[t._v("switch")]),t._v(" "),n("td",[t._v("switch")])]),t._v(" "),n("tr",[n("td",[t._v("radio")]),t._v(" "),n("td",[t._v("radio")])]),t._v(" "),n("tr",[n("td",[t._v("checkbox")]),t._v(" "),n("td",[t._v("checkbox")])]),t._v(" "),n("tr",[n("td",[t._v("image")]),t._v(" "),n("td",[t._v("image")])]),t._v(" "),n("tr",[n("td",[t._v("video")]),t._v(" "),n("td",[t._v("video")])])])]),t._v(" "),n("p",[n("strong",[t._v("注意：")]),t._v(" 小程序和 CML 的内置组件传参是"),n("code",[t._v("不一样")]),t._v("的")]),t._v(" "),n("p",[t._v("具体 cml 内置组件使用方式"),n("RouterLink",{attrs:{to:"/components/base.html"}},[t._v("参考")])],1),t._v(" "),n("h4",{attrs:{id:"小程序原生组件的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序原生组件的迁移"}},[t._v("#")]),t._v(" 小程序原生组件的迁移")]),t._v(" "),n("p",[t._v("对于原生组件，需要在多态组件中调用，并且，需要找到其他端类似的组件。")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("xxx.web.cml")]),t._v(" "),n("td",[t._v("可以再这里调用 Vue 第三方库的组件")])]),t._v(" "),n("tr",[n("td",[t._v("xxx.wx.cml")]),t._v(" "),n("td",[t._v("可以在这里调用微信第三方组件库或者微信的原生组件（origin-）")])]),t._v(" "),n("tr",[n("td",[t._v("xxx.weex.cml")]),t._v(" "),n("td",[t._v("可以在这里调用 Weex 第三方组件库")])])])]),t._v(" "),n("p",[t._v("具体使用"),n("RouterLink",{attrs:{to:"/docs/poly.html#多态组件"}},[t._v("参考-多态组件")])],1),t._v(" "),n("p",[t._v("如果希望使用小程序端的原生组件，那么可以在原生标签前加上 "),n("code",[t._v("origin-")]),t._v("，CML 框架会渲染原生组件。")]),t._v(" "),n("p",[t._v("如果想要用微信小程序的第三方组件库，参考"),n("RouterLink",{attrs:{to:"/tutorial/poly-component.html"}},[t._v("实现多态 ECharts")])],1),t._v(" "),n("p",[t._v("假设，原有小程序代码，如下：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("picker-view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{value}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindchange")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bindChange"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("picker-view-column")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[n("span",{pre:!0,attrs:{class:"token namespace"}},[t._v("wx:")]),t._v("for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("picker-view-column")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("p",[t._v("那么，使用 CML 语法后：")]),t._v(" "),n("div",{staticClass:"language-vue extra-class"},[n("pre",{pre:!0,attrs:{class:"language-vue"}},[n("code",[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("origin-picker-view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("value")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{value}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("bindchange")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("bindChange"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("origin-picker-view-column")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("view")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token attr-name"}},[t._v("c-for")]),n("span",{pre:!0,attrs:{class:"token attr-value"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("=")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')]),t._v("{{list}}"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v('"')])]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("<")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("{{item}}"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("text")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("origin-picker-view-column")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token tag"}},[n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("</")]),t._v("origin-picker-view")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(">")])]),t._v("\n")])])]),n("h4",{attrs:{id:"模板上需要替换的语法汇总"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模板上需要替换的语法汇总"}},[t._v("#")]),t._v(" 模板上需要替换的语法汇总")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("wx:if")]),t._v(" "),n("td",[t._v("c-if")])]),t._v(" "),n("tr",[n("td",[t._v("wx:elif")]),t._v(" "),n("td",[t._v("c-else-if")])]),t._v(" "),n("tr",[n("td",[t._v("wx:else")]),t._v(" "),n("td",[t._v("c-else")])]),t._v(" "),n("tr",[n("td",[t._v("wx:for")]),t._v(" "),n("td",[t._v("c-for")])]),t._v(" "),n("tr",[n("td",[t._v("wx:for-index")]),t._v(" "),n("td",[t._v("c-for-index")])]),t._v(" "),n("tr",[n("td",[t._v("wx:for-item")]),t._v(" "),n("td",[t._v("c-for-item")])]),t._v(" "),n("tr",[n("td",[t._v("wx:key")]),t._v(" "),n("td",[t._v("c-key")])]),t._v(" "),n("tr",[n("td",[t._v("bindtap")]),t._v(" "),n("td",[t._v("c-bind:tap")])]),t._v(" "),n("tr",[n("td",[t._v("catchtap")]),t._v(" "),n("td",[t._v("c-catch:tap")])])])]),t._v(" "),n("h4",{attrs:{id:"cml-对于语法的扩展支持"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#cml-对于语法的扩展支持"}},[t._v("#")]),t._v(" CML 对于语法的扩展支持")]),t._v(" "),n("p",[t._v("指令的扩展 c-show、c-model、c-show"),n("RouterLink",{attrs:{to:"/docs/cml.html#指令"}},[t._v("参考")])],1),t._v(" "),n("p",[t._v("component is 动态组件的扩展"),n("RouterLink",{attrs:{to:"/docs/cml.html#动态组件"}},[t._v("参考")])],1),t._v(" "),n("p",[t._v("事件绑定支持内联事件传参数"),n("RouterLink",{attrs:{to:"/docs/cml.html#事件"}},[t._v("参考")])],1),t._v(" "),n("p",[t._v("总结")]),t._v(" "),n("p",[t._v("1 对于小程序的语法，比如"),n("code",[t._v("wx:if wx:for")]),t._v("等要替换成 cml 对应的语法 "),n("code",[t._v("c-if c-for")])]),t._v(" "),n("p",[t._v("2 对于小程序的事件绑定，要转化成 CML 的"),n("code",[t._v("c-bind c-catch")]),t._v("的形式，cml 扩展了支持事件传参")]),t._v(" "),n("h3",{attrs:{id:"js-内容迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#js-内容迁移"}},[t._v("#")]),t._v(" JS 内容迁移")]),t._v(" "),n("h4",{attrs:{id:"数据的迁移参考"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#数据的迁移参考"}},[t._v("#")]),t._v(" 数据的迁移"),n("RouterLink",{attrs:{to:"/docs/logic.html"}},[t._v("参考")])],1),t._v(" "),n("p",[t._v("其中需要注意点 小程序中的 "),n("code",[t._v("properties")]),t._v(" 对应于 cml 中的 "),n("code",[t._v("props")])]),t._v(" "),n("p",[t._v("小程序")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v(" properties"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    innerText"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n      type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n      value"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n")])])]),n("p",[t._v("CML 项目")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("props "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  innerText"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    type"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" String"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n    "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("default")]),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'default value'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("h4",{attrs:{id:"微信小程序-api-的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#微信小程序-api-的迁移"}},[t._v("#")]),t._v(" 微信小程序 API 的迁移")]),t._v(" "),n("p",[t._v("假设，原有小程序代码，如下：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("wx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("redirectTo")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  url"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'test?id=1'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[t._v("那么，使用 CML 语法后：")]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" cml "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-api'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\ncml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("redirectTo")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  path"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'/pages/navigateBack/index'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  query"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n    id"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token number"}},[t._v("1")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/",target:"_blank",rel:"noopener noreferrer"}},[t._v("小程序的 API 文档"),n("OutboundLink")],1)]),t._v(" "),n("p",[n("RouterLink",{attrs:{to:"/api/#redirectto"}},[t._v("chameleon-api 的文档")])],1),t._v(" "),n("p",[t._v("这里对于 API 小程序的 API 和 CML 的 API 的文档中对应细则做个简单的表格，如下")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("微信小程序 API")]),t._v(" "),n("th",[t._v("chameleon-api")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.canIUse.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("wx.canIUse"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#caniuse"}},[t._v("canIUse")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.getSystemInfoSync.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("系统信息"),n("OutboundLink")],1)]),t._v(" "),n("td",[t._v("[系统信息](../api/#get\bsysteminfo)")])]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/clearInterval.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("计时器"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#clearinterval"}},[t._v("计时器")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.switchTab.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("路由"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("a",{attrs:{href:"../api/navigateto"}},[t._v("路由")])])]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("交互"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#showtoast"}},[t._v("交互")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.setNavigationBarTitle.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("设置页面 title"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#settitle"}},[t._v("设置页面 title")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.createAnimation.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("动画"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#createanimation"}},[t._v("动画")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("网络"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#request"}},[t._v("网络")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.setStorageSync.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("数据缓存"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#setstorage"}},[t._v("数据缓存")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("获取图片信息"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#chooseimage"}},[t._v("获取图片信息")])],1)]),t._v(" "),n("tr",[n("td",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/api/wx.openLocation.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("位置"),n("OutboundLink")],1)]),t._v(" "),n("td",[n("RouterLink",{attrs:{to:"/api/#getlocationinfo"}},[t._v("位置")])],1)])])]),t._v(" "),n("p",[t._v("以上 "),n("code",[t._v("chameleon-api")]),t._v("提供的接口都是支持跨多端的，对于一些没有提供的跨多端的接口，而你的项目中又是必须用到的情况下，可以通过多态接口来实现。")]),t._v(" "),n("h4",{attrs:{id:"小程序事件的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#小程序事件的迁移"}},[t._v("#")]),t._v(" 小程序事件的迁移")]),t._v(" "),n("p",[t._v("注意，自定义组件的事件的触发机制，映射如下：")]),t._v(" "),n("table",[n("thead",[n("tr",[n("th",[t._v("小程序")]),t._v(" "),n("th",[t._v("CML")])])]),t._v(" "),n("tbody",[n("tr",[n("td",[t._v("this.triggerEvent(xxx,xxx)")]),t._v(" "),n("td",[t._v("this.$cmlEmit(xxx,xxx)")])])])]),t._v(" "),n("p",[t._v("事件对象参数")]),t._v(" "),n("p",[t._v("CML 对 "),n("code",[t._v("web")]),t._v(" "),n("code",[t._v("native")]),t._v(" "),n("code",[t._v("wx")]),t._v(" 各个端的事件对象进行了统一代理"),n("RouterLink",{attrs:{to:"/docs/cml.html#事件"}},[t._v("参考")]),t._v("。")],1),t._v(" "),n("p",[t._v("对于灰度区组件(多态组件) 各个端的事件对象还是"),n("strong",[t._v("对应端的事件对象")]),t._v("，CML 框架不会对灰度区 "),n("code",[t._v("origin-")]),t._v(" 开头的标签和第三方组件标签上绑定的事件进行事件代理")]),t._v(" "),n("h4",{attrs:{id:"模块化的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#模块化的迁移"}},[t._v("#")]),t._v(" 模块化的迁移")]),t._v(" "),n("p",[t._v("小程序的模块化")]),t._v(" "),n("ul",[n("li",[n("a",{attrs:{href:"https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html",target:"_blank",rel:"noopener noreferrer"}},[t._v("参考"),n("OutboundLink")],1)])]),t._v(" "),n("p",[t._v("CML 的模块化")]),t._v(" "),n("p",[t._v("假如 模块文件 "),n("code",[t._v("m1.js")])]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[t._v("module"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("exports "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  info"),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v(":")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'I am CML'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),n("p",[n("code",[t._v("xxx.cml")]),t._v(" 引用了 "),n("code",[t._v("m1.js")])]),t._v(" "),n("div",{staticClass:"language-javascript extra-class"},[n("pre",{pre:!0,attrs:{class:"language-javascript"}},[n("code",[n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("import")]),t._v(" cml "),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("from")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'chameleon-api'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("//node_modules中的模块")]),t._v("\nconsole"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'cml'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" cml"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token keyword"}},[t._v("const")]),t._v(" m1 "),n("span",{pre:!0,attrs:{class:"token operator"}},[t._v("=")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("require")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'path/to/m1.js'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\nconsole"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),n("span",{pre:!0,attrs:{class:"token function"}},[t._v("log")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("(")]),n("span",{pre:!0,attrs:{class:"token string"}},[t._v("'m1'")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" m1"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(".")]),t._v("info"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(")")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token comment"}},[t._v("// I am CML")]),t._v("\n")])])]),n("p",[t._v("总结")]),t._v(" "),n("p",[t._v("1 小程序 JS 层用到的全局变量 "),n("code",[t._v("wx")]),t._v(" 要通过 "),n("RouterLink",{attrs:{to:"/api/"}},[t._v("chameleon-api")]),t._v(" 去替换成对应的,如果没有对应的 API，需要通过多态接口")],1),t._v(" "),n("p",[t._v("2 小程序中的"),n("code",[t._v("properties data")]),t._v("对应于 CML 项目 "),n("code",[t._v("props")]),t._v("、"),n("code",[t._v("data")])]),t._v(" "),n("p",[t._v("3 小程序中的除了生命周期之外的事件都对应在 CML 项目中的"),n("code",[t._v("methods")])]),t._v(" "),n("p",[t._v("4 CML 提供了"),n("code",[t._v("chameleon-store")]),t._v("，可以用来存储一些全局的变量")]),t._v(" "),n("p",[t._v("5 小程序触发视图更新的"),n("code",[t._v("setData")]),t._v("不能再使用，chameleon 自带了一套响应式的数据视图绑定")]),t._v(" "),n("p",[t._v("6 模块化中引用的模块要保证多端的适用性，参考"),n("a",{attrs:{href:"https://github.com/chameleon-team/chameleon-api",target:"_blank",rel:"noopener noreferrer"}},[t._v("chameleon-api"),n("OutboundLink")],1)]),t._v(" "),n("h3",{attrs:{id:"style-内容的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#style-内容的迁移"}},[t._v("#")]),t._v(" style 内容的迁移")]),t._v(" "),n("h4",{attrs:{id:"页面布局的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#页面布局的迁移"}},[t._v("#")]),t._v(" 页面布局的迁移")]),t._v(" "),n("p",[t._v("由于 CML 应用是跨多端 Web Native 小程序框架，如果需要跨 "),n("code",[t._v("native")]),t._v("，必须使用 "),n("code",[t._v("flexbox")]),t._v(" 进行样式布局，其他场景可以参考"),n("RouterLink",{attrs:{to:"/tutorial/web-wx-only-app.html"}},[t._v("只跨 Web 和小程序的应用")])],1),t._v(" "),n("p",[t._v("关于样式的使用教程"),n("RouterLink",{attrs:{to:"/docs/cmss.html"}},[t._v("参考")])],1),t._v(" "),n("p",[t._v("模板上的样式语法"),n("RouterLink",{attrs:{to:"/docs/cmss.html"}},[t._v("参考")]),t._v(",基本和微信小程序是相同的；")],1),t._v(" "),n("h4",{attrs:{id:"样式单位的迁移"}},[n("a",{staticClass:"header-anchor",attrs:{href:"#样式单位的迁移"}},[t._v("#")]),t._v(" 样式单位的迁移")]),t._v(" "),n("p",[t._v("如果样式想要适配多端，需要将单位改成"),n("code",[t._v("cpx")]),t._v(";")]),t._v(" "),n("p",[t._v("假设，原有小程序代码，如下：")]),t._v(" "),n("div",{staticClass:"language-css extra-class"},[n("pre",{pre:!0,attrs:{class:"language-css"}},[n("code",[n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".demo-com")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-content")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".title")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #61c7fc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 72rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 160rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".logo")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100rpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("那么，使用 CML 语法后：")]),t._v(" "),n("div",{staticClass:"language-css extra-class"},[n("pre",{pre:!0,attrs:{class:"language-css"}},[n("code",[n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".demo-com")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("display")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" flex"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("flex-direction")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" column"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-items")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 400cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("justify-content")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".title")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("align-self")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" center"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #61c7fc"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("font-size")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 72cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 160cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-bottom")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 20cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".logo")]),t._v(" "),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("width")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("height")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 150cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n  "),n("span",{pre:!0,attrs:{class:"token property"}},[t._v("margin-top")]),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 100cpx"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),n("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),n("p",[t._v("以上，简单的介绍了微信小程序迁移到 CML 的简单步骤，如果还有任何疑问，欢迎随时在 CML 官方微信和官方 QQ 群里进行反馈，我们将随时解答你的困惑，再次感谢你对 CML 的支持~")]),t._v(" "),n("p",[t._v("​ Best wishes")]),t._v(" "),n("p",[t._v("​ CML 团队")])])}),[],!1,null,null,null);a.default=e.exports}}]);