uni-app之新版方式微信登录(最基本的方式)[记录一波,以方便自己未来查询或者帮助其他朋友]

1,663 阅读1分钟

小程序最新版本 微信授权登录小程序 预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息 这也是为什么button的开放能力无法弹窗的原因。 取而代之的是用wx.getUserProfile来获取用户信息。这难道就是传说中的用户体验?

1625490590(1).jpg

今天收到被微信收到小程序未通过的消息,其中有一条就是因为,未按照新版要求进行微信登录的操作,而被拒之,所以在下午,就查询了文档等来解决这个问题,其中出现了2个问题,(我这边用的是uni-app的方式)

  1. 在uni.login()方法中拿到code之后,再调用 uni.getUserProfile()后,会进入(无论在模拟器还是在真机上面,都会走fail()中去:error msg: ''getUserProfile:fail can only be invoked by user TAP gesture"),是不能在login()方法中去进行使用,应该进行分开处理这2个问题,代码如下

html模板部分

<u-button  hover-class="none"  @click="getUserProfile"
                   open-type="getUserProfile"
                   type="primary" size="default"
        >
          <text>微信登录</text>
        </u-button>

js逻辑部分

data() {
    return {
      code:'',//微信登录code
    }
},
 mounted(){
    //进入页面,获取微信登录的code码
    this.wxLogin()
},
methods:{
//获取微信登录code
//不用手动去解决这个方法
      wxLogin(){
        uni.login({
          provider: 'weixin',
          success: wxRes=>{
            const {code}= wxRes
            if(code){
              this.code = code
            }
          },
          fail:e=>{
            this.$rules.ruleToastFun(
                {
                  title:'登录失败'
                }
            )
          }
        })
      },
         //微信登录
      getUserProfile(e){
         //getUserProfile中的success方法会返回用户的比如头像,昵称之类的字段
        if(this.code){
          uni.getUserProfile({
            desc: '获取授权',
            success:res=>{
              //当成功时的逻辑
            },
            fail:e=>{
              //失败时的逻辑
            }
          })
        }
      },
}
   

getuserprofile的uni app文档介绍进入

getuserprofile的wx微信端文档介绍进入