第1章微信小程序基础

1.1 微信小程序介绍

1.1.1 什么是微信小程序

微信小程序的特点：

① 微信小程序是不需要下载和安装的；

② 它可以完成App应用软件的交互功能；

③ 用户扫一扫或者搜一下就可以使用小程序；

④ 微信小程序无处不在，随时随地可以使用；

⑤ 微信小程序无须卸载，应用方便。

1.1.2 微信小程序发展历程

① 2016年1月9日，微信团队首次提出“应用号”概念。

②2016年9月22日，微信公众平台对外发送小程序内测邀请，内测名额200个。

③2016年11月3日，微信小程序对外公测，开发完成后可以提交审核，但公测期间不能发布。④2016年12月28日，张小龙在微信公开课上解答外界对微信小程序的几大疑惑，包括没有应用商店、没有推送消息等内容。

⑤2016年12月30日，微信公众平台对外公告，上线的微信小程序最多可生成10000个带参数的二维码。

⑥2017年1月9日，微信小程序正式上线。

1.1.3 微信小程序提供的功能

1.支持分享当前界面功能，分享出去的是动态的界面

2.小程序线下扫码功能

3.小程序支持挂起状态

4.小程序的消息通知

5.小程序和公众号能相互跳转

6.小程序的搜索和历史列表

1.1.4 微信小程序不能提供的功能

① 小程序没有集中入口，没有应用商店。

② 小程序没有订阅关系。

③ 小程序不能推送消息。

④ 小程序不能做游戏。

1.1.5 微信小程序带来的机会

● 给企业带来机会：对于已有App软件的公司，提供了新的方式推广产品，而对于创业公司来说，使用微信小程序可以降低推广产品的成本。

● 给创业者带来机会：创业者可以围绕小程序做社区、做应用商店、做微信小程序开发平台、做教育培训及出版书籍等来进行创业。

● 给小程序员带来机会：给学生、网站编辑、前端开发人员等想做程序员的人们，提供了做小程序员的就业机会。

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

（1）微信小程序开发文档：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=2017112

（2）公众平台申请开发者账号：

微信公众平台

（3）申请一个AppID：

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

1.2.3 微信开发者工具的使用

1.编辑功能

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

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

.js文件编辑会帮助开发者补全所有的API，并给出相关的注释解释；.wxml文件编辑会帮助开发者直接写出相关的标签；.json文件编辑会帮助开发者补全相关的配置，并给出实时的提示。

注：只有保存文件，修改内容才会真实地写入硬盘中，并触发实时预览。

2.调试功能

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

Console窗口用来显示小程序的输出出错信息和调试代码
Sources窗口用于显示当前项目的脚本文件，在Sources窗口中开发者看到的文件是经过处理后的脚本文件
Network用来观察发送的请求和调用文件的信息
Storage窗口用于显示当前项目使用wx.setStorage 或wx.setStorageSync后的数据存储情况
AppData窗口用于显示当前项目、当前时刻具体数据，实时地反馈项目数据情况。用户可以在此处编辑数据，并及时地反馈到界面上
Wxml窗口用于帮助开发者开发wxml转换后的界面。在这里可以看到真实的页面结构及结构对应的wxss属性，同时可以修改对应wxss属性

3.项目功能

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

4.编辑功能

编辑：对整个项目进行重新编译

5.前台、后台功能

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

6.缓存功能

缓存用来清除数据存储、清除文件存储及清除用户授权数据

1.3 微信小程序框架文件

微信小程序框架文件分为三部分：框架全局配置文件、工具类文件和框架页面文件。

框架全局配置文件是从项目全局的角度对项目进行配置管理，工具类文件对应的是一些常用的．js工具处理，框架页面文件对应的是微信小程序各个页面。

1.3.1 框架全局配置文件

一个小程序框架配置文件由app.js、app.json和app.wxss 3个文件组成。它们作为全局文件，必须放在项目的根目录。

1.app.js小程序逻辑文件

定义全局数据和函数，可指定微信小程序的生命周期函数，不同阶段不同场景可使用不同的生命周期函数；还可以定义一些全局的函数和数据，其他页面引用app.js文件后就可以直接使用全局函数和数据。

2.app.json小程序公共设置

全局配置文件，可设置5个功能：配置页面路径、配置窗口表现、配置标签导航、配置网络超时和配置debug模式

① 配置页面路径，app.json定义一个数组存放多个页面的访问路径（页面访问的必要条件）

② 配置窗口表现，用于配置小程序的状态栏、导航条、标题、窗口背景色，可以设置导航条背景色（navigationBarBackgroundColor）、导航条文字（navigationBarTitleText）及导航条文字颜色（navigationBarTextStyle），还可以设置窗口是否支持下拉刷新（enablePullDownRefresh），默认值是不支持下拉刷新的，设置窗口的背景色（backgroundColor）、下拉背景字体或文本样式（backgroundTextStyle）

③ 配置标签导航

在app.json中配置tabBar属性。tabBar是一个对象，可以配置标签导航文字默认颜色、选中颜色、标签导航背景色及上边框颜色，上边框颜色可以配置black、white两种颜色。标签导航存放到list数组中，有一个标签导航就在list中配置标签导航，list中的每个对象对应一个标签导航，每个对象中可以配置标签导航的路径、导航名称、默认图标及选中图标