微信小程序学习
生命周期函数
- onLoad，页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
- onShow，页面显示/切入前台时触发。
- onReady，页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
- onHide，页面隐藏/切入后台时触发。如离开当前小程序或者电话来临等。
- onUnload，页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时。
页面事件处理函数
- onPullDownRefresh()，监听用户下拉刷新事件，需要在 app.json 的 windows 选项中或页面配置中开启 enablePullDownRefresh 。当处理完数据刷新后，wx.stopPullDownRefresh 可以停止当前页面的下拉刷新。
- onReachBottom()，监听用户上拉触底事件，可以在 app.json 的 windows 选项中或页面配置中设置触发距离 onReachBottomDistance 。在触发距离内滑动期间，此事件只触发一次。
- onPageScroll()，监听用户滑动页面。参数 scrollTop ，页面在垂直方向已滑动的距离(rpx)。
- onShareAppMessage()，监听用户页面内转发行为，并自定义转发内容。
- onTabItemTap()，点击 tab 时触发
组件事件处理函数
- bindtap()
路由
在小程序中所有页面的路由全部由框架进行管理。框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候，页面栈的表现如下：
- 初始化，新页面入栈
- 打开新页面，新页面入栈
模块化
模块只有通过 module.exports 或者 exports 才能对外暴露接口。推荐开发者采用 module.exports 来暴露模块接口。
在需要使用这些模块的文件中，使用 require(path) 将公共代码引入。
module.exports 和 exports 的区别：
- module.exports 初始值为一个空对象 {}
- exports 是指向的 module.exports 的引用
- require() 返回的是 module.exports 而不是 exports
WXML
数据绑定，WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法（双大括号）将变量包起来。
列表渲染，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
- 默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item 。
- 使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名
<view wx:for="{{array}}"> {{index}}: {{item.message}} </view> <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}: {{itemName.message}} </view>
条件渲染，在框架中，使用 wx:if = "{{condition}}" 来判断是否需要渲染该代码块。
如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在 <block/> 上使用 wx:if 控制属性。
wx:if 和 hidden 的区别：wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
模板，WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
- 定义模板，使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段
- 使用模板，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
- 在使用模板前，可能需要先引用文件。
- 模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义 <wxs/> 模块。
<template name="til"> <view> <text>{{obj.test}}</text> </view> </template> <template is="til" data="{{obj}}"/>
引用，WXML 提供两种文件引用方式 import 和 include 。
import 可以在该文件中使用目标文件定义的 template 。
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template （即多层引用是无效的）。
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
事件，事件分为冒泡事件和非冒泡事件：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡。
事件捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。在捕获阶段监听事件时，可以采用 capture-bind、capture-catch 关键字，而 capture-catch 将中断捕获阶段和取消冒泡阶段。
WXS
WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。wxs 与 javascript 是不同的语言，有自己的语法，并不和 javascript 一致。wxs 的运行环境和其他 javascript 代码是隔离的，wxs 中不能调用其他 javascript 文件中定义的函数，也不能调用小程序提供的API 。
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。
模块，每一个 .wxs 文件和 <wxs> 标签都是一个单独的模块。每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
.wxs 文件，在 .wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。
<wxs> 标签，有两个属性，src 和 module 。module 属性是当前 <wxs> 标签的模块名，在单个 wxml 文件内，建议其值唯一。src 属性是引用其他的 wxs 文件模块的路径。
<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs>模块。
WXSS
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。
使用 @import 语句可以导入外联样式表， @import 后跟需要导入的外联样式表的相对路径，用；表示语句结束。
组件
view
scroll-view
swiper
movable-view
cover-view
icon，属性有 type，size，color
text
progress，进度条，属性有 percent，等
button，有个 formtype 属性，可以设置 submit 提交；可以设置 reset，重置 form 表单数据。
checkbox，多选项目，有个父级元素，checkbox-group，它的 e.detail.value 显示选中的元素（数组形式）
form ，
input，微信工具无法输入；
picker，有 mode 属性，分别是 seletor 单列、multiSeletor 多列、time 时间、date 日期、region 地区
picker-view，其中只可放置 <picker-view-column> 组件，其他节点不会显示。
radio
slider
switch，有 type 属性可以设置 checkbox 样式，bindchange 事件的 e.detail.value 显示是否选中
textarea
navigator，页面链接，url 设置路径，
audio，src 设置路径
image，src 设置路径，mode 设置图片裁剪、缩放方式，aspectFit 保持纵横比，完全显示，lazy-load，图片懒加载。只针对 page 与 scroll-view 下的 image 有效
video，
camera，相机，需要用户授权 scope.camera
live-player live-pusher ，
map，
canvas
open-data，开放功能，可以展示用户名称、头像、性别、所在城市等
web-view，web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。
ad，广告，目前暂时以邀请制开放申请
数据请求
wx.request，发送网络请求
小程序中使用 iconfont
- 在 iconfont.cn 中下载图标库, 直接将其中的 iconfont.css 复制到小程序目录中,并将扩展名改为 wxss；
- 在使用时在对应的样式文件 wxss 中加入一行引用，@import "/path/to/iconfont" ；
- 可以在 wxml 中使用了，<text class="iconfont icon-xxx"></text>；
- 更新小程序图标，将下载的 iconfont.css 的内容复制到小程序目录中的 iconfont.wxss 中，就OK了
