在小程序开发中，你是否曾经想要这些功能之一： globalData变化自动更新视图 storage数据变化能自动更新视图 监听globalData和storage的变化 像vue一样的computed计算属性 像component一样的页面observers字段监听器 组件跨级传递数据（类似于react的context.Provider，或vue的provide/inject） 跨页跨组件通信（像eventBus一样） 还没准备好必要数据，希望onLaunch延迟加载页面 全局路由守卫，拦截没权限的页面 全局对page或组件的视图层的事件进行监听或拦截 希望wx.switchTab能够传递参数 希望input双向绑定能支持字段路径 子页面向上一个页面回传数据通过getCurrentPages找到上一个页面再去调方法比较别扭，希望有更好的方式 像vue中 {{ var | filter }} 一样的过滤器功能 组件支持的pageLifetimes太少 全局开启所有页面的分享功能 等等其它更多。。。。 以上所有的这些功能都包含在我写的这个微信小程序js库中，它的名字叫做[代码]wxbuf[代码]，github仓库地址 https://github.com/laivv/wxbuf 如果觉得有用，请动动小手点个star，支持我持续维护和更新更好用的功能，谢谢 只需要这一个库，就能减少很多代码量，让写小程序成为一种享受 下面我们来列举一些功能，假定你已经在你的小程序中引入了[代码]wxbuf[代码]，看了之后你一定会觉得，原来还可以这样！ wx.switchTab传参 wx.switchTab原本是不支持传参的，但是现在你可以像wx.navigateTo用法一样来传递参数，就是这么简单 [代码]wx.switchTab({ url: '/pages/mytab/index?id=1&type=2' }) [代码] [代码]// /pages/mytab/index.js Page({ // 首次进入页面在onLoad钩子接收wx.switchTab参数 onLoad({ id, type }) { }, // wxbuf 提供了onSwitchTab钩子，仅针对tabbar页并且在第二次及之后切入页面进行回调，用于接收参数 onSwitchTab({ id, type }) { } }) [代码] 双向数据绑定支持字段路径 原生的input是不支持字段路径的，这里我们先封装一个叫c-input的组件 c-input.wxml: [代码]<!-- c-input.wxml --> <input placeholder="{{placeholder}}" type="text" bindinput="handleInput" value="{{value}}" /> [代码] c-input.js: [代码]//c-input.js Component({ properties: { placeholder: String, vModel: { type: String, value: '', observer() { this.init() } }, }, // wxbuf提供了一些parentLifetimes生命周期 parentLifetimes: { // 当父组件调用this.setData时 setData() { this.init() } }, lifetimes: { attached() { this.init() } }, data: { value: '', }, methods: { init() { // wxbuf给所有实例提供了$parent属性，其值是父组件实例 if (this.$parent && this.data.vModel) { const value = this.getValueByKeypath(this.$parent.data, this.data.vModel) this.setData({ value }) } }, handleInput({ detail: { value } }) { if (this.$parent && this.data.vModel) { this.$parent.setData({ [this.data.vModel]: value }) } this.setData({ value }) }, getValueByKeypath(data, keypath) { const keys = keypath.split(/\[|\]|\./).filter(Boolean).map(i => i.replace(/\'|\"/g, '')) let val = undefined for (let i = 0; i < keys.length; i++) { const key = keys[i] data = val = data[key] } return val } } }) [代码] 接下来就可以直接使用了： wxml: [代码]<c-input v-model="form.name" placeholder="请输入姓名" /> <c-input v-model="form.phone" placeholder="请输入手机号" /> [代码] js: [代码]Page({ data: { form: { name: '', phone: '' } } }) [代码] 跨组件通信 需要跨组件或者跨页通信时，在构造器选项中配置[代码]listeners[代码]字段来指定事件接收函数，通过实例方法[代码]fireEvent[代码]来触发一个事件 例子： [代码]// pageA.js Page({ listeners: { updateOk(event) { console.log(event) } } }) [代码] [代码]// pageB.js Page({ handleBtnTap() { this.fireEvent('updateOk', 'hello') } }) [代码] 传统的发布订阅(on、emit)的做法是在page的[代码]onLoad[代码]或组件的[代码]attached[代码]钩子中调用[代码]on(eventName, handler)[代码]来注册事件监听，在[代码]onUnload[代码]或[代码]detached[代码]中调用[代码]off(eventName, handler)[代码]来移除事件监听，若不移除事件监听会造成内存溢出，非常麻烦，而[代码]wxbuf[代码]提供的配置式方式则不需要关心这些，更适合于小程序的开发场景 页面间数据传递，数据回传 使用实例方法[代码]openPage[代码]来打开新页面，新页面通过实例方法[代码]finish[代码]来关闭自身页面并回传数据给上一个页面，[代码]finish[代码]方法包括了关闭页面（[代码]wx.navigateBack[代码]）与回传数据两项功能于一身 例子： [代码]// pageA.js Page({ async handleTap() { const acceptVal = await this.openPage({ url: '/pages/detail/index?name=wxbuf', // 使用params字段传递参数，会追加在url后面，最终生成 /pages/detail/index?name=wxbuf&id=123 params: { id: '123' }, // 使用body字段传递参数 body: { value: 1 }, success(page) { // 给被打开page设置字段 page.setData({ age: 18 }) } }) console.log(acceptVal) // '这是回传数据' } }) [代码] [代码]// pages/detail/index.js Page({ onLoad({ name, id, value }) { console.log(name) // 'wxbuf' console.log(id) // '123' console.log(value) // 1 }, async handleOk() { console.log(this.data.age) // 18 // 调用finish方法回传数据给父page，并且关闭当前页面 this.finish('这是回传数据') } }) [代码] 因此，可以指定[代码]params[代码]字段来代替字符串拼接，并且[代码]params[代码]中的字段还可以是对象，比自己拼接更方便；[代码]body[代码]方式则是通过内存传递参数 获取全局数据 [代码]wxbuf[代码]提供了实例方法[代码]getStore[代码]来获取全局数据 ，可以代替 [代码]getApp().globalData[key][代码] 例子： app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ globalData: { count: 1 } }) [代码] page.js: [代码]// page.js Page({ handleTap() { const count = this.getStore('count') // 相当于getApp().globalData.count console.log(count) // 1 } }) [代码] 修改全局数据 使用实例方法[代码]setStore[代码]来修改全局数据以获得响应式更新 例子： app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ globalData: { count: 1 } }) [代码] page.js: [代码]// page.js Page({ handleTap() { this.setStore('count', 2) console.log(getApp().globalData.count) // 2 } }) [代码] 使用响应式的全局数据 响应式全局数据的优点是可以自动更新视图，在构造器选项中配置[代码]mixinStore[代码]字段来将[代码]store[代码]的值设置到当前实例的data字段中，并且后续一直保持同步，即依赖的全局数据的[代码]key[代码]值一但变化，当前实例引用的值也跟着变化！ 如果需要实时保持一致，应当用此方式代替传统的[代码]getStore(key)[代码]或[代码]getApp().globalData.xxx[代码]的取值方式 例子： app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ globalData: { count: 1, appVersion: '1.0' } }) [代码] page.js: [代码]// page.js Page({ mixinStore: ['count', 'appVersion'], onLoad() { console.log(this.data.count) // 1 console.log(this.data.appVersion) // '1.0' }, handleTap() { this.setStore('count', 2) console.log(this.data.count) // 2 console.log(this.getStore('count')) // 2 console.log(getApp().globalData.count) // 2 } }) [代码] 使用响应式的storage 响应式[代码]storage[代码]的优点是可以自动更新视图，在构造器选项中配置[代码]mixinStorage[代码]字段来将[代码]storage[代码]的值设置到当前实例的data字段中，并且后续一值保持同步，这和[代码]mixinStore[代码]的机制一样，如果需要实时保持一致，应该放弃使用传统的[代码]wx.getStorage[代码]、[代码]wx.getStorageSync[代码]来取值，而应该用此方式 例子： [代码]// 假如 storage中 count=1, isLogin=true // page.js Page({ mixinStorage: ['count', 'isLogin'], onLoad() { console.log(this.data.count) // 1 console.log(this.data.isLogin) // true }, handleTap() { this.setStorageSync('count', 2) console.log(this.data.count) // 2 console.log(this.getStorageSync('count')) // 2 console.log(wx.getStorageSync('count')) // 2 } }) [代码] 全局注入store和storage到所有页面和组件 app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ // 全局注入store到所有页面、组件的实例上 injectStore: { // 注入到实例的命名空间（前缀） namespace: '$store', // 注入globalData中的哪些字段 keys: ['appVersion', 'appCount'], }, // 全局注入storage到所有页面、组件 injectStorage: { namespace: '$storage', // 注入storage中的哪些字段 keys: ['count'], }, globalData: { appVersion: 'v1.0', appCount: 0 }, onLaunch(){ } }) [代码] 接下来可以在任意页面或组件中访问这些状态数据，并且是响应式的 wxml: [代码]<view>{{$store.appCount}}</view> <view>{{$store.appVersion}}</view> <view>{{$storage.count}}</view> [代码] js: [代码] Page({ onLoad(){ console.log(this.data.$store) console.log(this.data.$storage) } }) [代码] 对store和storage进行变化监听 你可能不需要响应式的[代码]storage[代码]和[代码]store[代码]，但需要监听它们的变化，因此[代码]wxbuf[代码]提供了[代码]onStorageChange[代码]与[代码]onStoreChange[代码]回调钩子，可以使用它们来监听变化 例子： [代码] Page({ onStorageChange(kvs, oldKvs) { console.log(kvs) console.log(oldKvs) }, onStoreChange(kvs, oldKvs) { console.log(kvs) console.log(oldKvs) } }) [代码] 跨级传递数据 微信小程序中并没有提供跨组件层级传递数据的方法，要给嵌套较深的组件传递数据只能一层层定义[代码]properties[代码]来传递，这非常难受，而且使用全局数据来传递数据无法限定视图的组件tree，不过[代码]wxbuf[代码]提供了跨级传递数据的方法，通过[代码]provide[代码]与[代码]inject[代码]来进行跨级数据的传递，如果你了解vue，就知道vue也是通过这种方式来实现跨级传递数据的 例子： 宿主页面： [代码]// 宿主页面 Page({ provide: { rootName: '这是page数据', rootFn() { console.log('this is rootFn') } } }) [代码] 子组件： [代码]// 子组件 Component({ inject: ['rootName', 'rootFn'], lifetimes: { attached(){ console.log(this.data.rootName) // '这是page数据' this.rootFn() // 'this is rootFn' } } }) [代码] 从上面的例子可以看出，[代码]inject[代码]注入的数据如果是非函数，则会挂载到[代码]this.data[代码]上，否则挂载到[代码]this[代码]上。 [代码]provide[代码]除了可以写成对象以外，还可以写成函数的形式，该函数必须返回一个对象，这样就成为响应式的[代码]provide[代码]，即后代组件注入来自上层组件的数据发生变化后，自身也会更新 例子： 宿主页面： [代码]// 宿主页面 Page({ data: { number: 1 }, provide() { return { pageNumber: this.data.number } } }) [代码] 子组件： [代码]// 子组件 Component({ inject: ['pageNumber'], lifetimes: { attached(){ console.log(this.data.pageNumber) // 1 } } }) [代码] 要注意的是，小程序中的父子组件关系并不是[代码]jsx[代码]中的那种父子标签（slot）嵌套的关系，而是父组件在[代码]json[代码]文件中的[代码]usingComponents[代码]里导入了某个子组件，并且在[代码]wxml[代码]里使用了子组件，这样即形成父子组件关系，而将组件标签放在另一个组件的[代码]slot[代码]中并不形成父子关系 另一个要注意的是，只能在组件的[代码]attached[代码]及其之后的生命周期才能获取到[代码]inject[代码]的数据，因为只有在[代码]attached[代码]阶段才能确定其父组件是谁 计算属性 在构造器选项中声明[代码]computed[代码]字段来实现计算属性，计算属性字段会在[代码]this.data[代码]中生成对应的字段，这和[代码]vue[代码]中的[代码]computed[代码]一样 例子： wxml： [代码]<view>{{ ageDesc }}</view> [代码] js： [代码]Page({ data: { age: 18 } computed: { // 将在this.data中生成ageDesc ageDesc() { return '你的年龄是' + this.data.age } }, handleTap() { this.setData({ age: 19 }) console.log(this.data.ageDesc) // 你的年龄是19 } }) [代码] 页面的observers page支持[代码]observers[代码]了，在构造器选项中声明[代码]observers[代码]来监听[代码]data[代码]对象中某个字段值的变化，和[代码]compontent[代码]中的[代码]observers[代码]功能一样 例子： [代码]Page({ data: { count: 1 } observers: { count(newVal, oldVal) { //... } }, handleTap() { this.setData({ count: 2 }) } }) [代码] 类似vue中的 {{ var | filter }} 过滤器功能实现 小程序中视图层变量绑定并没有过滤器功能，[代码]wxs[代码]的语法又比较受限，要想自己实现[代码]{{ var | filter }}[代码]这样的语法是不行的，但我们通过自定义一个组件能达到相似的过滤器效果，从此告别[代码]wxs[代码] 定义一个全局过滤器组件 在[代码]app.json[代码]中声明一个全局组件，就叫[代码]c-text[代码]，接下来实现这个组件： c-text.wxml: [代码]{{text}} [代码] c-text.js: [代码] Component({ externalClasses: ["class"], options: { virtualHost: true, }, properties: { value: { optionalTypes: [String, Number, Object, Array, Boolean, null] }, // 过滤器函数名 filter: String, // 过滤器参数 params: { optionalTypes: [String, Number, Object, Array, Boolean, null] } }, observers: { "filter,params,value"() { this.render() }, }, lifetimes: { attached() { this.render() }, }, data: { text: "", }, methods: { render() { const { value, filter, params } = this.data let text = value if (filter) { // 获取过滤器函数 const handler = this.$parent[filter] const _params = Array.isArray(params) ? params : [params] if (handler) { text = handler.call(this.$parent, value, ..._params) } } this.setData({ text: text ?? "" }) }, }, }) [代码] 现在我们就可以使用这个组件来使用过滤器功能了 基出用法 wxml: [代码]<c-text value="{{timeStamp}}" /> [代码] [代码] Page({ data: { timeStamp: 1714123672808 } }) [代码] 以上是一个普通的显示，和以下写法没什么区别: [代码]{{timeStamp}} [代码] 指定过滤器 wxml: [代码]<c-text value="{{timeStamp}}" filter="formatDate" /> [代码] [代码]Page({ data: { timeStamp: 1714123672808 }, formatDate(value) { return dayjs(value).format('YYYY-MM-DD') } }) [代码] 指定过滤器的参数 [代码]params[代码]属性指定传递给过滤器的参数 wxml: [代码]<c-text value="{{timeStamp}}" filter="formatDate" params="YYYY-MM-DD HH:mm:ss" /> [代码] [代码]Page({ data: { timeStamp: 1714123672808 }, formatDate(value, format) { return dayjs(value).format(format) } }) [代码] [代码]params[代码]属性也可以是一个数组: wxml: [代码]<c-text value="{{timeStamp}}" filter="formatDate" params="{{ ['YYYY-MM-DD HH:mm:ss', '-'] }}" /> [代码] [代码]Page({ data: { timeStamp: '', }, formatDate(value, format, defaultValue) { return value ? dayjs(value).format(format) : defaultValue } }) [代码] 全局路由拦截 在[代码]app[代码]文件中通过[代码]beforePageEnter[代码]可以进行全局路由守卫，返回[代码]布尔值[代码]来决定是否拦截某个页面 例子： app.js: [代码]import wxbuf from 'wxbuf' App({ beforePageEnter(options) { return false } }) [代码] 注意的是，[代码]beforePageEnter[代码]无法拦截[代码]Launch[代码]进来的页面，即无法拦截通过正常启动或外链打开小程序等其它非js调用进入的页面，只能拦截通过js调用打开的页面 全局对wxml视图层事件监听或拦截 可以在app.js中对所有的page和组件的视图层事件进行监听和拦截 基础的监听 page.wxml: [代码] <view bindtap="handleTap" data-name="wxbuf"></view> [代码] page.js: [代码]Page({ handleTap(event) { //... } }) [代码] app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ onEventDispatch(event, next) { console.log(event.currentTarget.dataset.name) // 'wxbuf' // 继续执行原始的事件handler next(event) }, }) [代码] 当page中的[代码]view[代码]元素被点击时，会先调用[代码]app[代码]中的[代码]onEventDispatch[代码]钩子，[代码]event[代码]对象为原始的事件[代码]event[代码]，可以利用此对象获取被点击元素的信息，常见的应用场景如全局埋点上报功能。 [代码]next[代码]是一个函数，调用它并传入[代码]event[代码]对象让页面上的原始的事件[代码]handler[代码]正常执行，并且必须原封不动的传入[代码]event[代码]对象，否则可能引起原始的事件[代码]handler[代码]不能接收到[代码]event[代码]对象参数 对视图层事件进行拦截 page.wxml: [代码] <view bindtap="handleTap" data-not-allowed="{{true}}"></view> [代码] page.js: [代码]Page({ handleTap(event) { wx.showToast({ title: '正常执行' }) } }) [代码] app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ onEventDispatch(event, next) { if(event.currentTarget.dataset.notAllowed){ wx.showToast({ title: '没有权限' }) // 不调用next(event)则不执行原始的事件handler } else { // 继续执行原始的事件handler next(event) } }, }) [代码] 当page中的[代码]view[代码]元素被点击时，会弹出[代码]没有权限[代码]的toast提示，原始的事件[代码]handler[代码]被拦截无法执行 减少event.currentTarget.dataset解构层数 日常开发中经常会在某个元素上自定义[代码]data-[代码]的数据，并在事件处理函数中通过[代码]event.currentTarget.dataset.xxx[代码]来获取这些数据，每次都很繁琐， 利用[代码]onEventDispatch[代码]钩子可以减少取[代码]dataset[代码]的层数 page.wxml: [代码] <view bindtap="handleTap" data-name="wxbuf" data-id="123"></view> [代码] page.js: [代码]Page({ handleTap(e, { id, name }) { console.log(id) // '123' console.log(name) // 'wxbuf' } }) [代码] app.js: [代码]// app.js import wxbuf from 'wxbuf' App({ onEventDispatch(event, next) { // 将第二个参数传递给原始的事件handler next(event, event.currentTarget.dataset) }, }) [代码] 全局顶层变量定义 可以在app中使用[代码]wxbuf.global.extend[代码]定义一些顶层全局变量，在其它文件中无需import即可使用 例子： app.js: [代码]// app.js import wxbuf from 'wxbuf' wxbuf.global.extend('getAppVersion',function(){ return 'v1.0.0' }) App({ globalData: {}, onLaunch() {} // ... }) [代码] pageA.js: [代码]// pageA.js Page({ onLoad() { console.log(getAppVersion()) // 'v1.0.0' } }) [代码] 全局给page或componet的实例扩展方法 使用[代码]wxbuf.page.extend[代码] 或 [代码]wxbuf.component.extend[代码] 分别给[代码]page[代码]和[代码]component[代码]实例挂载公共方法 例子： app.js: [代码]// app.js import wxbuf from 'wxbuf' wxbuf.page.extend({ getData(key){ return this.data[key] } }) App({ globalData: {}, onLaunch() {} // ... }) [代码] pageA.js: [代码]// pageA.js Page({ data: { name: 'wxbuf is a library' }, onLoad() { const name = this.getData('name') console.log(name) // 'wxbuf is a library' } }) [代码] 组件更多的pageLifetimes支持 现在增加了一些pageLifeTimes，组件逻辑再也不用和页面耦合起来了 pageLifeTimes.pullDownRefresh 所在页面onPullDownRefresh pageLifeTimes.reachBottom 所在页面onReachBottom pageLifeTimes.pageScroll 所在页面onPageScroll pageLifeTimes.switchTab 所在tabbar页面发生onSwitchTab时调用 github仓库 还有更多功能是文章中未列举的，具体请查看 github仓库地址 https://github.com/laivv/wxbuf 作者做了十年前端开发，关注我，获取更多实用的小程序开发技巧

