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 缓存功能