微信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),即可在手机端微信上预览小程序的实际效果

posted @ 2019-02-26 13:16  圆圆测试日记  阅读(16986)  评论(0编辑  收藏  举报