10小程序的授权登录

导读:本篇文章讲解 10小程序的授权登录,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

个人授权

1.小程序只要第一次授权后,以后该就不用授权了
2.小程序支持ES5、ES6等

center.wxml

<!-- -----------------授权--------------------- -->
<!-- !users是storage不为空 -->
<view wx:if="{{ !users }}">
  <!-- open-type、getUserInfo、bindgetuserinfo 是固定的(官方) -->
  <button open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权</button>
</view>
<!-- 如果storage为空 -->
<view wx:else>
  <!-- 显示头像 -->
  <view style="text-align: center">
    <image src="{{ users.avatarUrl }}"></image>
  </view>
  <!-- 显示昵称 -->
  <view>{{ users.nickName }}</view>
</view>

center.js

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 把storage数据取出来,同步到users
    this.setData({
      users: wx.getStorageSync('users')
    })
  },

  // 授权
  handleGetUserInfo (data) { // 第一次授权会弹出是否授权的提示框
    // 把JSON数据转为普通对象
    let obj = JSON.parse(data.detail.rawData)
    this.setData({
      users: obj
    })
    // 存储storage
    wx.setStorageSync('isLogin', true)
    wx.setStorageSync('users', obj)
  }
})

center.wxss

image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/4556.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!