# 小程序

# 登录

小程序/公众号登录涉及到两个最关键的用户标识：

# OpenID

在关注者与公众号产生消息交互后，公众号可获得关注者的 OpenID，每个用户对每个公众号的 OpenID 是唯一的，对于不同公众号，同一用户的 OpenID 不同。

# UnionID

同一个微信开放平台帐号下的移动应用、网站应用和公众帐号，用户的 UinonID 是唯一的。当开发者拥有多个公众号或应用时，同使用 UinonID 来确保账号的唯一性。

在 APP 的接入微信登录或开发公众号之初，强烈建议记录用户 UinonID，以实现多应用下用户账号体系互通。若只记录 OpenID，后期很有可能面临账号打通或合并等问题，增加运营成本。

# 视图层 View

框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

# WXML(WeiXin Markup language) 用于描述页面的结构。

# WXS (WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

# WXSS(WeiXin Style Sheet) 用于描述页面的样式。

# 组件(Component)是视图的基本组成单元。

# 知识点

# app()

app()函数用来注册一个小程序，接收一个 object 参数：

• （1）onLaunch：当小程序初始化完成时，会触发 onLaunch，且只会触发一次；
• （2）onShow:当小程序启动，或者从后台进入到前台时启动；
• （3）onHide:当小程序从前台进入到后台触发；
• （4）onError：当小程序脚本错误或者 api 调用失败以后触发，附带错误信息。

# getApp()

全局的 getApp() 函数可以用来获取到小程序实例。

// other.js
var appInstance = getApp();
console.log(appInstance.globalData); // I am global data

• （1）App() 必须在 app.js 中注册，且不能注册多个。
• （2）不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
• （3）不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
• （4）通过 getApp() 获取实例之后，不要私自调用生命周期函数。

# page

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

• （1）data 对象：当前页面的数据源

生命周期函数：

• （2）onLoad:--监听页面加载
• （3）onReady:--监听页面初次渲染完成
• （4）onShow:--监听页面显示
• （5）onHide:--监听页面隐藏
• （6）onUpload:-- 监听页面卸载

监听相关事件处理函数：

• （7）onPullDownRefresh:--监听用户下拉动作
• （8）onReachBottom：--页面上拉触底的事件处理函数
• （9）onShareAppMessage:--用户点击右上角转发
• （10）onPageScroll:--页面滚动时触发事件的处理函数

还包括用户的点击等事件，由用户自定义名称.   可以通过 Page.prototype.setData()来把数据从逻辑层发送到视图层（异步），同时改变 this.data 的值（同步）。

setData()可以有两个参数，一个 object（以 key：value 形式存在），和一个回调函数 callback。   object 的 key 不需要在 this.data 中预先定义。

注意点：

• （1）直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致
• （2）单次设置的数据不能超过 1024kB，请尽量避免一次设置过多的数据

# 事件

bind 绑定的事件不能阻止事件冒泡，catch 绑定的事假可以阻止事件冒泡。 捕获阶段监听事件时，可以采用 capture-bind、capture-catch 关键字。

dataSet 在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以 data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如 data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰 elementType。

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">
  DataSet Test
</view>

Page({
  bindViewTap: function(event) {
    event.currentTarget.dataset.alphaBeta === 1; // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2; // 大写会转为小写
  }
});

# wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容, switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供 :

• （1）字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• （2）保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：

  • 当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
  • 如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

# wx-if vs hidden

类似 vue 里面的 v-if vs v-show

• （1）wx-if 是惰性加载，如果首次 v-if 的值是 false 是不渲染的。v-if 的状态切换会导致条件块销毁或者重新渲染，比较消耗性能。
• （2）hidden 不管值为 false 还是 true，首次总会渲染，只是显示不显示的区别，切换状态也不会销毁或者重新渲染。
• （3）如果有频繁的切换操作行为，使用 hidden 较好。

# WXML 模板

使用 name 属性，作为模板的名字。然后在内定义代码片段，如：

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<template is="msgItem" data="{{...item}}" />
//...展开运算符 //模板拥有自己的作用域，只能使用 data
传入的数据以及模版定义文件中定义的 <wxs /> 模块。

Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
});

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd">
  <view> odd </view>
</template>
<template name="even">
  <view> even </view>
</template>

<block wx:for="{{[1, 2, 3, 4, 5]}}">
  <template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

# WXS 模块

WXS 代码可以编写在 wxml 文件中的 标签内，或以 .wxs 为后缀名的文件内。

