小程序实战视频课:微信小程序开发全案精讲
上QQ阅读APP看书,第一时间看更新

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

视频课程

微信小程序开发者

工具的使用

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

图1.9 微信开发者工具

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

1.2.1 获取微信小程序AppID

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

图1.10 获取AppID

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

图1.11 微信小程序开发者账号注册

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

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

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

图1.12 微信扫描登录

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

图1.13 调试类型界面

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

图1.14 添加项目界面

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

图1.15 微信小程序开发界面

1.2.3 微信开发者工具的使用

1.编辑功能

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

图1.16 微信小程序开发界面

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

图1.17 文件操作

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

图1.18 代码编辑

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

图1.19 自动补全

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

2.调试功能

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

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

图1.20 Console功能

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

图1.21 Sources功能

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

图1.22 Network功能

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

图1.23 Storage功能

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

图1.24 AppData功能

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

图1.25 wxml功能

3.项目功能

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

图1.26 项目功能

4.编译功能

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

图1.27 编译功能

5.前台、后台功能

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

图1.28 前台、后台功能

6.缓存功能

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

图1.29 缓存功能