本项目使用的是mpvue(使用微信小程序原生开发一个道理)
在app.vue文件create钩子函数里:

// 主要是为了获取code
wx.login({
  success (res) {
    if (res.code) {
      // 封装的缓存方法
      that.$wxhttp.cache('code', res.code)
    } else {
      console.log('登录失败!' + res.errMsg)
    }
  }
})
// 获取用户的当前设置。本项目里判断用户是否已授权登录
wx.getSetting({
  success (res) {
    if (res.authSetting['scope.userInfo']) {
      wx.getUserInfo({
        success: function (res) {
        // 如果用户已经授权则会调用该方法
          that.$wxhttp.authSuccessReq(res)
        }
      })
    } else {
      console.error('用户没有授权')
    }
  }
})

// 从后台获取openid等参数信息
function authSuccessReq (data) {
  return new Promise((resolve, reject) => {
    if (!wx.getStorageSync('userInfo').openid) {
      wx.request({
        url:'',
        method: 'POST',
        data: {
          encryptedData: data.encryptedData,
          code: wx.getStorageSync('code'),
          iv: data.iv,
        },
        success: function (info) {
          let userInfo = data.userInfo
          。。。。。
          resolve(userInfo)
        },
        fail (res) {
          reject(res)
        }
      })
    } else {
      resolve(wx.getStorageSync('userInfo'))
    }
  })
}

如果用户还没有登录过,则

<button v-if="!auth" open-type="getUserInfo" @getuserinfo="getUserInfo">立即预约</button>
<button v-else form-type="submit">立即预约</button>

如果没有登录则用open-type=“getUserInfo” 如果已经登录过则用普通的button。auth是用来判断是否登录的
登录成功后会在getUserInfo方法中继续调用authSuccessReq方法获取openid

Logo

前往低代码交流专区

更多推荐