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

视频课程

微信小程序开发者

工具的使用

微信小程序的开发，需要使用微信开发者工具。借助微信开发者工具，可以进行本地小程序项目开发和公众号网页开发，如图1.9所示。

微信开发者工具提供Windows 64位版本、Windows 32位版本和Mac版本，可以根据自己的计算机硬件和操作系统选择相应的版本，按提示安装即可。

1.2.1 获取微信小程序AppID

访问微信公众平台，注册微信公众平台账号，选择小程序类型进行注册。注册成功后登录微信公众平台，开发者就可以在网站“设置”下的“开发设置”选项卡中查看到微信小程序的AppID（见图1.10），不可直接使用服务号或订阅号的AppID。

微信小程序注册，主体类型可以是企业、政府、媒体和其他组织（不属于政府、媒体、企业或个人的类型），所以作为个人类型是无法注册的，如图1.11所示。

作为个人学习微信小程序开发，可以先不获取微信小程序AppID。如果没有AppID，在开发过程中会部分权限受到限制和不允许发布微信小程序，但是对于学习微信小程序没有太大影响。

1.2.2 创建一个微信小程序项目

1 微信开发者工具需要使用微信扫描进行登录，示意图如图1.12所示。

2 扫描登录后，会进入调试类型选择界面，其中提供两种类型：本地小程序项目和公众号网页开发，选择“本地小程序项目”，如图1.13所示。

3 选择本地小程序项目后，单击“添加项目”菜单，会进入添加项目界面，在其中可以填写AppID、项目名称及选择项目目录。注意：AppID如果没有，可以单击“无AppID部分功能受限”；选择项目目录前，先创建一个文件夹，然后选择该文件夹作为项目目录，如图1.14所示。

4 添加项目后，会进入微信小程序开发的界面，如图1.15所示。

1.2.3 微信开发者工具的使用

1．编辑功能

微信开发者工具界面可以用于代码编辑、代码调试、项目预览与上传、编译、前后台切换、缓存数据清理及关闭项目，如图1.16所示。

在硬盘中打开文件的目录，可以新建4种文件：.js、.json、.wxml和．wxss文件，对文件进行重新命名、删除和查找操作，如图1.17所示。

通过编辑区左边的模拟器，可以实时预览编辑的情况：修改．wxss、.wxml 文件，会刷新当前页面；修改．js 文件或．json 文件，会重新编译小程序，如图1.18所示。

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

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

2．调试功能

小程序的调试工具有Console、Sources、Network、Storage、AppData、wxml。

● Console窗口用来显示小程序的输出出错信息和调试代码，如图1.20所示。

● Sources窗口用于显示当前项目的脚本文件，在Sources窗口中开发者看到的文件是经过处理后的脚本文件，如图1.21所示。

● Network用来观察发送的请求和调用文件的信息，如图1.22所示。

● Storage窗口用于显示当前项目使用wx.setStorage 或wx.setStorageSync后的数据存储情况，如图1.23所示。

● AppData窗口用于显示当前项目、当前时刻具体数据，实时地反馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上，如图1.24所示。

● Wxml窗口用于帮助开发者开发wxml转换后的界面。在这里可以看到真实的页面结构及结构对应的wxss属性，同时可以修改对应wxss属性，如图1.25所示。

3．项目功能

在项目模块中，可以看到微信小程序项目的相关信息，包括项目名称、AppID、项目文件的路径，如果有AppID的项目，可以在手机上预览微信小程序，将小程序上传，如图1.26所示。

4．编译功能

编译是对整个项目进行重新编译，如图1.27所示。

5．前台、后台功能

后台是指微信小程序从前台进入后台，例如在操作微信小程序过程中，突然打进来电话，如果接电话，这时小程序从前台进入后台；重新访问小程序，又会从后台进入前台，如图1.28所示。

6．缓存功能

缓存用来清除数据存储、清除文件存储及清除用户授权数据，如图1.29所示。