微信小程序之授权登录的实现（button按钮）

2.界面简介

3.源码 authorize.html

<view wx:if="{ {canIUse}}"> <view class=header> <image src=/images/wx_login.png></image> </view>

<view class=content> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称，头像等)</text> </view>

<button class=bottom type=primary open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"> 授权登录 </button> </view>

authorize.wxss

.header { margin: 90rpx 0 90rpx 50rpx; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; }

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

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

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

.bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; }

authorize.json

{ "navigationBarTitleText": "授权登录" } authorize.js

const app = getApp(); Page({ data: { //判断小程序的API，回调，参数，组件等是否在当前版本可用。 canIUse: wx.canIUse(button.open-type.getUserInfo) }, onLoad: function () { var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { if (res.authSetting[scope.userInfo]) { wx.getUserInfo({ success: function (res) { //从数据库获取用户信息 that.queryUsreInfo(); //用户已经授权过 wx.switchTab({ url: /pages/index/index }) } }); } } }) }, bindGetUserInfo: function (e) { if (e.detail.userInfo) { //用户按了允许授权按钮 var that = this; //插入登录的用户的相关信息到数据库 wx.request({ url: app.globalData.urlPath + user/add, data: { openid: getApp().globalData.openid, nickName: e.detail.userInfo.nickName, avatarUrl: e.detail.userInfo.avatarUrl, province:e.detail.userInfo.province, city: e.detail.userInfo.city }, header: { content-type: application/json }, success: function (res) { //从数据库获取用户信息 that.queryUsreInfo(); console.log("插入小程序登录用户信息成功！"); } }); //授权成功后，跳转进入小程序首页 wx.switchTab({ url: /pages/index/index }) } else { //用户按了拒绝按钮 wx.showModal({ title:警告, content:您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!, showCancel:false, confirmText:返回授权, success:function(res){ if (res.confirm) { console.log(用户点击了“返回授权”) } } }) } }, //获取用户信息接口 queryUsreInfo: function () { wx.request({ url: app.globalData.urlPath + user/userInfo, data: { openid: app.globalData.openid }, header: { content-type: application/json }, success: function (res) { console.log(res.data); getApp().globalData.userInfo = res.data; } })； },

授权代码：

注意：wx.authorize({scope: “scope.userInfo”})，无法弹出授权窗口，请使用 <button open-type="getUserInfo"></button>