作者:普惠产品技术
Doraemon mini program debugger
一个支持小程序端的调试工具
开发背景
对于小程序开发者和测试同学来说,很多临时性的调试功能需要单独开发去支持,比如查看小程序信息,手机信息
以及用户信息,扫码打开页面等。这些功能对于每个小程序都是相似的,而且遇到类似的需求时都需要进行单独开发。
我们内部通过对这些通用功能进行梳理沉淀,形成一个功能集合-哆啦A梦小程序端调试工具,以通用工具的形式开放对外,能够让每个小程序
都可以快速的接入这些通用并且与业务代码无关的功能,如H5任意门,小程序基本信息,位置模拟等等。
简单总结
DoKit小程序端调试工具,内置很多常用的工具,避免重复实现,一次接入,你将会拥有强大的工具集合。
效果演示
哆啦A梦小程序端首页效果演示
内置功能模块
app信息
用于快速查看手机系统信息,小程序基本信息,用户信息,授权信息等基础信息,避免反复打开手机设置或者调用小程序原生api进行查看。位置模拟
用于小程序端位置模拟,包括位置授权,位置查看,位置模拟,恢复位置设置等几大功能,可以通过简单的点击操作实现任意位置模拟和位置还原,
该功能的实现原理是通过对wx.getLocation进行方法重写,进而进行位置模拟,位置模拟后,在小程序内所有调用位置查询的方法内都将返回你设定的位置,还原后将恢复原生方法。缓存管理
一个强大的缓存管理面板,集成了对缓存的所有操作功能,包括设置缓存,清除缓存,更新缓存值等,可以在小程序非常便利的进行缓存管理H5任意门
可以通过扫码和粘贴链接的方式在小程序中打开h5页面,操作简单方便更新版本
当你的小程序进行代码更新时,为了获取最新的线上包需要重启小程序,该功能可以在你的小程序上
通过点击更新操作,直接获取到最新的远程代码资源
快速上手
使用之前
在开始使用之前,你需要先阅读 微信小程序自定义组件 的相关文档。
如何使用
- 通过
npm
安装npm install -s -d dokit-miniapp
- 然后从node_modules中将
dist/
目录拷贝到自己的项目中,然后按如下方式进行使用
在需要引用工具的页面 page.json 中引入组件
"usingComponents": {
"dokit": "../../dist/index/index"
}
在 page.wxml 中使用组件
<dokit/>
在应用app.json中通过如下方式注册需要依赖的页面
"pages": [
"dist/appInformation/appInformation",
"dist/debug/debug",
"dist/h5door/h5door",
"dist/logs/logs",
"dist/positionSimulation/positionSimulation",
"dist/storage/storage",
"dist/index/index"
]
由于微信小程序暂不支持开发环境和生产环境判断,请在生产环境手动删掉引用
后续规划
性能工具(含以下功能)
1. 小程序加载时间
2. 首页渲染时间
3. 进程内存展示
视觉工具
1. 控件检查
2. 接口请求性能分析
3. 缓存文件管理器
4. 授权开启管理工具
贡献
有任何意见或建议都欢迎提 issue
github地址
https://github.com/didi/DoraemonKit/tree/master/miniapp