如何修改配置

在小程序项目里面，分为：

小程序 —— 项目配置

可以在项目根目录使用 project.config.json 文件对项目进行配置。

配置示例：

  1. {
  2.   "miniprogramRoot": "./src",
  3.   "debugOptions": {}
  4. }

小程序 —— 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

配置示例：

  1. {
  2.   "pages": ["pages/index/index", "pages/logs/index"],
  3.   "window": {
  4.     "navigationBarTitleText": "Demo"
  5.   },
  6.   "networkTimeout": {
  7.     "request": 10000,
  8.     "downloadFile": 10000
  9.   }
  10. }

小程序 —— 页面配置

每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

配置示例：

  1. {
  2.   "navigationBarBackgroundColor": "#ffffff",
  3.   "navigationBarTextStyle": "black",
  4.   "navigationBarTitleText": "微信接口功能演示",
  5.   "backgroundColor": "#eeeeee",
  6.   "backgroundTextStyle": "light"
  7. }

同样，在 cml项目里面，分为：

cml —— 项目配置

chameleon.config.js 为项目的配置文件，你可以定制化构建，比如是否带 hash，是否  压缩等等。

配置示例：

  1. // 设置静态资源的线上路径
  2. const publicPath = "//www.static.chameleon.com/static";
  3. // 设置api请求前缀
  4. const apiPrefix = "https://api.chameleon.com";
  5. // 合并配置
  6. cml.config.merge({
  7.   wx: {
  8.     build: { apiPrefix }
  9.   },
  10.   alipay: {
  11.     build: { apiPrefix }
  12.   },
  13.   baidu: {
  14.     build: { apiPrefix }
  15.   },
  16.   web: {
  17.     dev: {
  18.       hot: true,
  19.       console: true
  20.     },
  21.     build: {
  22.       publicPath: `${publicPath}/web`,
  23.       apiPrefix
  24.     }
  25.   },
  26.   weex: {
  27.     build: {
  28.       publicPath: `${publicPath}/weex`,
  29.       apiPrefix
  30.     }
  31.   }
  32. });

cml —— 全局配置

cml 项目 app 目录下的 app.cml 文件的 <script cml-type="json" /> 用来对 cml应用 进行全局配置，具有 跨端配置 和 差异化 的能力

配置示例：

  1. <script cml-type="json">
  2.   {
  3.     "base": {
  4.       "window": {
  5.         "navigationBarTitleText": "各个端共同title",
  6.       },
  7.       "permission": {
  8.         "scope.userLocation": {
  9.           "desc": "你的位置信息将用于小程序位置接口的效果展示"
  10.         }
  11.       }
  12.     },
  13.     "wx": {
  14.       "window": {
  15.         "backgroundTextStyle":"light",
  16.         "navigationBarBackgroundColor": "#fff",
  17.         "navigationBarTitleText": "差异化 title",
  18.         "navigationBarTextStyle":"black"
  19.       }
  20.     },
  21.     "baidu": {
  22.       "window": {
  23.         "backgroundTextStyle": "light"
  24.       }
  25.     },
  26.     "alipay": {
  27.         "window": {
  28.           "defaultTitle": "Chameleon"
  29.         }
  30.     }
  31.   }
  32. </script>

cml —— 页面/组件配置

通过 usingComponents 配置 组件路径 注册引用的组件。

配置示例：

  1. <script cml-type="json">
  2.   {
  3.     "base": {
  4.       "usingComponents": {
  5.         "navi": "/components/navi/navi",
  6.         "navi-npm": "cml-test-ui/navi/navi"
  7.       }
  8.     },
  9.     "wx": {
  10.     },
  11.     "alipay": {
  12.     },
  13.     "baidu": {
  14.     },
  15.     "web": {
  16.     },
  17.     "weex": {
  18.     }
  19.   }
  20. </script>

如何使用路由能力

小程序配置路由

app.json 配置项列表的 pages 字段用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径+文件名 信息。

数组的第一项代表小程序的初始页面（首页）。新增/减少页面，需要对 pages 数组进行修改。

如果项目有 pages/index/index.wxml、pages/logs/logs.wxml 两个页面，则需要在 app.json 中写

  1. {
  2.   "pages": ["pages/index/index", "pages/logs/logs"]
  3. }

cml 配置路由

src/router.config.json 是路由的配置文件，cml 内置了一套各端统一的路由管理方式。相应有 cml 路由配置映射如下：

  1. {
  2.   "mode": "history",
  3.   "domain": "https://www.chameleon.com",
  4.   "routes":[
  5.     {
  6.       "url": "/cml/h5/index",
  7.       "path": "/pages/index/index",
  8.       "mock": "index.php"
  9.     },
  10.     {
  11.       "url": "/cml/h5/logs",
  12.       "path": "pages/logs/logs",
  13.       "mock": "logs.php"
  14.     }
  15.   ]
  16. }

文件名不需要写文件后缀，cml框架会自动去寻找对于位置的 .cml 文件进行处理。

小程序使用路由

cml 使用路由

依据统一资源索引 URI，自适应打开不同环境同一路由 PATH：