首先，我们知道，可以通过button中的属性open-type="contact"，实现小程序用户和小程序所有者客服对话。 客服/button> 在没有任何程序干预的情况下， 客服消息可直接在网页版客服工具（https://mpkf.weixin.qq.com/）和小程序版客服工具（客服小助 手）查看并回复用户消息。 但是，有时有特殊需求，比如： 1、用户打开客服会话，默认给出提示信息 2、需要自定义客服消息，类似电话语音输入1,2,3出现对应回复的功能 3、能否同时兼容自动和人工客服 [图片] 本文以云函数自定义消息为例： 1、小程序新建两个云函数 1）message-auto（默认进入客服会话的消息处理） 2）message（用户输入后触发的消息处理） 2、在云函数设置中关联 云函数--设置--全局设置，打开云函数接收消息推送，如下图绑定： [图片] 3、代码实现 此处为了避免每次进入客户会话，默认发送提示消息给用户造成困扰，建议存库处理，避免重复发送，至于多久发送一次，由开发者自行处理存库逻辑。 message-auto/index.js // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const db = cloud.database() const contentArr = ["输入数字可以获得帮助哦~", "1 怎么知道是否中奖？", "2 如何兑换奖励？", "3 实物如何兑奖？"] // 云函数入口函数 exports.main = async (event, context) => {   const wxContext = cloud.getWXContext()   let openid = wxContext.OPENID    // 查看是否发送过    let res = await db.collection('message_auto')    .where({      openid: openid    })    .get()    console.log("message_auto res: ", res)    if(res.data && res.data.length > 0){      return    }   let messageResult = await cloud.openapi.customerServiceMessage.send({     touser: openid,     msgtype: 'text',     text: {       content: contentArr.join("\n"),     },   })   console.log("message_auto send res: ", messageResult)   if(messageResult.errCode == 0){     let messageAddRes = await db.collection('message_auto').add({       data: {         "openid": openid,         "create_time": new Date()       }     })     console.log('messageAddRes: ', messageAddRes)   } } 在用户输入后，校验是否满足自动回复消息条件（输入非1,2,3），可通过transfer_customer_service直接转由人工处理，这样相同于同时兼容了自动和人工客服，如示例中，“你好”会自动转人工处理。 message/index.js // 云函数入口文件 const cloud = require('wx-server-sdk') cloud.init() const contentArr = ["开奖后，会公告中奖用户和对应奖励，并发送中奖通知", "奖励会在您发送兑奖信息后24小时内兑换", "填写好收件人信息，48小时内发货（暂不支持港澳台、新疆、西藏等地区）"] // 云函数入口函数 exports.main = async (event, context) => {   console.log('message event:', event)   let content = event.Content   if(!content || !content.trim()){     console.log('message can not be empty!')     return   }   if(!isNaN(content) && content % 1 == 0 && content > 0 && content <= contentArr.length){     let res = cloud.openapi.customerServiceMessage.send({       touser: event.FromUserName,       msgtype: 'text',       text: {         content: contentArr[content - 1],       },     })     return   }   return {     MsgType: 'transfer_customer_service',     ToUserName: event.FromUserName,     FromUserName: event.ToUserName,     CreateTime: parseInt(+new Date / 1000),   } } 代码粗糙，多多指教！ ^_^

