微信Web开发者工具-下载、安装和使用图解

开发和测试小程序，需要借助微信官方提供的微信Web开发者工具进行预览和调试代码，从下载安装到使用，大致的流程如下：

1.下载安装包

下载地址传送门：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
根据所需的操作系统版本进行下载即可

 

 

2.安装微信Web开发者工具

下载后的安装包，wechat_devtools，接近80M大小

 

具体的安装过程略过，Next Step即可

3.申请小程序管理员账号，获取开发者AppID

申请账号：可参考 https://developers.weixin.qq.com/miniprogram/dev/
获取AppID：小程序管理平台-->开发者设置-->开发者ID
该AppID将在微信Web开发者工具打开小程序项目时进行身份验证用到

4.小程序管理员授权测试用的微信账号

项目团队中的不止一个人开发小程序时，如多个开发和测试成员，管理员可在小程序管理后台添加成员，并设置所需的权限
管理入口：小程序管理后台-->用户身份-->成员管理
具体可参考 https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/role.html#%E7%94%A8%E6%88%B7%E8%BA%AB%E4%BB%BD

 

5.通过已授权的微信扫描登录开发者工具

首次打开微信Web开发者工具，弹出二维码提示框，用以上授权过的微信进行扫描：

 

扫描之后，手机微信端需要确认登录：

 

6.新建并导入项目（项目路径+项目名称+AppID）

根据开发和测试的具体需要，点击【小程序项目】

 

点击管理项目右下角的“+”符号

 

导入小程序程序包的目录路径，填写AppID（若程序包中有相关设置，此ID也可在导入程序目录后自动填充）、项目名称，然后点击【确定】

 

7.预览和调试小程序

微信Web开发者工具预览小程序和调试代码

 

除了在微信Web开发者工具可以使用预览外，在其前已授权的手机微信端也可实现预览效果
具体操作：点击微信Web开发者工具右上角的【预览】，工具提示“正在编译JS文件”，稍等一会儿就可编译完成并展示出二维码，此时用已授权的微信扫描此二维码（每次编译的二维码有效期大概20多min），即可在手机端微信上预览小程序的实际效果