微信小程序开发图解案例教程（附精讲视频）（第2版）最新章节_刘刚著

1.3 微信小程序开发工具的使用

微信小程序开发工具的使用

1.3.1 创建项目

在开发工具里单击“小程序项目”，进入到“小程序项目”界面，可以添加一个新的项目。在这个界面里需要填写项目目录、AppID和项目名称，如图1.6所示。

图1.6 添加项目

获取微信小程序AppID，需要在“微信公众平台”中登录1.2.2节中注册的账户，在“设置”→“开发设置”中，查看微信小程序的AppID，如图1.7所示。

注意

不可直接使用服务号或订阅号的 AppID 。也可以不填写AppID，但功能会受限。

图1.7 获取AppID

注意

如果要以非管理员微信号在手机上体验该小程序，还需要“绑定开发者”，即在“用户身份”→“开发者”模块，绑定需要体验该小程序的微信号。

输入AppID后，在桌面上建立一个“demo”文件夹，并将其选择为项目目录，在项目名称中输入“demo”，勾选“建立普通快速启动模板”选项（还可以选择“建立插件快速启动模板”创建插件项目），单击“确定”按钮即可，如图1.8所示。

图1.8 创建demo项目

1.3.2 开发者工具界面

创建项目后，进入到微信开发者工具界面，界面大致可以分为6个区域：①菜单栏区域，②模拟器、编辑器、调试器显示与隐藏区域，③模拟器区域，④编辑器区域，⑤调试器区域，⑥工具栏区域，如图1.9所示。

图1.9 开发者工具界面

① 菜单栏区域：包含项目、文件、编辑、工具、界面、设置、微信开发者工具菜单。

② 模拟器、编辑器、调试器显示与隐藏区域：是用来控制模拟器区域、编辑器区域、调试器区域的显示与隐藏的便捷操作按钮。

③ 模拟器区域：用来显示小程序项目的界面。

④ 编辑器区域：用来进行代码编写的区域。

⑤ 调试器区域：用来进行调试的区域。

⑥ 工具栏区域：包含编译、预览、远程调试、切后台、清缓存、上传、测试、腾讯云、详情工具栏按钮。

1.3.3 模拟器区域

模拟器区域用来显示小程序界面。在小程序开发过程中，小程序界面随着代码编写可以实时变化，方便小程序的开发和调试。同时模拟器可以模拟小程序在各个终端设备上的操作效果；可以设置小程序运行的终端设备，如iPhone 5、iPhone 6等；设置模拟器区域的百分比大小；模拟设置Wi-Fi、2G、3G等网络连接情况，如图1.10所示。

图1.10 模拟器区域

1.3.4 编辑器区域

编辑器区域分为两部分：一部分用来展示项目文件目录和文件结构；另一部分用来进行代码编辑，如图1.11所示。

图1.11 编辑器区域

（1）在项目目录上单击鼠标右键可以在硬盘打开文件目录，对文件目录重新命名，删除目录，在该目录下查找指定内容、新建文件等，如图1.12所示。

图1.12 文件操作

（2）在代码编辑区域里编写代码，可以通过模拟器区域，实时预览编辑的情况。修改 wxss、wxml 文件，会刷新当前页面（page），修改js文件或者json文件，会重新编译小程序，如图1.13所示。

图1.13 代码编写

（3）在代码编写过程中，开发工具提供自动补全功能。在编辑js文件时，开发工具会帮助开发者补全所有的 API，并给出相关的注释解释；编辑wxml文件时，会帮助开发者直接写出相关的标签；编辑json文件时，会帮助开发者补全相关的配置，并给出实时的提示，如图1.14所示。

图1.14 自动补全功能

（4）开发工具提供自动保存功能，书写代码后，工具会自动帮助用户保存当前的代码编辑状态，直接关闭工具或者切换到别的项目，并不会丢失已经编辑的文件内容，但需要注意的是，只有保存文件，修改内容才会真实地写到硬盘上，并触发实时预览。

1.3.5 调试器区域

小程序的常用调试工具有：Console、Sources、Network、Storage、AppData、Wxml。除了这6个调试选项外，还有一些不常用的工具：Application为记录加载的资源信息，Security为安全和认证，Audits为性能诊断和优化建议，Sensor用来选择模拟地理位置，Trace为性能监测数据，在这里不做详细介绍。

（1）Console窗口用来显示小程序的错误输出信息和调试代码，除了可以输出错误信息，还可以进行代码编写和调试，如图1.15所示。