签到四（开发）

Posted 2021-03-14 pslqyz

今天对微信开发者工具进行了简单学习，由于昨天的外出，耽误了开发的进度，也让找不着北的，刚找到一点调

1. Console  查看小程序执行的报错、打印的信息、警告等，也可以输入一些变量进行调试。

2. Sources 左侧查看当前项目运行的所有脚本，右侧是执行断点调试。

3. Network 区域显示的是与网络相关的信息，可以查看网络请求响应的数据。

4. Security 查看页面整体的安全性。

5. AppData 查看访问过小程序页面的变量，变量值可以动态的修改。

6.  Audits 体验评分，在小程序运行过程中实时检查，分析出一些可能导致体验不好的地方，并且定位出哪里有问题，以及给出一些优化建议。

7. Sensor 开发者可以在这里模拟经纬度，也可以在这里模拟移动设备表现，用于调试重力感应 API。

8. Storage 官方说明是用于显示当前项目使用 wx.setStorage 或者 wx.setStorageSync 后的数据存储情况。

9. Trace 用于链接手机调试。

10. Wxml 相当于前端网页浏览器的Elements，本质上跟html+CSS相同，只是后缀名不一样，可以调试修改标签的样式。

然后我们看上面的工具栏

默认是普通编译，按照正常的编译模式执行。

添加编译模式：点击添加编译模式窗口如下

模式名称自己定义，最好就是见名知意。

然后就是启动页面的路径设置，每次刷新小程序都会进入到启动页面的路径，然后我们可以模拟一些启动参数，如：name=venfor&color=black，然后就是启动场景，我们要知道，小程序的访问方式有很多种情况，比如从公众号进入小程序、单人聊天会话进入小程序，扫描二维码进入小程序，长按图片识别二维码进入小程序等等这一系列的访问入口的场景值都是不一样的，也就是说我们可以通过这里模拟小程序进入的场景值。

现在我们来看一下顶部中间这5个工具栏的用法

1. 编译  重新编译当前小程序的代码。

2. 预览  生成当前小程序的临时二维码，二维码在25分钟后会失效，这里有一点需要注意的，开发者工具上面生成的二维码都需要有开发者权限的微信才能扫码进入。

3. 真机调试  生成预览的二维码，扫码以后手机会打开当前小程序，电脑将会自动弹出一个调试区，调试区用于手机的真机调试，这样方便看到手机上程序执行了什么。

4. 切后台/切前台  模拟小程序退出了后台，这里说的退出后台在手机上代表的是将进程切换到了后台，切后台以后会弹出一个切前台的入口，这里也就是模拟小程序进入的场景值。

5. 清缓存  这里可以清除数据缓存、清除文件缓存、清除授权缓存、清除网络缓存、清除登陆状态。

然后我们看开发者工具顶部右上角的4个工具按钮的用法

1. 上传  此处点击上传会将小程序上传到对应appid的小程序账号上，在微信公众平台-小程序后台可以管理从微信开发者工具上传的代码。

2. 版本管理  此处需要关联git账户，实现代码的版本管理，相当于我们平时用git管理码云、github上面的代码。

3. 社区  点击社区进入到微信社区平台，我们在社区平台可以反馈微信的一系列（小程序、小游戏、微信支付）相关问题

4. 详情  详情可以看到我们的账号信息和一些小配置，我们来看这张图 

从这里可以看到我们小程序的AppID，项目路径和本地代码包大小，目前微信限制小程序代码8M，一个包分为2M，也就是说最多4个包每个包最多2M，代码包超过指定大小以后将无法预览、上传。

调试基础库

还可以设置我们调试的基础库版本，微信推出新的API需要对应的基础版本库支持，我们默认是最新的基础库版本。

ES6转ES5

将ES6语法转成ES5语法，避免ES6语法在其他设备上不支持。

start 微信官方的解释是这样的 ↓

在项目设置页卡，我们提供了以下几个默认的预处理，可以解决大部分的代码文件预处理的问题

1. ES6 转 ES5（可以应用于编译、预览、上传），使用 "babel-core": "^6.26.0"

2. 上传代码时样式自动补全，使用 "postcss": "^6.0.1"

3. 上传代码时自动压缩，使用 "uglify-js": "3.0.27"

 

对于高级开发者来说，完全可以自己编写自动化构建脚本对代码文件进行预处理，所以我们提供了 启用自定义处理命令 选项 开发者可以指定 编译前/预览前/上传前 需要预处理的命令 开发者工具使用 shell 的方式运行指定的命令，并在控制台中输出命令的执行日志

