第一章总结

认识微信小程序

微信是腾讯公司于2011年1月21日推出的一款智能终端提供的即时通信服务的应用程序。

特征

小程序嵌入微信之中，不需要下载安装外部应用，用户通过扫描二维码和搜索相关功能的关键词即可使用，具备无须安装、触手可及、用完即走、无须卸载的特性。小程序可以被理解为“镶嵌在微信的超级App”
1.无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2.触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。
3.用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会。实现用完即走。
4.无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

微信小程序开发流程

开发流程为：第一步，在微信公众平台注册小程序账号；
第二步，下载开发者工具进行创建项目并编译；
第三步，通过开发工具提交代码，待通过审核后可以发布。
微信小程序开发者工具界面功能介绍
微信小程序开发者工具界面划分为五大区域：工具栏，模拟区，目录文件区，编辑区和调试区。
图片如下：面板

面板分为九个面板：
1、Console面板：用于调试小程序的控制面板，显示错误信息在Console面板中，便于查找错误。
2、Source面板：源文件调试信息页，显示当前项目的脚本文件。
3、Network面板：网络调试信息页，观察和显示网络请求相关详细信息
4、Security面板：安全认证信息页
5、Storage面板：数据存储信息页
6、AppData面板：实时数据信息页，显示项目页面数据情况。
7、Wxml面板：布局信息页，主要调试Wxml组件和CSS样式
8、Sensor面板：重力传感信息页
9、Trace面板：路由追踪信息页
总结

上述首先介绍了微信小程序，讲解了微信小程序的特征及微信小程序应用场景的特点，然后重点讲解了微信小程序项目的开发流程，最后介绍了微信小程序开发者的使用。通过本章的学习，读者能够从概念上对小程序有一个基本认识，为后续学学习打下良好的基础。

我的第一个微信小程序项目

代码

运行效果

微信小程序开发者工具界面功能介绍：

1.工具栏：

在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览，切换后台，清理缓存等
2.模拟区：

在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果
3.目录文件区：

目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作
4.编辑区：

编辑区用来实现对代码的编辑操作，编辑区中支持对.wxm、.wxss、.js及.json 文件的操作，使用组合键能提高代码的编辑效率。常用的组合键如表1-1所示。

5.调试区：

调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sourees、Network、Security、Storage、AppDataWxml、Sensor和Trace。最右边的扩展菜单项“:”是定制与控制开发工具按钮

Console面板：

Comsole面板是调试小程序的控制而板，当代码执行出现错误时，错误信息将显示Consoke面板中，便于开发者排查错误，如图1-25所示。另外，在小程中，开发者可通过console.loe语句将信息输出到Console面板中。此外，开发者可以在 Console 面板直接轮人代码并调试
2.Sources面板：

Sourees面板是源文件调试信息页，用于显示当前项目的脚本文件，如图1-26所示调试区左侧显示的是源文件的目录结构，中间显示的是选中文件的源代码，右侧显示的是调试相关按钮，Sources面板中显示的代码是经过小程序框架编译过的脚本文件，开发者的代码会被包含在defne 函数中。对于Page 代码，在文件尾部通过require 函数主动调用
3.Network面板：

Network面板是网络调试信息页，用于观察和显示网络请求request和socket 等网络相关的详细信息
4.Security面板：

Security面板是安全认证信息页，开发者可以通过该面板调试当前网页的安全和认证等问题。如果设置安全论证，则会显示“The security of this page is unknown.”
5.Storage面板：

Storage 面板是数据存储信息页，开发者可以使用wx.setStorage或者wx.setStorageSyne 将数据存储到本地存储，存储在本地存储中的变量及值可以在Sorage 面板中显示
6.AppData面板：

AppDala面板是实时数据信息页，用于显示项目中被激活的所有页面的数据情况。开发者在这里不仅可以查看数据的使用情况，还可以更改数据。编辑器会实时地将数据的变更情况反映到前端界面
7.Wxml面板：

Wxml面板是布局信息页，主要用于调试Wxm】组件和相关CSS样式，显示Wxm转化后的界面。Wxml面板调试区的左侧部分是Wxm代码，右侧部分是该选择器的CSS样式
8.Sensor面板：

Sensor 面板是重力传感器信息页，开发者可以在这里选择模拟地理位置来模拟移动设备表现,用于调试重力感应 API
9.Trace面板：

Trace面板是路由追踪信息页，开发者在这里可以追踪连接到电脑中的安卓(Android)设备的路由信息
10.扩展菜单项：

最右边的扩展菜单项“:”主要包括开发工具的一些定制与设置，开发者可以在这里设置相关信息