3 迁移 app.js、app.json

小程序代码配置微信应用的配置

app.json

  1. {
  2.   "pages":[
  3.     "pages/index1",
  4.     "pages/index2",
  5.     "pages/index3",
  6.     "pages/index4",
  7.   ],
  8.   "window":{
  9.     "backgroundTextStyle":"light",
  10.     "navigationBarBackgroundColor": "#fff",
  11.     "navigationBarTitleText": "WeChat",
  12.     "navigationBarTextStyle":"black"
  13.   }
  14. }

3.1.0 迁移 app.json ———— 路由pages配置

以上小程序 app.json 中 pages 字段 -> src/router.config.json 中 path 字段

  1. {
  2.   "mode": "history",
  3.   "domain": "https://www.chameleon.com",
  4.   "routes":[
  5.     {
  6.       "url": "/cml/h5/index",
  7.       "path": "/pages/index1/index1",
  8.       "name": "首页",
  9.       "mock": "index.php"
  10.     },
  11.     {
  12.       "url": "/cml/h5/inner-detail",
  13.       "path": "/pages/index2/index2",
  14.       "name": "首页",
  15.       "mock": "index.php"
  16.     },
  17.     {
  18.       "url": "/cml/h5/inner-home",
  19.       "path": "/pages/index3/index3",
  20.       "name": "首页",
  21.       "mock": "index.php"
  22.     },
  23.     {
  24.       "url": "/cml/h5/inner-my",
  25.       "path": "/pages/index4/index4",
  26.       "name": "首页",
  27.       "mock": "index.php"
  28.     }
  29.   ]
  30. }

3.1.1 迁移 app.json ———— 其他配置

小程序 app.json 中 其他字段 -> src/app/app.cml 中配置

  2. <script cml-type="json">
  3. {
  4.   "wx": {
  5.     "window": {
  6.       "backgroundTextStyle":"light",
  7.       "navigationBarBackgroundColor": "#fff",
  8.       "navigationBarTitleText": "Chameleon",
  9.       "navigationBarTextStyle":"black"
  10.     }
  11.   }
  12. }
  13. </script>

3.2 迁移 app.js ———— 生命周期映射

小程序 app.js中的生命周期 -> src/app/app.cml

小程序chameleon
onLaunchbeforeCreate
onShowmounted
onHidedestroyed

总结

小程序中app.json app.js app.wxss和 src/app/app.cml的对应关系如下

小程序 app.jscml项目 src/app/app.cml
app.js<script></script>
app.wxss<style></style>
app.json<script cml-type="json"></script>