预处理命令的执行顺序

1. 自定义预处理命令

2. 默认预处理命令

3. 编译/预览/上传

注：

1. 编译前预处理命令，需要手动点击 "编译" 按钮，或者使用快捷键编译才能触发。文件修改无法触发该命令。

2. Mac 版本的开发者工具无法复用 bash 中的 Path 环境变量。可能需要手动设置系统的 Path 环境变量，才能正常执行命令

end 以上是微信官方的说法 ↑

不检验合法域名

就好比我们需要下载某个域名下的图片，就需要把某个域名配置到微信合法域名配置下，以及检验https证书是否可以使用，如果没有以上配置则会报错提示xxx域名不在合法域名下，证书过期等提示，勾选以后就可以忽略这些校验，这个设置只在开发模式上有效。

下面说几个微信开发者工具在windows系统操作的快捷键用法：

 

操作	命令
打开快捷键面板	F1
打开/关闭工具栏	Ctrl+Shift+T
打开/关闭模拟器	Ctrl+Shift+D
打开/关闭调试器	Ctrl+Shift+M
格式化文件	Shift+Alt+F
编译	Ctrl+B
刷新	Ctrl+R
删除行	Ctrl+Shift+K
向上复制行	Shift+Alt+↑
向上移动行	Alt+↑
向下复制行	Shift+Alt+↓
向下移动行	Alt+↓
更改所有匹配项	Ctrl+F2
替换	Ctrl+H
查找	Ctrl+F
查找所有引用	Shift+F12
跳转到某行代码	Ctrl+G
跳转到某个方法	Ctrl+Shift+O
切换块注释	Shift+Alt+A
切换行注释	Ctrl+/
打开/关闭编辑器	Ctrl+Shift+E
打开/关闭目录树	Ctrl+Shift+I
预览	Ctrl+Shift+P
上传	Ctrl+Shift+U
跳转文件	Ctrl+P
最近文件	Ctrl+E
Show Accessibility Help	Alt+F1
以递归方式展开	Ctrl+K Ctrl+]
以递归方式折叠	Ctrl+K Ctrl+[
全部展开	Ctrl+K Ctrl+J
全部折叠	Ctrl+K Ctrl+O
切换Tab键是否移动焦点	Ctrl+M
删除行注释	Ctrl+K Ctrl+U
在上面插入行	Ctrl+Shift+?
在上面添加光标	Ctrl+Alt+↑
在下面插入行	Ctrl+?
在下面添加光标	Ctrl+Alt+↓
在行尾添加光标	Shift+Alt+I
将上次选择移动到下一个查找匹配项	Ctrl+K Ctrl+D
将选择添加到下一个查找匹配项	Ctrl+D
展开	Ctrl+Shift+]
打开侧边的定义	Ctrl+K Ctrl+F12
打开选择	Shift+Alt+→
折叠	Ctrl+Shift+[
折叠级别1	Ctrl+K Ctrl+1
折叠级别2	Ctrl+K Ctrl+2
折叠级别3	Ctrl+K Ctrl+3
折叠级别4	Ctrl+K Ctrl+4
折叠级别5	Ctrl+K Ctrl+5
折叠级别6	Ctrl+K Ctrl+6
折叠级别7	Ctrl+K Ctrl+7
折叠级别8	Ctrl+K Ctrl+8
折叠级别9	Ctrl+K Ctrl+9
显示悬停	Ctrl+K Ctrl+I
显示编辑器上下文菜单	Shift+F10
替换为上一个值	Ctrl+Shift+,
替换为下一个值	Ctrl+Shift+.
查找上一个	Shift+F3
查找上一个选择	Ctrl+Shift+F3
查找下一个	F3
查找下一个选择	Ctrl+F3
查看定义	Alt+F12
添加行注释	Ctrl+K Ctrl+C
缩小选择	Shift+Alt+←
行减少缩进	Ctrl+[
行缩进	Ctrl+]
裁剪尾随空格	Ctrl+K Ctrl+X
触发参数提示	Ctrl+Shift+Space
触发建议	Ctrl+Space
转到上一个错误或警告	Shift+F8
转到喜爱个错误或警告	F8
转到定义	Ctrl+F12
转到括号	Ctrl+Shift+
选择所有找到的查找匹配项	Ctrl+Shift+L