Skip to content
On this page

开发调试

任何程序开发都离不开调试,小程序开发者工具自带了调试工具,下面我们就来学习小程序开发者工具的调试功能。

3.1 调试器

调试器

上图中的 【Wxml】 是用来显示小程序页面的结构和样式,【Console】 控制台,【Network】 查看网络请求,【AppData】 查看组件本地数据,【终端】创建命令行窗口等。

3.2 预览和真机调试

在大部情况下我们编写的代码会在开发者工具的模拟器中查看到效果,我们还可以在真机中进行预览或调试小程序,这个功能是由小程序开发者工具提供的,如下图所示:

预览和真机调试

如上图所示点击预览或者真机调试等待片刻会出现一个二维码,管理员或指定的开发成员才可以扫码在真机上查看小程序,如果点击的是真机调试时还会自动打开一个调试面板对真机上的小程序进行调试。

注意:

在教室由于网络的原因,预览和真机调试功能的功能可能无法演示,回家后自行测试一下!

这里有个问题,指定的开发成员是什么意思呢?

开发成员就是一个团队共同开发同一个小程序的情形,在小程序管理后台可以添加开发成员,添加了开发成员后大家就可以使用同一个 AppID 开发同一个小程序了。

我们来学习一下如何添加开发成员,登录小程序管理后台,找到【成员管理】,如下图:

添加开发者成员

如上图中的步骤,根据【微信号】添加成员即可,大家可以互相添加成员测试一下该功能的应用。

3.3 编译模式

编译模式是允许开发者指定某个页面来单独开发调试,首先要掌握编译模式的添加步骤:

编译模式

编译模式

当添加了编译模式后再对编译模式进行切换就可以单独针对某个页面进行开发调试了。

提示:

这个功能我们暂时还用不到,大家先有个了解,后续项目的开发过程会用到,到时再详细介绍。

3.4 刷新和热重载

早期小程序开发者工具是没有刷新的功能,只有编译功能,即每次修改代码后都会将页面重新编译,这种情况下开发效率比较低,现在的小程序开发工具中支持了刷新和热重载的功能。

刷新和热重载

编译会对小程序重新打包,因此执行时间较长效率比较大,通常如果在开发中代码编写错误后需要重新编译一次,错误才会消息。

刷新是在不重新编译的情况对当前整个页面进行刷新,而执重载是页面的局部刷新即热更新的功能。

注意:

注:.json 类型文件和 app.js 不支持热重载的功能,代码修改后会重新编译整个小程序。

Released under the MIT License.