• 应用 - App
    • 配置
      • window 转换对照
      • tabBar 转换对照
      • subpackages
      • 平台定制
      • 平台特有字段

    应用 - App

    主要生命周期的顺序为：created => mounted(onLaunch)。同时 onShow、onHide、onError、onPageNotFound 也会与小程序 App 对应的声明周期钩子绑定。

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

    1. <template></template>
    2. <script>
    3.   export default {
    4.     created() {
    5.       console.log('launch');
    6.     }
    7.   }
    8. </script>

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

    1. import App from './App'
    2. import Vue from 'vue'
    4. const app = new Vue( App )
    6. app.$mount()
    8. export default {
    9.   config: {
    10.     pages: [
    11.       'pages/index/index',
    12.     ],
    13.     window: {
    14.       backgroundTextStyle: 'light',
    15.       navigationBarBackgroundColor: '#fff',
    16.       navigationBarTitleText: 'WeChat',
    17.       navigationBarTextStyle: 'black'
    18.     }
    19.   }
    20. }

    配置

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

    window 转换对照

    描述 微信 支付宝 百度
    导航栏标题文字内容 navigationBarTitleText defaultTitle navigationBarTitleText
    导航栏背景颜色 navigationBarBackgroundColor titleBarColor navigationBarBackgroundColor
    导航栏标题颜色 navigationBarTextStyle ❌ navigationBarTextStyle
    导航栏样式 navigationStyle ❌ navigationStyle
    窗口的背景色 backgroundColor ❌ backgroundColor
    下拉 loading 的样式 backgroundTextStyle ❌ backgroundTextStyle
    顶部窗口的背景色 backgroundColorTop ❌
    底部窗口的背景色 backgroundColorBottom ❌
    是否开启当前页面的下拉刷新 enablePullDownRefresh pullRefresh enablePullDownRefresh
    页面上拉触底事件触发时距页面底部距离 onReachBottomDistance ❌ onReachBottomDistance
    屏幕旋转设置 pageOrientation ❌

    tabBar 转换对照

    描述 微信 支付宝 百度
    tab 上的文字默认颜色 color textColor color
    tab 上的文字选中时的颜色 selectedColor selectedColor selectedColor
    tab 的背景色 backgroundColor backgroundColor backgroundColor
    tabbar上边框的颜色 borderStyle ❌ borderStyle
    tab 的列表 list items list
    tabBar的位置 position ❌ position

    每个 list 的项转换对照。

    描述 微信 支付宝 百度
    页面路径 pagePath pagePath pagePath
    tab 上按钮文字 text name text
    图片路径 iconPath icon iconPath
    选中时的图片路径 selectedIconPath activeIcon selectedIconPath

    subpackages

    微信和百度小程序支持 subpackages（或 subPackages，建议写成全小写），但支付宝小程序暂不支持分包，所以在支付宝小程序中，subpackages 中的页面会被提取出来放到 pages 中。 如：

    1. export default {
    2.   config: {
    3.     pages: [
    4.       'pages/index/index',
    5.     ],
    6.     subPackages: [
    7.       {
    8.         root: 'packageA',
    9.         pages: ['pages/a/index']
    10.       }
    11.     ],
    12.   }
    13. }

    在支持分包的微信和百度小程序中会直接转换，但在支付宝小程序中会将分包中的页面放到 pages 中。（等支付宝小程序支持后会取消这一处理）

    1. {
    2.   "pages": [
    3.     "pages/index/index",
    4.     "packageA/pages/a/index"
    5.   ]
    6. }

    平台定制

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

    1. export default {
    2.   config: {
    3.     // 统一配置
    4.     window: {
    5.       navigationBarBackgroundColor: '#fff',
    6.       navigationBarTitleText: 'WeChat'
    7.     },
    9.     // 支付宝小程序配置
    10.     _alipay: {
    11.       window: {
    12.         navigationBarTitleText: 'Alipay'
    13.       }
    14.     },
    16.     // 百度小程序配置
    17.     _swan: {
    18.       window: {
    19.         navigationBarTitleText: 'Baidu'
    20.       }
    21.     }
    22.   }
    23. }

    在微信小程序中没特殊配置，最终生成的 json 为：

    1. {
    2.   "window": {
    3.     "navigationBarBackgroundColor": "#fff",
    4.     "navigationBarTitleText": "Wechat",
    5.   }
    6. }

    在支付宝小程序中 _alipay 下的配置项会 merge 到 config 中，最终生成的 json 为：

    1. {
    2.   "window": {
    3.     "titleBarColor": "#fff",
    4.     "defaultTitle": "Alipay"
    5.   }
    6. }

    在百度小程序中 _swan 下的配置项会 merge 到 config 中，最终生成的 json 为：

    1. {
    2.   "window": {
    3.     "navigationBarBackgroundColor": "#fff",
    4.     "navigationBarTitleText": "Baidu",
    5.   }
    6. }

    平台特有字段

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