微信小程序学习

生命周期函数

• 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

1. 在 iconfont.cn 中下载图标库, 直接将其中的 iconfont.css 复制到小程序目录中,并将扩展名改为 wxss；
2. 在使用时在对应的样式文件 wxss 中加入一行引用，@import "/path/to/iconfont" ；
3. 可以在 wxml 中使用了，<text class="iconfont icon-xxx"></text>；
4. 更新小程序图标，将下载的 iconfont.css 的内容复制到小程序目录中的 iconfont.wxss 中，就OK了