feat: update dosc

d87de871 · jayconscious · d43e96a7 · d87de871
隐藏空白更改
内联并排

Showing with 124 addition and 74 deletion

Doc/miniapp_cn_guide.md Doc/miniapp_cn_guide.md +124 -74

未找到文件。
--- a/Doc/miniapp_cn_guide.md
+++ b/Doc/miniapp_cn_guide.md
-<p align="center">
-    <img width="200" src="../miniapp/docs/assets/dokit.png">
-</p>
+# DoKit微信小程序研发助手SDK升级
+
+## Doraemon mini program debugger

-# Doraemon mini program debugger
 一个支持小程序端的调试工具
-## 开发背景
-对于小程序开发者和测试同学来说，很多临时性的调试功能需要单独开发去支持，比如查看小程序信息，手机信息
-以及用户信息，扫码打开页面等。这些功能对于每个小程序都是相似的，而且遇到类似的需求时都需要进行单独开发。

-我们内部通过对这些通用功能进行梳理沉淀，形成一个功能集合-哆啦A梦小程序端调试工具，以通用工具的形式开放对外，能够让每个小程序
-都可以快速的接入这些通用并且与业务代码无关的功能，如H5任意门，小程序基本信息，位置模拟等等。
+# 背景
+
+对于小程序开发者和测试同学来说，很多临时性的调试功能需要单独开发去支持，比如查看小程序信息，手机信息以及用户信息，扫码打开页面等。这些功能对于每个小程序都是相似的，而且遇到类似的需求时都需要进行单独开发。DoKit在移动端发展，获得了众多开发者的好评，其中不乏很多一线大厂(阿里，字节，腾讯，百度...)的身影，同时给我们带来了很多宝贵的经验。在广大开发者的要求下，我们重新启动了小程序端sdk的升级.
+
+此次版本升级主要提供了数据模拟功能，优化接入流程，降低用户接入成本，更好配合使用原生小程序以及第三方框架开发，提升开发同学的幸福感。
+
+# 简单总结
+
+DoKit小程序端调试工具，内置很多常用的工具，避免重复实现，一次接入，你将会拥有强大的工具集合。
+
+# 新增功能演示
+
+哆啦A梦小程序端apimock功能演示
+
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/4yXktFAckF1589275220286.png">
+</div>
+
+> 在我们的[平台端](https://www.dokit.cn/)注册，即可使用该功能，在sdk接入部分会有详细介绍。
+
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/YfLpeuu2MH1590650509070.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/HDibtAjCqq1590651365296.png">
+</div>

-## 简单总结
+点击工具中的数据模拟即可进入详情页，其中详情页分为mock数据和上传模板两块功能。

-Doraemon小程序端调试工具，内置很多常用的工具，避免重复实现，一次接入，你将会拥有强大的工具集合。
+> **mock数据:** 你可以通过打开指定接口的开关并选择相应的场景,此时你无需改变你的网络请求代码即可对你的指定接口进行拦截并返回你在平台创建的接口数据。

-## 效果演示
-哆啦A梦小程序端首页效果演示<br>
-<img width="200" src="../miniapp/docs/assets/preview.png">
+> **上传模板:** 上传模板功能的适用场景是当你已经有了一个真实的接口，需要针对不同的用户场景进行测试但是同时接口返回的数据量比较庞大，所以我们为你提供了上传模板的功能。当你打开上传模板中指定接口的开关时，我们会拦截并保存你真实接口返回的数据并提供json预览功能。点击上传即可上传你的模板数据到Dokit平台端。

-## 内置功能模块
+> **实现原理:** 使用Object.defineProperty()劫持小程序的wx.request(),然后重写次方法，添加上url匹配拦截逻辑和上传模板逻辑。在平台端更新接口时，会和小程序本地数据合并，即还原原先在本地操作的记录。

- app信息<br>
-<img width="200" src="../miniapp/docs/assets/appinfo.jpg"><br>
-用于快速查看手机系统信息，小程序基本信息，用户信息，授权信息等基础信息，避免反复打开手机设置或者调用小程序原生api进行查看。
+# 其他功能
+- app信息

- 位置模拟<br>
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/position.jpg">
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/map.png">
-<br>
-用于小程序端位置模拟，包括位置授权，位置查看，位置模拟，恢复位置设置等几大功能，可以通过简单的点击操作实现任意位置模拟和位置还原，
-该功能的实现原理是通过对wx.getLocation进行方法重写，进而进行位置模拟，位置模拟后，在小程序内所有调用位置查询的方法内都将返回你设定的位置，还原后将恢复原生方法。
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/Eu9DFjS6cf1590657590624.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/hHlPfUAPgu1590657697205.png">
+</div>

- 缓存管理<br>
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/storage.jpg">
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/storage-add.png">
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/storage-revise.png">
-<img width="200" style="display:inline-block" src="../miniapp/docs/assets/storage-revise-detail.png">
-<br>
-一个强大的缓存管理面板，集成了对缓存的所有操作功能，包括设置缓存，清除缓存，更新缓存值等，可以在小程序非常便利的进行缓存管理
+> 用于快速查看手机系统信息，小程序基本信息，用户信息，授权信息等基础信息，避免反复打开手机设置或者调用小程序原生api进行查看。

- H5任意门<br>
-<img width="200" src="../miniapp/docs/assets/h5door.jpg"><br>
-可以通过扫码和粘贴链接的方式在小程序中打开h5页面，操作简单方便
+- 位置模拟

- api mock<br>
-<img width="200" height="350" src="../miniapp/docs/assets/apimock-1.png">
-<img width="200" height="350" src="../miniapp/docs/assets/apimock-2.png">
-<img width="200" height="350" src="../miniapp/docs/assets/apimock-3.png">
-<img width="200" height="350" src="../miniapp/docs/assets/apimock-4.png"><br>
-可以在平台端(https://www.dokit.cn)创建接口列表,选中想要mock的接口和想要返回的场景类型，就可以mock数据了。在模板页面，选中的url，会将接口返回的response作为模板上传到平台端，可以依次作为模板为不同的场景制定不同的response，灵活易用
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/zFDfYgfTFJ1590659245437.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/jYGvr0fsyI1590659269350.png">
+</div>

+> 用于小程序端位置模拟，包括位置授权，位置查看，位置模拟，恢复位置设置等几大功能，可以通过简单的点击操作实现任意位置模拟和位置还原，该功能的实现原理是通过对wx.getLocation进行方法重写，进而进行位置模拟，位置模拟后，在小程序内所有调用位置查询的方法内都将返回你设定的位置，还原后将恢复原生方法

- 更新版本<br>
-当你的小程序进行代码更新时，为了获取最新的线上包需要重启小程序，该功能可以在你的小程序上
-通过点击更新操作，直接获取到最新的远程代码资源
+- 缓存管理
+
+
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/MUMXoRhSFl1590667273847.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/GflYwbHHXO1590667273704.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/MM53oF1Wtj1590667274519.png">
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/21JTvLDLp71590667274523.png">
+</div>
+
+> 一个强大的缓存管理面板，集成了对缓存的所有操作功能，包括设置缓存，清除缓存，更新缓存值等，可以在小程序非常便利的进行缓存管理
+
+- H5任意门
+<div align=center>
+  <img width="200" height="350" src="https://pt-starimg.didistatic.com/static/starimg/img/ZWGSKwm2ZJ1590667512289.png">
+</div>
+
+> 可以通过扫码和粘贴链接的方式在小程序中打开h5页面，操作简单方便
+
+- 更新版本
+
+> 当你的小程序进行代码更新时，为了获取最新的线上包需要重启小程序，该功能可以在你的小程序上通过点击更新操作，直接获取到最新的远程代码资源


 # 快速上手

-## 如何使用
+#### 如何接入

-1. 通过 `npm` 安装 `npm install --save-dev dokit-miniapp`
-2. 然后从node_modules中将`dist/`目录拷贝到自己的项目中，然后按如下方式进行使用
+如果您是使用原生小程序的开发方式，请安如下方式接入
+
+```
+1. 通过npm安装 npm install dokit-miniapp, 然后从node_modules中将dokit-miniapp文件夹拷贝到自己的项目中，然后按如下方式进行使用
+```

-### 在需要引用工具的页面 page.json 中引入组件
+```
+2. 在需要引用工具的页面 page.json 中引入组件(注意引用的路径)
+```

 ```json
 "usingComponents": {
-    "dokit": "../../dist/index/index"
+  "dokit": "../../components/dokit-miniapp/dist/index/index"
 }
 ```

-### 在 page.wxml 中使用组件
+```html
+3. 在需要引用工具的页面 page.wxml 中引入使用组件
+<dokit projectId="your projectId"></dokit>
+```
+
+如果您是使用小程序第三方框架的开发方式，可以做如下优化，
+
+```js
+在所需引入页面的js中，添加变量声明，例如
+const isProd = process.env.NODE_ENV === '"production"'
+```

 ```html
-<dokit/>
+在<template></template>或者是render函数中，可以使用
+
+isProd ? '' : <dokit projectId="your projectId"></dokit>
 ```

-### 在应用app.json中通过如下方式注册需要依赖的页面
- ```js
-"pages": [
-    "dist/apimock/apimock",
-    "dist/appInformation/appInformation",
-    "dist/debug/debug",
-    "dist/h5door/h5door",
-    "dist/logs/logs",
-    "dist/positionSimulation/positionSimulation",
-    "dist/storage/storage",
-    "dist/index/index"
-  ]
+```js
+如果框架暴露了webpack的相关打包配置，可以按照这样的配置，优化资源打包
+compile: {
+      exclude: [
+        path.resolve(__dirname, '..', 'src/components/dokit-miniapp')
+      ]
+    }
 ```
-由于微信小程序暂不支持开发环境和生产环境判断，请在生产环境手动删掉引用

-## 后续规划
-### 性能工具（含以下功能）
-    1. 小程序加载时间
-    2. 首页渲染时间
-    3. 进程内存展示
-### 视觉工具
-    1. 控件检查
-    2. 接口请求性能分析
-    3. 缓存文件管理器
-    4. 授权开启管理工具
+> Tip: 1.由于微信小程序暂不支持开发环境和生产环境判断，请在生产环境手动删掉引用
+
+> Tip: 2.第三方框架开始，要注意框架是否将process.env.NODE_ENV注入到的全局变量中，此外有的框架的兼容性并不友好，有些打包配置并没有支持，开发者要视情况而定

-## 贡献
+
+# 后续规划
+1. 取色器
+2. 接口请求性能分析
+3. 授权开启管理工具
+
+
+# 贡献

 有任何意见或建议都欢迎提 issue
+
+# github地址
+
+https://github.com/didi/DoraemonKit/tree/master/miniapp 欢迎star
+
+# 欢迎加入DoKit交流QQ群
+
+<div align=center>
+  <img width="190" height="260" src="https://pt-starimg.didistatic.com/static/starimg/img/MDnNgukM511590736490933.jpg">
+</div>
+
+# 欢迎关注我们的公众号
+
+<div align=center>
+  <img width="190" height="200" src="https://pt-starimg.didistatic.com/static/starimg/img/pYXiYtMEOl1591177821127.jpeg">
+</div>
\ No newline at end of file