微信小程序的授权登录

1、授权登录的页面基本实现:
1)、这个是.xml页面的样式:

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class='content'>
      <view class="contentText">申请获取以下权限</view>
      <text>获得你的公开信息(昵称,头像等)</text>
  </view>
  <button class='bottom' type='primary' open-type="getUserInfo"  bindgetuserinfo="getUserInfo">
        授权登录
  </button>
</view>

```现在的微信小程序不能直接进入获取个人基本信息,必须通过button标签触发函数来获取,所以这个“getUserInfo”
函数是核心函数,





<div class="se-preview-section-delimiter"></div>

这里写代码片
“`

getUserInfo: function(e) {
    var that = this;
    console.log(e.detail.userInfo);
    if (e.detail.userInfo) {
      wx.login({
        success: res => {
          //console.log(res.code, e.detail.iv, e.detail.encryptedData)
          //console.log(e.detail.userInfo)
          wx.request({
            //后台接口地址
            url: 'http://5849124c.ngrok.io/mollymall/authorize',   //这个是写自己后台提供的api接口
            data: {
              code: res.code,
              // nickname: e.detail.userInfo.nickName,
              // sex: e.detail.userInfo.gender,
              // country: e.detail.userInfo.country,
              // province: e.detail.userInfo.province,
              // city: e.detail.userInfo.city,
              // headurl: e.detail.userInfo.avatarUrl,
              iv: e.detail.iv,
              encryptedData: e.detail.encryptedData
            },
            method: 'POST',
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
              console.log(res);
              if(res.statusCode == 200){
                wx.setStorageSync("mollySession", res.data.data);//可以把openid保存起来,以便后期需求的使用
                wx.redirectTo({
                  url: "/pages/subscriber/subscriber"
                })
              }else{
                wx.redirectTo({
                  url: "/pages/login/login"
                })
              }
            }
          })
        }
      })

    }else{
      console.log(333, '测试而已!')
      wx.showToast({
        title: "为了您更好的体验,请先同意授权",
        icon: 'none'

      });
    }
    //跳转到另一个页面
    // wx.navigateTo({
    //     url: "/pages/index/index"
    // })
    //console.log(e);
  }

接着触发这个getUserInfo里面要调用微信的wx.login({})这个函数才能获取在授权登录需要传过去的code、iv、encryptedData参数;基本的就操作完成了

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值