开发和测试小程序,需要借助微信官方提供的微信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),即可在手机端微信上预览小程序的实际效果