背景 我们发现大部分小程序都会使用 [代码]wx.getUserInfo[代码] 接口，来获取用户信息。原本设计这个接口时，我们希望开发者在真正需要用户信息的情况下才去调取这个接口，但很多开发者会直接调用这个接口，导致用户在使用小程序的时候产生困扰，归结起来有几点： 开发者在小程序首页直接调用 [代码]wx.getUserInfo[代码] 进行授权，弹框获取用户信息，会使得一部分用户点击“拒绝”按钮。 在开发者没有处理用户拒绝弹框的情况下，用户必须授权头像昵称等信息才能继续使用小程序，会导致某些用户放弃使用该小程序。 用户没有很好的方式重新授权，尽管我们增加了[代码]设置[代码]页面，可以让用户选择重新授权，但很多用户并不知道可以这么操作。 此外，我们发现开发者默认将 [代码]wx.login[代码] 和 [代码]wx.getUserInfo[代码] 绑定使用，这个是由于我们一开始的设计缺陷和实例代码导致的（[代码]wx.getUserInfo[代码] 必须通过 [代码]wx.login[代码] 在后台生成 [代码]session_key[代码]后才能调用）。同时，我们收到开发者的反馈，希望用户进入小程序首页便能获取到用户的 [代码]unionId[代码]，以便识别到用户是否以前关注了同主体公众号或使用过同主体的App 。 为了解决以上问题，针对获取用户信息我们更新了三个能力： 1.使用组件来获取用户信息 2.若用户满足一定条件，则可以用[代码]wx.login[代码] 获取到的[代码]code[代码]直接换到[代码]unionId[代码] 3.[代码]wx.getUserInfo[代码] 不需要依赖 [代码]wx.login[代码] 就能调用得到数据 获取用户信息组件介绍 [代码][代码] 组件变化： [代码]open-type [代码]属性增加 [代码]getUserInfo[代码] ：用户点击时候会触发 [代码]bindgetuserinfo[代码] 事件。 新增事件 [代码]bindgetuserinfo[代码] ：当 [代码]open-type[代码]为 [代码]getUserInfo[代码] 时，用户点击会触发。可以从事件返回参数的 [代码]detail[代码] 字段中获取到和 [代码]wx.getUserInfo[代码] 返回参数相同的数据。 示例： [代码]<button open-type="getUserInfo" bindgetuserinfo="userInfoHandler"> Click me button>[代码]和 [代码]wx.getUserInfo[代码] 不同之处在于： 1.API [代码]wx.getUserInfo[代码] 只会弹一次框，用户拒绝授权之后，再次调用将不会弹框； 2.组件 [代码][代码][代码][代码] 由于是用户主动触发，不受弹框次数限制，只要用户没有授权，都会再次弹框。 通过获取用户信息的组件，就可以解决用户再次授权的问题。 直接获取unionId开发者申请 [代码]userinfo[代码] 授权主要为了获取 [代码]unionid[代码]，我们鼓励开发者在不骚扰用户的情况下合理获得[代码]unionid[代码]，而仅在必要时才向用户弹窗申请使用昵称头像。为此，凡使用“获取用户信息组件”获取用户昵称头像的小程序，在满足以下全部条件时，将可以静默获得 [代码]unionid[代码]： 1.在微信开放平台下存在同主体的App、公众号、小程序。 2.用户关注了某个相同主体公众号，或曾经在某个相同主体App、公众号上进行过微信登录授权。 这样可让其他同主体的App、公众号、小程序的开发者快速获得已有用户的数据。 不依赖登录的用户信息获取某些工具类的轻量小程序不需要登录行为，但是也想获取用户信息，那么就可以在 [代码]wx.getUserInfo[代码] 的时候加一个参数 [代码]withCredentials: false[代码] 直接获取到用户信息，可以少一次网络请求。 这样可以在不给用户弹窗授权的情况下直接展示用户的信息。 最佳实践 1.调用 [代码]wx.login[代码] 获取 [代码]code[代码]，然后从微信后端换取到 [代码]session_key[代码]，用于解密 [代码]getUserInfo[代码]返回的敏感数据。 2.使用 [代码]wx.getSetting[代码] 获取用户的授权情况  1) 如果用户已经授权，直接调用 API [代码]wx.getUserInfo[代码] 获取用户最新的信息；  2) 用户未授权，在界面中显示一个按钮提示用户登入，当用户点击并授权后就获取到用户的最新信息。 3.获取到用户数据后可以进行展示或者发送给自己的后端。 One More Thing 除了获取用户方案介绍之外，再聊一聊很多初次接触微信小程序的开发者所不容易理解的一些概念： 1.关于OpenId和UnionId [代码]OpenId[代码] 是一个用户对于一个小程序／公众号的标识，开发者可以通过这个标识识别出用户。 [代码]UnionId[代码] 是一个用户对于同主体微信小程序／公众号／APP的标识，开发者需要在微信开放平台下绑定相同账号的主体。开发者可通过[代码]UnionId[代码]，实现多个小程序、公众号、甚至APP 之间的数据互通了。 同一个用户的这两个 ID 对于同一个小程序来说是永久不变的，就算用户删了小程序，下次用户进入小程序，开发者依旧可以通过后台的记录标识出来。 2.关于 getUserInfo 和 login 很多开发者会把 [代码]login[代码] 和 [代码]getUserInfo[代码] 捆绑调用当成登录使用，其实 [代码]login[代码] 已经可以完成登录，[代码]getUserInfo[代码] 只是获取额外的用户信息。 在 [代码]login[代码] 获取到 [代码]code[代码] 后，会发送到开发者后端，开发者后端通过接口去微信后端换取到 [代码]openid[代码] 和[代码]sessionKey[代码]（现在会将 [代码]unionid[代码] 也一并返回）后，把自定义登录态 [代码]3rd_session[代码]返回给前端，就已经完成登录行为了。而 [代码]login[代码] 行为是静默，不必授权的，用户不会察觉。 [代码]getUserInfo[代码] 只是为了提供更优质的服务而存在，比如展示头像昵称，判断性别，开发者可通过 [代码]unionId[代码] 和其他公众号上已有的用户画像结合来提供历史数据。因此开发者不必在用户刚刚进入小程序的时候就强制要求授权。 可以在官方的文档中看到 [代码]login[代码] 的最佳实践： [图片] Q & A Q1: 为什么 login 的时候不直接返回 openid，而是要用这么复杂的方式来经过后台好几层处理之后才能拿到？ A: 为了防止坏人在网络链路上做手脚，所以小程序端请求开发者服务器的的请求都需要二次验证才是可信的。因为我们采取了小程序端只给 [代码]code[代码] ，由服务器端拿着 [代码]code[代码] 和 [代码]AppSecrect[代码] 去微信服务器请求的方式，才会给到开发者对应的[代码]openId[代码] 和用于加解密的 [代码]session_key。[代码] Q2: 既然用户的[代码]openId[代码] 是永远不变的，那么开发者可以使用[代码]openId[代码] 作为用户的登录态么？ A: 不行，这是非常危险的行为。因为 [代码]openId[代码] 是不变的，如果有坏人拿着别人的 [代码]openId[代码] 来进行请求，那么就会出现冒充的情况。所以我们建议开发者可以自己在后台生成一个拥有有效期的 [代码]第三方session[代码] 来做登录态，用户每隔一段时间都需要进行更新以保障数据的安全性。 Q3: 是不是用户每次打开小程序都需要重新[代码]login[代码]？ A: 不必，可以将登录态存入[代码]storage[代码]中，用户再次登录就可以拿[代码]storage[代码] 里的登录态做正常的业务请求，只有当登录态过期了之后才需要重新[代码]login[代码] 。这样子做一则可以减少用户等待时间，二则可以减少网络带宽。 目前微信的[代码]session_key[代码] 有效期是三天，所以建议开发者设置的登录态有效期要小于这个值。