微信小程式之授權登入的實現(button按鈕)
阿新 • • 發佈:2019-02-18
前言:由於微信官方修改了 getUserInfo、authorize 介面,無法彈出授權視窗,所以現在無法實現一進入微信小程式就彈出授權視窗,只能通過 button 去觸發
1.實現思路
微信授權登入僅適用於使用微信使用者資訊的使用者,如果自己的專案有完善的使用者資訊(一套式開發專案),可不使用微信使用者資訊;如果僅為微信小程式,則要授權、獲取使用者資訊
自己寫一個微信授權登入頁面讓使用者實現點選的功能,也就是實現了通過 button 元件去觸發 getUserInof 介面。在使用者進入微
信小程式的時候,判斷使用者是否授權了,如果沒有授權的話就顯示下面“介面簡介”的第一個圖,讓使用者去執行授權的操作。如
果已經授權了,則直接跳過這個頁面,進入首頁。
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>
<view wx:else>請升級微信版本</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>
wx.getSetting({
success(res) {
if (!res.authSetting['scope.record']) {
wx.authorize({
scope: 'scope.record',
success() {
// 使用者已經同意小程式使用錄音功能,後續呼叫 wx.startRecord 介面不會彈窗詢問
wx.startRecord()
}
})
}
}
})
如果此篇部落格對您或者您的朋友有幫助,請予以收藏或者轉發,感謝您的檢視,始終信仰:每一次分享都會幫助一些採坑中的道友,愛分享,能讓道友時候踩一個坑是我們的幸福,
如果有什麼不對的地方,請於評論區提示,及時發現問題解決問題會讓我們進步更快,謝謝
參考文章地址:https://blog.csdn.net/weidong_y/article/details/79636386