如何优雅的获取用户授权_muchan92的专栏文章_微信文章

言而有信，这篇文章来啦~

小程序 只有在需要时才获取用户授权。
这是一个很普遍、很合理的可以提高用户体验的需求，但是一般实现起来却并不简单，不知道大家都是怎么处理的，是否愉快，反正我第一次面对小程序的 API 时，是非常难受的。

幸好，经过一番思考，找到了一种优雅的实现方案。（绝对 muchan92 风格）
代码如诗，这个方案优雅到不必赘述，直接看代码就好了。

<template>
  <view>
    <button :open-type="xdata.requireUser" @getuserinfo="getuserinfo"
      @click="clockin">打卡（演示小程序获取授权）</button>
  </view>
<template>

<script>
export default {
  data() {
    return {
    }
  },
  methods: {
    async clockin() {
      // 如果没有授权过，会自动唤起授权，
      // 同时，如果用户同意授权，那么会一并执行后续的逻辑（用户不再需要点击两次）
      // #ifdef MP-WEIXIN
      if (await uni.$requireUser()) {
        return
      }
      // #endif

      // TODO: 调用接口等
      uni.showToast({ title: '打卡成功' })
    },
  },
}
</script>
复制代码

代码如诗，自述实现。

// #ifdef MP-WEIXIN
let requireUserPromise = null
let requireUserResolve = null
uni.$requireUser = async () => {
  return requireUserPromise = requireUserPromise || new Promise((resolve) => {
    requireUserResolve = resolve
    // 已经授权过（适用于第一次调用）
    if (!uni.$xdata.requireUser) {
      resolve(false)
    }
  })
}
// #endif

uni.$xdata = {
  requireUser: 'getUserInfo', // TODO: 第一次应该根据后台数据，判断是否已经授权过，若已授权则应设置为 ''
}

Vue.use(function (Vue, options) {
  Vue.mixin({
    data() {
      return {
        xdata: uni.$xdata,
      }
    },
  })

  Object.assign(Vue.prototype, {
    // #ifdef MP-WEIXIN
    async getuserinfo({ detail }) {
      uni.$requireUser()
      if (detail.errMsg == 'getUserInfo:ok') {
        // TODO: 同步用户信息 detail.userInfo
        uni.$xdata.requireUser = '' // 标记无需再次获取授权
        requireUserResolve(false)
      } else {
        requireUserPromise = null // 置空，以便可以再次唤起授权
        requireUserResolve(true)
      }
    },
    // #endif
  })
})
复制代码

如何优雅的获取用户授权

如何优雅的获取用户授权

关注作者，会有更多 muchan92 风格

相关链接