基于uni-app
- network查看
- 扫码打开h5页面
- 查看页面基本信息
- 全局注入自定义组件
npm i uni-devtool --save-dev
注意区分环境,只在非正式环境注入
module.exports = {
chainWebpack: (config) => {
config.module
.rule('uni-devtool') // 链式操作用来分组的名字
.test(/\.(vue)|(js)|(json)$/)
.pre()
.exclude.add(/node_modules/)
.end()
.use('uni-devtool')
.loader('uni-devtool')
.options({
devtool: true, // 是否开启调试工具,可根据项目实际情况,控制在不同环境下是否开启
})
},
}
要在每个页面注入的自定义组件
{
components: [{
path: 'my-button/components/index.vue', // 组件路径,node_modules里的组件,或相对main.js的相对路径,如./components/my-button/index.vue
name: 'MyButton' // 组件名,驼峰形式
}]
}
是否注入调试工具,根据各小程序具体情况判断,只在非线上环境注入。
pages.json文件的绝对路径,以该文件里的配置判断是否为页面级vue,给其注入组件调用。默认为src/pages.json
pages.json不满足需求时,可以配置injectComponentRule,接收正则数组。
在入口(默认为src/main.js)文件中引入要注入的组件并注册为全局组件,并进行一些初始化(重写wx.request等),根据项目pages.json,在编译时对每个页面文件中的template中插入组件的调用。
// 插入
import MyButton from 'my/button/index.vue' // 组件名和路径对应上面配置的name和path,所以是相对main.js的路径
Vue.component('my-button', MyButton)
源文件
<template>
<div>
hello
</div>
</template>
<script>
// ...
</script>
编译时经loader处理后
<template>
<div><wy-mp-devtool></wy-mp-devtool>
hello
</div>
</template>
<script>
// ...
</script>