微信开发者工具（一）

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

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)]

模拟器：
- 可以调整对应的机型
- 可以调整展示页面的大小
- 模拟网络状态：WIFI、2G、3G、4G和Offline(断网)
- 模拟操作

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

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

调试工具：
- **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

微信开发者工具的使用（一）相关推荐

使用微信开发者工具创建小程序项目
个人资源与分享网站:http://xiaocaoshare.com/ 1.微信开发者工具自行到网上下载即可 2.打开微信开发者工具,如图所示: 点击创建后,如下图所示: #### 项目结构 ``` └ ...
uni-app启动微信开发者工具
运行uni-app在微信开发者工具下注意的问题: (1)在点击工具栏里的文件 -> 新建 -> 项目: (2)选择uni-app,输入工程名,如:hello-uniapp,点击创建,即可成 ...
微信开发者工具出现 Error:unable to verify the first cert？
微信开发者工具出现 Error:unable to verify the first cert? 不知道什么原因突然遇到这个问题,网上搜索了好多方案都无效,官方也没有指定有效的方案或者问题原因.奇了 ...
微信开发者工具一打开代码编辑区文件全部不见了
今天开微信开发者工具时,一打开竟然文件全部不见了!然后页面也编译不出来,搜了一下大神们的建议: 1.在编辑器控制台输入:openVendor 回车会打开一个文件夹:C:\Use ...
Linux安装微信开发者工具(deepin linux ubt)
一.环境:: deepin linux15.4.1 二.安装过程: 2.1 安装wine sudo apt-get install wine 2.2 安装nwjs-sdk 2.2.1 下载linux版 ...
Linux微信运行错误,Ubuntu 16.04 运行微信开发者工具编译出错的解决办法
最近有折腾小程序的意向,但微信的开发者工具只提供了 Windows 和 Mac 两个版本,对于我这样的 Linux 用户来说不是那么地友好. 经过观察发现,那个开发者工具实际上是基于nw.js开发的, ...
微信开发者工具 wxmi修改模版颜色_网站建设公司讲解：微信小程序的开发者工具界面...
网站建设公司深圳市博纳网络信息技术有限公司()讲解:微信小程序的开发者工具界面创建项目后,进入到微信开发者工具界面,界面大致可以分为6个区域:①菜单栏区域,②模拟器.编辑器.调试器显示与隐藏区域,③ ...
运行项目到微信开发者工具和浏览器
文章目录一.运行项目到微信开发者工具 1. 下载安装 2. HBuilder X配置 3. 设置[微信开发工具路径] 4. 运行 5. 运行到浏览器一.运行项目到微信开发者工具 1. 下载安装 ...
微信开发者工具：Failed to load font ************** net::ERR_CONNECTION_RESET问题解决办法
如果微信开发者工具前几天用的好好的突然出现 VM541:1 Failed to load font https://img.yzcdn.cn/vant/vant-icon-d3825a.ttf net ...
微信开发者工具中导入错误提示请选择含app.json/project.config.json的目录（纪录篇）
是因为每一次 npm run dev:mp-weixin 时都在编译dist/dev下的文件所以在选择目录之前,要先找到自己创建的项目中的app.json文件,然后选择app.json文件的上级目录 ...

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