• （1）每一个 .wxs 文件和 标签都是一个单独的模块。
• （2）每个模块都有自己独立的作用域。即在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见。
• （3）一个模块要想对外暴露其内部的私有变量与函数，只能通过 module.exports 实现。
• （4）在.wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。
• （5）每个 wxs 模块均有一个内置的 module 对象。通过 exports 属性对外共享本模块的私有变量或者函数。
• a. 只能引用 .wxs 文件模块，且必须使用相对路径。
• b. wxs 模块均为单例，wxs 模块在第一次被引用时，会自动初始化为单例对象。多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象。
• c. 如果一个 wxs 模块在定义之后，一直没有被引用，则该模块不会被解析与运行。

# 1、e.currentTarget.dataset

在点击事件的函数中带参数 e，通过e.currentTarget.dataset可以获取当前组件上由 data-开头的自定义属性组成的集合。

# 2、url 中携带的参数

在 url 中携带的参数可以在跳转到的页面的 unLoad 方法的 options 参数获取。

# 3、通过全局函数 getApp() 可以获取全局的应用实例

// app.js
App({
  globalData: 1 //全局数据
});

index.js;
var app = getApp();
app.globalData++;

在 app.js 里面生命的数据是全局数据，在单个文件里面声明的变量和函数只在该文件中有效，不同的文件可以声明相同名字的变量或者函数，相互不受影响。

# 4、单文件的 json 配置会覆盖掉公共的 app.json 里的 window 对象。

# 5、wx.getUserInfo，第一次调用这个接口，会弹出授权浮框，如果此时用户拒绝，后续再调用这个接口，接口直接返回“用户拒绝”（清缓存除外）取消授权之后，10 分钟内不会再弹。所以小程序内要考虑这种用户取消授权的交互。

# 6、不要在 window 中设置{"enablePullDownRefresh": true}，在 window 中设置的话所有页面都会下拉。

在需要下拉的页面的。json 文件设置{"enablePullDownRefresh": true}

# 7、微信小程序的页面路径限制为最多 5 层

多于 5 层的页面将不会跳转并且会抛出错误信息，而我们产品的某些业务场景不止存在 5 层的页面路径，在这种情况下，我们不得不牺牲一定的用户体验，以保证功能的完整。可以把能合并的页面合并，做成类似 tab 的形式，使用 storage 本地缓存 tab 信息。

# 8、不支持 cookie，所以使用 cookie 储存登录状态的方案不可行；

http 请求 header 不携带设备信息，服务器无法获取

# 9、大部分内容会转化为常规的 html/css/js，并使用 webview 渲染；部分组件调用 native 实现功能。

# 10、event handler 的参数 event 不支持访问 DOM

小程序中不支持任何访问 DOM 的语法，因为它并不是在浏览器环境下运行，所以 document、window 等浏览器暴露的 API 均不能访问。所以通过 event.target 获取 DOM 是不可行的。只能通过操作数据来修改 UI。

# 11、开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用。

也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

# 12、wxs 模块实际是类似 js 代码（不是 js，但是类似 js,有自己的语法）

它的作用域是独立的，对外不可见，只能通过 module.exports 对外暴露。 每个 wxs 模块都有一个内置的 module 对象，module 对象有 exports 属性，可以对外共享本模块的私有变量和函数。 在.wxs 模块中引用其他 wxs 文件模块，可以使用 require 函数。

# 13、wxml 里面使用 template 时，定义时使用 name 属性，引用时使用 is 属性。

可以使用 improt 引用另外一个文件定义的 template，另一个文件定义的 template 仍然要加''包裹。 include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

# 14、可变数组数据渲染务必使用 wx:key

渲染列表数据时，如果列表中的数据是动态的（比如点击之后修改列表中某个元素的值），那么在渲染 UI 时务必将渲染的模板加上wx:key。wx:key使用保证不重复的值，或者使用 *this。

# 15、wxss 将设备屏幕的宽统一定义为 750rpx，rpx 是 wxss 带来的新的尺寸单位，1rpx = 0.5px = 1 物理像素（iphone 上）。

wxss 将屏幕宽分为 20rem，1rem = (750/20)rpx。 1rpx = 1px/dpr，iPhone6 的 dpr=2 dpr 可以使用小程序的 api 接口 getSystemInfo 获取，返回参数 res.pixelRatio 即使 dpr 的值。

# mpvue

Vue.js 小程序版, fork 自 vuejs/vue@2.4.1，保留了 vue runtime 能力，添加了小程序平台的支持。

mpvue是一个使用 Vue.js 开发小程序的前端框架，目前支持微信小程序、百度智能小程序，头条小程序和支付宝小程序。 框架基于Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了Vue.js开发体验。