页面 - Page

在小程序创建 Page 实例时（onLoad 阶段），同时会创建一个于这个实例绑定的 Vue 实例作为一个页面的根实例，并将各生命周期进行绑定。

主要生命周期的顺序为：created(onLoad) => mounted(onReady) => beforeDestroyed(onUnload)。同时 onShow、onHide、onShareAppMessage、onReachBottom、onPullDownRefresh 也会与小程序 Page 对应的声明周期钩子绑定。

在每一个 Vue 实例中，都可以通过 this.$mp 对象访问小程序相关的数据，例如可以通过 this.$mp.options 访问 onLoad 时传入的参数，例如 query 字段。

App 逻辑，app.vue。应用的生命周期钩子写在这里，运行时通过小程序的 Page 方法注册成小程序页面。

  1. <template>
  2.   <div>
  3.     <h1>{{ title }}</h1>
  4.   </div>
  5. </template>
  6. <script>
  7.   export default {
  8.     data() {
  9.       return {
  10.         title: 'Megalo'
  11.       };
  12.     },
  13.     create() {
  14.       // 获取 onLoad 中的 options
  15.       console.log(this.$mp.options);
  16.     }
  17.   }
  18. </script>

Page 入口文件，index.js，页面配置写在 config 字段中并 export 出来，最终会生成 app.json 文件。

  1. import Index from './index.vue'
  2. import Vue from 'vue'
  4. const app = new Vue( Index )
  6. app.$mount()
  8. export default {
  9.   config: {
  10.     navigationBarTitleText: 'Megalo'
  11.   }
  12. }

$mp

页面的根 VM 上在页面初始化时保存小程序的相关信息，VM 树上所有的 VM 都可以通过 this.$mp 获取。

  1. {
  2.   platform: 'wechat',   // 平台
  3.   page: Page,           // 小程序页面实例
  4.   query: { id: 100 },   // onLoad 传入的页面参数对象
  5.   options: { id: 100 }, // 与 query 是同一个对象（别名）
  6. }

配置

由于每个平台的配置项存在差异，在配置时以微信小程序的为准，构建时会自动将属性字段转换成平台对应的字段。

描述 微信 支付宝 百度
导航栏背景颜色 navigationBarBackgroundColor titleBarColor navigationBarBackgroundColor
导航栏标题颜色 navigationBarTextStyle ❌ navigationBarTextStyle
导航栏标题文字内容 navigationBarTitleText defaultTitle navigationBarTitleText
窗口的背景色 backgroundColor ❌ backgroundColor
下拉 loading 的样式 backgroundTextStyle ❌ backgroundTextStyle
是否全局开启下拉刷新 enablePullDownRefresh pullRefresh enablePullDownRefresh
页面上拉触底事件触发时距页面底部距离 onReachBottomDistance ❌ onReachBottomDistance
设置为 true 则页面整体不能上下滚动 disableScroll ❌ ❌

平台定制

如果需要针对不同的平台设置不同字段，可以根据平台在 config._wechat，config._alipay，config._swan 字段定制，结构与 config 下一致，在生成 json 时会将其覆盖到 config 上。例如：

  1. export default {
  2.   config: {
  3.     navigationBarTitleText: 'Index',
  5.     // 微信小程序配置
  6.     _wechat: {
  7.       navigationBarBackgroundColor: '#44B549',
  8.       navigationBarTextStyle: 'white'
  9.     },
  11.     // 支付宝小程序配置
  12.     _alipay: {
  13.       navigationBarBackgroundColor: '#4D7AF4',
  14.     },
  16.     // 百度小程序配置
  17.     _swan: {
  18.       navigationBarBackgroundColor: '#38f',
  19.       navigationBarTextStyle: 'white'
  20.     }
  21.   }
  22. }

微信小程序生成 json 为：

  1. {
  2.   "navigationBarTitleText": "Index",
  3.   "navigationBarBackgroundColor": "#44B549",
  4.   "navigationBarTextStyle": "white"
  5. }

支付宝小程序生成 json 为：

  1. {
  2.   "defaultTitle": "Index",
  3.   "titleBarColor": "#4D7AF4"
  4. }

百度小程序生成 json 为：

  1. {
  2.   "navigationBarTitleText": "Index",
  3.   "navigationBarBackgroundColor": "#38f"
  4. }

平台特有字段

某些配置，如微信下的 pageOrientation, 只在某个平台下支持，建议写到平台定制字段下。写到 config 下的话，json 生成时不会去除这些字段，但它们其他平台中不会生效。