实现在 vue 文件中书写小程序的页面配置，不再需要单独的 main.json 文件
npm i mpvue-config-loader -D// webpack.base.conf.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
loader: 'mpvue-loader',
options: vueLoaderConfig
},
{
test: /\.vue$/,
loader: 'mpvue-config-loader',
exclude: [resolve('src/components')],
options: {
entry: './main.js'
}
},
...
]
}
...
}<script>
// src/app.vue
export default {
config: {
window: {
navigationBarTitleText: '小程序标题'
}
},
globalConfig: {
usingComponents: [
...
]
}
}
</script><script>
// src/xx/xxx.vue
export default {
config: {
navigationBarTitleText: '页面标题'
}
}
</script>| property | type | required | describe |
|---|---|---|---|
| entry | string | false | 入口文件相对路径 |
| transform | function | false | 自定义文件名转换函数 |
-
config属性会转换为一个 json 文件，故其中不可使用变量，如需动态修改配置请使用小程序官方的 API -
app.vue 文件的
globalConfig属性会与页面配置进行合并，可实现全局引用原生组件 -
页面若无
config属性，请指定mpType: 'page'以生成全局配置 -
微信小程序官方已支持全局组件，无多平台兼容需求可直接使用
开发者工具 1.02.1810190 或以上版本支持在 app.json 中声明 usingComponents 字段，在此处声明的自定义组件视为全局自定义组件，在小程序内的页面或自定义组件中可以直接使用而无需再声明。