微信小程序 用户授权登录

微信小程序弹窗授权,使用 button 组件,并将 open-type 指定为 getUserInfo 类型,获取用户基本信息。
自己练手写的代码,有可能实际项目中这种写法不能通过审核,代码如下:
wxml:

<view wx:if="{{isHide}}">
    <view wx:if="{{canIUse}}" >
        <view class='header'>
            <image src='images/img.jpg' mode="aspectFit" ></image>
        </view>
 
        <view class='content'>
            <view>申请获取以下权限</view>
            <text>获得你的公开信息(昵称,头像,地区等)</text>
        </view>
 
        <button class='btn' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
            授权登录
        </button>
        <button class="btn">取消</button>
        
    </view>
    <view wx:else>请升级微信版本</view>
</view>
 
<view wx:else>
    <view>想要展示的内容</view>
</view>

wxss:

.header {
  width: 100%;
  padding: 100rpx;
  margin-bottom: 50rpx;
  border-bottom: 1rpx solid #ccc;
  text-align: center;
  box-sizing: border-box;
}

.header image {
  width: 300rpx;
  height: 300rpx;
}

.content {
  margin-left: 50rpx;
  margin-bottom: 90rpx;
}

.content text {
  display: block;
  color: #9d9d9d;
  margin-top: 40rpx;
}

.btn {
  border-radius: 20rpx;
  margin: 70rpx 50rpx;
  font-size: 35rpx;
}

js

 data: {
    //判断小程序的API,回调,参数,组件等是否在当前版本可用。
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    isHide: true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    //查看是否授权
    wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          console.log("用户授权了");
        } else {
          //用户没有授权
          console.log("用户没有授权");
        }
      }
    });
  },

  //授权登录事件
  bindGetUserInfo: function (e) {
    if (e.detail.userInfo) {
      //用户点击了允许按钮
      var that = this;
      // 获取到用户的信息了,打印到控制台上看下
      console.log("用户的信息如下:");
      console.log(e.detail.userInfo);
      //授权成功后,通过改变 isHide 的值,让实现页面显示出来,把授权页面隐藏起来
      that.setData({
        isHide: false
      });
    } else {
      //用户按了取消按钮
      console.log("用户选择取消")
      return false
    }
  },

PS:查看有些小程序,授权页是一个单独页面,譬如:一位新用户a 进入一个购物类的小程序,商品展示那些页面都能正常浏览,当用户a 有购买操作时,会提示他没有授权登录,就会跳转到用户授权登录页,用户a点击弹窗的允许授权则返回上一页,如果选择取消就留在当前页,不进行任何操作。

PSPS: 微信小程序还有一种授权方式,叫做静默授权。【对于这个知识点自己也是不太清楚,后续如果了解清楚了再补充。】
静默授权不需要用户确认,只需要用户访问某个网页,属于嵌套在普通网页里的授权形式,但是只能获取到用户的唯一标示openid和union id,无法拿到用户的微信头像、微信名称等个人信息,对于用户的简单认证还是很有用的。

发布了20 篇原创文章 · 获赞 1 · 访问量 7742
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览