微信小程序之 - 微信开发者工具用法

我们在开发或测试小程序都会用到微信开发者工具，工具的使用教程这里我会一一进行详细的讲解。

微信开发者工具下载地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

点击进入链接，我们看到的是微信开发者工具的下载界面：

这里我会推荐大家去安装稳定版Stable Build，因为微信开发版Nightly Build或预发布版RC Build会存在一些问题，当然了你们也可以下载，如果有问题可以直接到微信社区去反馈。

微信社区反馈地址：

https://developers.weixin.qq.com/community/develop/question 

选择电脑对应的型号或位数进行下载。下载安装成功以后打开会出现如下微信开发者扫码界面：

扫码登陆成功以后会出现如下界面：

· 新建项目

 - 项目名称：可以随意取名，当我们新建多个小程序项目的时候可以加以区分。

 - 目录：我们的项目目录需要选择一个空的文件夹。

 - AppID：如果没有AppID的用户可以去申请一个小程序账号，或者点击测试号（会有部分功能受限）。小程序账号申请地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

 - 开发模式：

     -- 小程序：新建以后生成默认的开发目录接口。

     -- 插件：新建以后生成了页面引入插件的代码。

    （两者的区别是目录结构不一致，插件模式基于默认的小程序模式扩展插件的用法）

     - 后端服务：

         -- 不使用云服务：

             意味着需要自己搭建服务器，自己提供数据库、存储等一系列后端的功能服务。可选择小程序遵循的语言规范，JavaScirpt或TypeScript。

          -- 小程序·云开发：

              无需搭建服务器，为开发者提供数据库、存储和云函数等完整的云端支持。使用微信平台提供的API进行核心业务开发，即可实现小程序快速上线和迭代。

          -- 腾讯云：

              可以选择运行环境  NodeJS环境或PHP环境。

· 导入项目

- 项目名称：

  可以随意取名，当我们新建多个小程序项目的时候可以加以区分。

- 目录：

  选择一个已经生成过小程序项目的目录。

- AppID：

  因为这是导入项目，说明之前已经开发过这个项目，在小程序项目开发过程中有获取对应AppId的方式。

微信开发者工具操作界面分析

 操作页面分为三大块

图中有详细画出每一块的位置

模拟器

查看当前小程序运行的界面，实时模拟小程序的相关操作，跟手机上打开小程序的界面一样。模拟器上方有几个设置按钮，官方有给我们对应不同型号的手机设置屏幕尺寸，我们也可以自定义设置显示屏幕的大小。

可以设置网络信号，目前支持4G/3G/2G/WiFi/offline离线。

编辑器

开发、编辑、修改小程序的代码，编辑器修改的代码可以实时在模拟器上看到修改后的效果。

调试器

调试区细分为10个小部分：

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，然后就是启动场景，我们要知道，小程序的访问方式有很多种情况，比如从公众号进入小程序、单人聊天会话进入小程序，扫描二维码进入小程序，长按图片识别二维码进入小程序等等这一系列的访问入口的场景值都是不一样的，也就是说我们可以通过这里模拟小程序进入的场景值。关于小程序场景值有哪些可查看：

https://developers.weixin.qq.com/miniprogram/dev/reference/scene-list.html

还有一种是可以通过二维码编译添加访问小程序的参数，可以选择本地的小程序二维码图片。

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

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

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

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

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

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

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

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

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

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

https://developers.weixin.qq.com/community/develop?idescene=2

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系统操作的快捷键用法：