微信小程序登录

步骤一:调用login函数拿到code、iv、encryptedData,然后调用后端接口把code、iv、encryptedData传给后端,后端返回openid,后端的code=0是新用户需要注册,在拿到用户的手机号 。code=1是老用户,拿到token直接登录
步骤二:当code等于0的时候,在页面上需要添加一个获取手机号的按钮,通过按钮的事件 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"    来获取用户手机号
步骤三:当拿到了用户的手机号,在步骤一的时候拿到了openid,把手机号和openid,调用后端接口然后后端返回token,存入本地
 
登录成功

部分HTML的代码

就是一开始是确定登录的按钮,如果是新用户就需要把确定登录的按钮变成获取用户手机号的按钮,然后来通过按钮的原生事件来获取手机号

<view class="agreement flex">
            <view class="yuan"></view>
            <view class="consts">
                微信授权将获取您的公开信息(头像、昵称等)注册登录
            </view>
        </view>
        <view class="butbox">
            <view class="but1 flex-center" @click="login" v-if="isbut">
                <image  :src="`${IMG_HOST}/image/weixin.png`" mode=""></image>
                <view class="text ">
                    微信授权登录
                </view>
            </view>
            <button type="default" class="but1 logbut" v-else  open-type="getPhoneNumber"
          @getphonenumber="getPhoneNumber">获取手机号</button>
            <view class="but2" @click="nologin">
                暂不登录
            </view>
            <!-- <button bindtap="login">登录</button> -->
      </view>
data() {
            return {
                isbut:true,
                // 获取code值
                loginInfo: {
                      code: '',
                      iv: '',
                      rawData:'',
                      encryptedData: '',
                      openid:'',
                      session_key:''
                },
                // 获取手机号
                 params: {
                     loginInfo:''
                 },
                // 注册小程序
                register:{
                    mobile:'',
                    open_id:''
                }
                
            }
        },

// 点击登录
        login(){
            console.log(1);
              let that = this
              
                //调用微信小程序的登录接口
               wx.login({
                  success(e) {
                      // console.log(e);
                    that.loginInfo.code = e.code //拿到的code存储在data中
              that.loginInfo.iv = e.iv
              that.loginInfo.encryptedData = e.encryptedData
                     console.log(that.loginInfo);
                    wx.showModal({
                      title: '温馨提示',
                      content: '微信授权登录后才能正常使用小程序功能',
                      cancelText: '拒绝',
                      confirmText: '同意',
                      success( sucessInfo ) {
                        //调用微信小程序的获取用户信息的接口
                        wx.getUserProfile({
                          desc: '用于完善会员资料', // 声明获取用户个人信息后的用途
                          lang: 'zh_CN',
                          
                          success:(info)=> {
                              console.log('info111',info);
           //    `````````````````````````````````````````````
                              // 调用后台接口拿到openid
                              postLogin(
                                  {code:that.loginInfo.code,iv:that.loginInfo.iv,encryptedData:that.loginInfo.encryptedData},
                              ).then((res)=>{
                                  console.log('22',res);
                    // code==1为已注册直接登录
                                  if(res.data.code===1){
                                      console.log(res.data.code);
                                      uni.setStorage({
                                          key:"token",
                                          data:res.data.msg,
                                          success: function (){
                                              console.log("存储成功")
                                          }
                                      })
                                      // 返回上一页
                                      let pages = getCurrentPages(); // 当前页面
                                      let beforePage = pages[pages.length - 2]; // 上一页
                                      uni.navigateBack({
                                          success: function() {
                                              beforePage.onLoad(); // 执行上一页的onLoad方法
                                          }
                                      });
          // code==0是新用户需要注册,拿到open_id和session_key,把登录按钮改成获取手机号的按钮
                                  }else if(res.data.code===0){
                                      console.log('fff');
                                      that.register.open_id=res.data.msg.openid
                                      that.params.session_key=res.data.msg.session_key
                                      // console.log(that.params.session_key);
                                      that.isbut=false
                                  }
                                 console.log('res.data',res.data);
                                 
                              })
                              
                              
                            //把获取到的信息复制到data中的loginInfo中
                            that.loginInfo = Object.assign( that.loginInfo, info )
                            // 个人信息
                            uni.setStorage({
                                key:"login",
                                data:that.loginInfo.userInfo,
                                success: function (){
                                    console.log("存储成功")
                                }
                            })
                            uni.getStorage({
                                key:"login",
                                success: function(res){
                                    console.log(res.data); //123456789
                                }
                            })
                            //调用后台的接口,把所有整合的个人信息传过去
                            // that.handlerLogin( that.loginInfo )
                          },
                          fail(e) {
                            console.log('获取用户信息失败', e)
                            
                          }
                        })
                      },
                      fail() {
                        console.log("拒绝")
                      },
                      complete() {}
                    })
             
                  },
                  fail(e) {
                    console.log('fail', e)
                    wx.showToast({
                      title: '网络异常',
                      duration: 2000
                    })
                    return
                  }
                })
             
            }

        // 获取手机号
        getPhoneNumber(e){
            console.log(e.detail);
             this.params.encryptedData = e.detail.encryptedData;    
             this.params.iv = e.detail.iv;
             this.LoginPhone()
        },
        // 获取到了手机号
        LoginPhone(){
        
            console.log(this.params);
                postLoginPhone(this.params).then((res)=>{
                  console.log('phone',res.data);
                  this.register.mobile=res.data.msg.phoneNumber
                  console.log(this.register);
                  // 小程序注册
                  this.LoginRegister()
                })
            },




        // 小程序注册
        LoginRegister(){
            postLoginRegister(this.register).then(res=>{
                console.log('注册',res.data);
                uni.setStorage({
                    key:"token",
                    data:res.data.msg,
                    success: function (){
                        console.log("存储成功")
                    }
                })

           // 返回上一页,并且更新onLoad()中的方法
                let pages = getCurrentPages(); // 当前页面
                let beforePage = pages[pages.length - 2]; // 上一页
                uni.navigateBack({
                    success: function() {
                        beforePage.onLoad(); // 执行上一页的onLoad方法
                    }
                });

            })
        },

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值