Skip to content

hx24/uni-devtool

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

小程序调试工具

基于uni-app

图片

功能预览动图

支持功能

  • network查看
  • 扫码打开h5页面
  • 查看页面基本信息
  • 全局注入自定义组件

更新日志

使用方式

1.安装依赖

npm i uni-devtool --save-dev

2.修改vue.config.js

注意区分环境,只在非正式环境注入

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

要在每个页面注入的自定义组件

{
  components: [{
      path: 'my-button/components/index.vue', // 组件路径,node_modules里的组件,或相对main.js的相对路径,如./components/my-button/index.vue
      name: 'MyButton' // 组件名,驼峰形式
    }]
}

devtool

是否注入调试工具,根据各小程序具体情况判断,只在非线上环境注入。

pagesJsonPath

pages.json文件的绝对路径,以该文件里的配置判断是否为页面级vue,给其注入组件调用。默认为src/pages.json

injectComponentRule

pages.json不满足需求时,可以配置injectComponentRule,接收正则数组。

工作原理

在入口(默认为src/main.js)文件中引入要注入的组件并注册为全局组件,并进行一些初始化(重写wx.request等),根据项目pages.json,在编译时对每个页面文件中的template中插入组件的调用。

main.js

// 插入
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>

About

基于uni-app的小程序调试工具

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published