• 页面 - Page
    • $mp
    • 配置
      • 平台定制
      • 平台特有字段

    页面 - Page

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

    主要生命周期的顺序为:created(onLoad) => mounted(onReady) => beforeDestroyed(onUnload)。同时 onShowonHideonShareAppMessageonReachBottomonPullDownRefresh 也会与小程序 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'
    3. const app = new Vue( Index )
    4. app.$mount()
    5. export default {
    6. config: {
    7. navigationBarTitleText: 'Megalo'
    8. }
    9. }

    $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._wechatconfig._alipayconfig._swan 字段定制,结构与 config 下一致,在生成 json 时会将其覆盖到 config 上。例如:

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

    微信小程序生成 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 生成时不会去除这些字段,但它们其他平台中不会生效。