小程序(入门)-01
1、小程序基本介绍
1.1、小程序是什么？
官方文档：https://developers.weixin.qq.com/miniprogram/dev/
微信小程序，简称小程序，英文名 Mini Program，对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。
1.2、发展历史
- (2016年1月11日,微信之父张小龙公布微信小程序)
- (2016年9月21日,微信小程序正式开启内测)
- (2017年1月9日,第一批小程序正式上线)
- (2017年12月28日,微信更新的 6.6.1 版开放了小游戏,
微信启动页面推荐了小游戏'跳一跳',可以通过小程序找到已经玩到小游戏) - (2018年1月25日,微信团队在'微信公众平台'发布公告称,
从移动应用分享至微信的小程序页面,用户访问时支持打开来源应用) - (2018年9月,微信团队推出云开发平台)
- (2020年2月,微信团队推出直接功能)
1.3、小程序与传统 APP 的区别
1.3.1、小程序
局限性：必须依赖于微信，不能独立运行
优势：不需要考虑兼容问题，推广安装的问题。因为微信软件安装量够多，开发难度小
1.3.2、传统 APP
优势：独立运行，不需要依赖于谁，可以适合所有的业务需求
局限性：需要用户安装，解决适配(开发兼容问题)，开发难度大
1.4、怎么理解小程序？
- 不是HTML5
- 即用即走，随手可得
- 拥有离线能力
- 基于微信客户端中，一次开发，多端兼容
- 优美的操作体验
1.5、谁可以注册开发小程序？
官方文档：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
1.6、需要的技术储备？
- css知识
- 类似html语法(xml)、view视图层
- javascript 控制与逻辑层实现 model controller
1.7、小程序的框架结构
1.8、小程序开发者手册文档
官方文档：https://developers.weixin.qq.com/miniprogram/dev/index.html
2、帐号和设置
小程序是微信提供一种服务它明确的给出了使用小程序的接入流程
我们从流程中可以看到，第一步就需要注册帐号。
2.1、注册
2.1.1、进入注册页面
官方文档：https://mp.weixin.qq.com/cgi-bin/wx?token=&lang=zh_CN
2.1.2、填写注册信息
注意：
1、一个邮箱只能申请一个小程序帐号
2、注册了公众号的邮箱不能再申请小程序
3、注册完成后，需要进入注册帐号的邮箱激活帐号
2.1.3、邮箱激活
2.1.4、信息登记
2.2、登陆
2.2.1、进入官网登陆页面
注意：输入注册时的邮箱和密码进行登陆
网址：https://mp.weixin.qq.com
登陆后会被要求进行二次扫码验证登陆，直接使用绑定的微信扫码登陆即可，二次验证成功后，进入如下所示界面：
2.2.2、先完善个人信息
2.2.3、完善个人信息后，即可查看推广的小程序码
2.3、获取 appid
注意：小程序开发，需要依赖于小程序的 appid ，我们可以通过如下图所示的操作，查看当前小程序的 appid
3、开发工具和模拟器
为了帮助开发者简单和高效地开发和调试微信小程序，腾讯在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。
3.1、下载安装官方开发工具(必要)
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018626
根据自己的操作系统，下载相应版本的软件，下载后，双击运行安装，一路下一步即可。
安装完成后，运行开发工具，会出现以下界面
使用之前绑定的微信号进行扫码，会出现以下界面：
点击小程序项目，出现如下界面：
到此，官方开发工具安装完成。
3.2、vscode开发工具【选装】
下载后，直接双击运行安装程序，一路下一步安装即可。
安装完成后，运行该软件，可以按下图所示安装中文包：
当前vscode还不支持小程序代码提示，所以要进一步安装相关vscode的插件
minapp插件：
wechat-snippet插件：
wepy snippet插件：
4、应用案例：实现第一个小程序
运行官方开发工具，先填写项目信息
点击确定，进入开发界面：
5、小程序的文件结构
5.1、文件结构
一个小程序主体部分由三个文件组成，必须放在项目的根目录
比如当前我们的《第一个小程序》项目根目录下就存在这三个文件：
5.2、pages目录
项目根目录下的pages目录存放的是小程序中的页面，小程序每个页面都由4个文件组成(注意：这四种文件必须是同名的)， 分别为：
例如：《第一个小程序》项目中的pages目录
例如：index页面文件夹中
6、全局配置app.json
app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab(底部导航菜单)等。
注意：
1）app.json中不能添加任何注释，否则会报错
2）字符串用户双引号引起来。
上图中我们看到app.json中实际保存的是小程序的主配置项属性列表，app.json中可以设置的属性有以下几项：
6.1、各项属性说明
6.1.1、pages
值是一个数组，数组的每一项都字符串，用来指定小程序由哪些页面组成。每一项代表对应页面【路径+文件名(不包含后缀名)】的信息。数组的第一项代表小程序的初始页面。
注意：小程序每新增一个页面，相应的在pages中就需要增加多一个配置页面记录；反之亦然。
6.1.2、window
用于设置小程序的状态栏、导航条、标题、窗口背景色。
示例：
6.1.3、tabBar
tabBar 支持的属性：
- 当设置 position 为 top 时，将不会显示 icon。
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个tab，tab 按数组的顺序排序。
tabBar 中list支持的属性：
6.1.4、networkTimeout
用于设置各种网络请求的超时时间
注意：上线之前一定要设置一下超时时间，不然小程序有可能出现上列情况。
示例：
6.1.5、debug
用于在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发。可以帮助开发者快速定位一些常见的问题，默认为开启状态。
在开发阶段，建议打开 debug。上线时请关闭此选项，设置为 false。
开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
7、页面配置文件*.json
每个小程序页面也可以使用同名*.json文件来对本页面的窗口表现进行配置，页面中配置项会覆盖app.json的window中相同的配置项。
用于设置小程序的状态栏、导航条、标题、窗口背景色。
开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html
静态配置
例如：
{
"navigationBarBackgroundColor": "#ffffff",
"navigationBarTextStyle": "black",
"navigationBarTitleText": "微信接口功能演示",
"backgroundColor": "#eeeeee",
"backgroundTextStyle": "light"
}
使用微信提供的API接口
语法：wx.setNavigationBarTitle(Object object)
注：调用微信提供的API设置当前页面标题的级别比*.json文件的高
8、sitemap配置
开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/sitemap.html
小程序根目录下的sitemap.json文件用于配置小程序及其他页面是否允许被微信索引，文件内容为一个json对象，如果没有sitemap.json，则默认为所有页面都允许被索引；sitemap.json有以下属性：
8.1、配置项
8.2、rules
rules配置项指定了索引规则，每项规则为一个`json`对象，属性如下所示：
8.3、matching 取值说明
8.4、配置示例
设置启动参数
8.4.1、示例1
{
"rules":[{
"action": "allow",
"page": "pages/goods/goods",
"params": ["a", "b"],
"matching": "exact"
}, {
"action": "disallow",
"page": "pages/goods/goods"
}]
}
说明：
pages/goods/goods?a=1&b=2=> 优先索引pages/goods/goods=> 不被索引pages/goods/goods?a=1=> 不被索引pages/goods/goods?a=1&b=2&c=3=> 不被索引- 其他页面都会被索引
8.4.2、示例2
{
"rules":[{
"action": "allow",
"page": "pages/goods/goods",
"params": ["a", "b"],
"matching": "inclusive"
}, {
"action": "disallow",
"page": "pages/goods/goods"
}]
}
说明：
pages/goods/goods?a=1&b=2=> 优先索引pages/goods/goods?a=1&b=2&c=3=>优先索引pages/goods/goods=> 不被索引pages/goods/goods?a=1=> 不被索引- 其他页面都会被索引
8.4.3、示例3
{
"rules":[{
"action": "allow",
"page": "`pages/goods/goods",
"params": ["a", "b"],
"matching": "exclusive"
}, {
"action": "disallow",
"page": "`pages/goods/goods"
}]
}
说明：
pages/goods/goods=> 优先索引pages/goods/goods?c=3=>优先索引pages/goods/goods?a=1=> 不被索引pages/goods/goods?a=1&b=2=> 不被索引- 其他页面都会被索引
8.4.4、示例4
{
"rules":[{
"action": "allow",
"page": "pages/goods/goods",
"params": ["a", "b"],
"matching": "partial"
}, {
"action": "disallow",
"page": "pages/goods/goods"
}]
}
说明：
pages/goods/goods?a=1=> 优先索引pages/goods/goods?a=1&b=2=>优先索引pages/goods/goods=> 不被索引pages/goods/goods?c=2=> 不被索引- 其他页面都会被索引
注：没有`sitemap.json`则默认所有页面都能被索引
注：`{"action": "allow", "page": "*"}`是优先级最低的默认规则，未显示指明"disallow"的都默认被索引
9、代码编辑器技巧
9.1、快速创建小程序页面
快速创建小程序
注：一定要微信开发工具中使用可以
注释内容：
分为两种：单行、多行注释
单行注释的快捷键：ctrl + l
多行注释的快捷键：alt + shift + a
10、视图结构 wxml
10.1、概述
开发文档：https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构， CSS 用来描述页面的样子， JS 通常是用来处理这个页面和用户的交互。
同样道理，在小程序中也有同样的角色，其中 ==WXML 充当的就是类似 HTML 的角色==。打开 pages/index/index.wxml，你会看到以下的内容：
和 HTML 非常相似， WXML 由标签、属性等等构成。但是也有很多不一样的地方，我们来一一阐述一下：
1）标签名字有点不一样
2）多了一些 wx:if 这样的属性以及 {{}} (插值表达式)这样的表达式
我们把 ... 标签称为视图容器。
10.2、数组绑定
开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/data.html
通过{{}}的语法(插值表达式)把一个变量绑定到界面上，我们称为数据绑定。
小程序提倡把渲染和逻辑分离，简单来说就是不要再让`js`直接操控`DOM`，`js`只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
WXML语法：
<标签>{{变量名}}</标签>
示例：
1.首先得在*.js文件中定义数据变量，例如：index 页面中
2.然后才可以在以*.wxml为后缀的文件中使用
3.效果如下图所示
10.3、列表渲染
开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html
语法：
<标签名 wx:for="{{变量名}}" [wx:for-index="自定义名称" wx:for-item="自定义名称" wx:key="自定义名称"]></标签名>
说明：
- wx:for-index 可以指定数组当前下标的变量名，默认名为：index
- wx:for-item 可以指定数组当前元素的变量名，默认名为：item
- wx:key 可以定义也可以不定义，唯一的标识符
示例：
1.首先在*.js后缀的文件中设定数组数据
2.然后在*.wxml为后缀的模板文件中使用列表渲染相当于循环遍历出userData的数据
3.效果如下图所示
注意1：
当wx:for的值为字符串时，会将字符串解析成字符串数组
{{item}}
等同于
{{item}}
注意2：
花括号和引号之间如果有空格，将最终被解析成为字符串
{{item}}
等同于
{{item}}
10.4、条件渲染
开发文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html
语法：
<标签名 wx:if="{{condition}}"></标签名>
在框架中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块，也可以用wx:elif和wx:else来添加一个else块。
快速生成一个小程序页面的方法：
在微信提供的开发工具中中，打开app.json文件，直接在app.json中的pages配置项里增加一个新页面的路径：
然后直接保存该文件，那么在系统开发工具中立即就能自动帮我们生成这个页面
示例：
1.在*.js文件中添加一个数据变量
2.然后直接在*.wxml模板页面中使用条件渲染
当前为v1类设置样式：
3.效果如下图所示
11、常用运算
11.1、基本运算符
运算符优先级
示例代码：
var a = 10;
var b = 20;
// 加法运算
console.log(30 === a + b);
// 减法运算
console.log(-10 === a - b);
// 乘法运算
console.log(200 === a * b);
// 除法运算
console.log(0.5 === a / b);
// 取余运算
console.log(10 === a % b);
注意：
加法运算符+也可以用作字符串拼接
var a = '.w';
var b = 'xs'l
// 字符串拼接
console.log('.wxs' === a + b);
11.2、比较运算符
运算符优先级
示例代码：
var a = 10;
var b = 20;
// 小于
console.log(true === (a < b));
// 大于
console.log(false === (a > b));
// 小于等于
console.log(true === (a <= b));
// 大于等于
console.log(false === (a >= b));
11.3、等值运算符
运算符优先级
示例代码：
var a = 10;
var b = 20;
// 等号
console.log(false === (a == b));
// 非等号
console.log(true === (a != b));
// 全等号
console.log(false === (a === b));
// 非全等号
console.log(true === (a !== b));
11.4、赋值运算符
运算符优先级
示例代码：
var a = 10;
a = 10; a *= 10;
console.log(100 === a);
a = 10; a /= 5;
console.log(2 === a);
a = 10; a %= 7;
console.log(3 === a);
a = 10; a += 5;
console.log(15 === a);
a = 10; a -= 11;
