微信开发者工具的使用（一）

微信开发者工具（一）

一、微信开发者工具基本信息

1.1 微信开发者工具的下载

​ 直接打开下面网址进行下载：

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

1.2 下载以后登录

1.3 新建项目

• 新建一个项目，appid可以使用测试号或者是注册一个appid

• 生成一个实际的Appid详见：https://www.toutiao.com/i6582466446373159438/

  

1.4 微信开发者工具详情页

[外链图片转存失败(img-gmV5PArB-1567256776341)(https://i.loli.net/2019/08/30/yvtRNblSdWjp4K5.png)]

1. 模拟器：

   • 可以调整对应的机型

   • 可以调整展示页面的大小

   • 模拟网络状态：WIFI、2G、3G、4G和Offline(断网)

   • 模拟操作

     

该操作的模拟前后端，前后端的切换操作，

例如当用户从小程序中回到聊天窗口，会触发一个小程序被设置为后台的回调。

2. 调试工具：

   • **Wxml：**帮助开发者开发，wxml转发后的界面。可以看到真实的页面结构，和结构对应的wxss属性，同时可以通过更改wxss属性，实时的看到修改的情况

   • Sources panel: 用于显示当前的脚本文件，在Sources panel的脚本是已经编译好的脚本，已经处理之后的脚本文件。在Sources panel运行的时候，运行到断点，会导致整个小程序停止运行。

   • AppData panel: 用于展示目前运行小程序时的具体数据

   • Storage panel: 可以直接对数据进行删除、新增和修改
     用于显示当前项目使用的wx.setStorage或者wx.setStorageSync后的数据储存情况

   • Network Panel： 用于观察和显示 request 和 socket 的请求情况

   • **Console panel：**两大功能：

     1. 开发者可以在此输入和调试代码
     2. 可以再次查看小程序的报错

     在控制台可以输入命令

     build：编辑小程序

     Preview: 预览

     upload:上传代码

     openVendor:打卡基础库所在目录

     openToolsLog：打开工具日志目录

     checkproxy(url):检查指定url的代理使用情况

   • Sensor panel：
     两个功能：

     1. 开发者可以在这里选择模拟地理位置
     2. 开发者可以在这里模拟移动设备表现，用于调试重力感应API