学习开发微信小程序最最最最重要的就是学习微信小程序官方文档,因为文档可以解决我们在学习过程中遇到的大部分麻烦,所以先附上官方文档链接:

https://developers.weixin.qq.com/doc/



目录

  • 模拟器、编辑器、调试器、可视化和云开发
  • 一、模拟器
  • 二、编辑器
  • 三、调试器
  • 四、可视化
  • 五、云开发



模拟器、编辑器、调试器、可视化和云开发

打开已经安装好的微信开发者工具,没有安装的可以参考:


页面如图所示:

微信开发者工具怎么模拟用户授权 微信开发者工具模板_调试器

一、模拟器

打开软件便可以通过左上角的这个按钮来打开和关闭【模拟器】

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_02


打开【模拟器】之后便可以在左侧看到一个类似手机屏幕的窗口

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_03


可以改变【模拟器】的型号来观察小程序的设计界面的兼容性

模拟器


也可以通过改变【模拟器】的外部条件,例如Wifi状态来更真实模拟小程序在不同手机上可能遇到的状况


模拟器


二、编辑器

打开软件便可以通过左上角的这个按钮来打开和关闭【编辑器】

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_04


【编辑器】的大致界面如图所示:

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信小程序_05


界面左边是【资源管理器】,可以看到小程序目录解构

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_06


界面右边就是【编辑器】,可以在这里编译代码

微信开发者工具怎么模拟用户授权 微信开发者工具模板_调试器_07

三、调试器

打开软件便可以通过左上角的这个按钮来打开和关闭【调试器】

小程序的开发过程中,【调试器】至关重要,不仅可以为我们锁定项目中出现的bug问题,还能更加有效地帮我们进行问题分析和数据排查

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_08


调试器界面如图所示:

微信开发者工具怎么模拟用户授权 微信开发者工具模板_开发者_09

四、可视化

打开软件便可以通过左上角的这个按钮来打开和关闭【可视化】

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信小程序_10


【可视化】界面如图所示:

微信开发者工具怎么模拟用户授权 微信开发者工具模板_开发者_11


【可视化】可以更加便捷地帮助开发者观察各个组件的产生效果以及调试它们

可视化


五、云开发

云开发在打开后会出现这样一个界面

微信开发者工具怎么模拟用户授权 微信开发者工具模板_微信开发者工具怎么模拟用户授权_12


具体分析可以参考:https://zhuanlan.zhihu.com/p/346062804