News Contents
信息中心

微信小程序之授權登錄的實現(附完整源碼)

發表日期:2019/12/26      瀏覽次數:

前言:由于微信官方修改了 getUserInfo 接口,所以現在無法實現一進入微信小程序就彈出授權窗口,只能通過 button 去觸

發。官方連接:點擊打開鏈接

1.實現思路

自己寫一個微信授權登錄頁面讓用戶實現點擊的功能,也就是實現了通過 button 組件去觸發 getUserInof 接口。在用戶進入微

信小程序的時候,判斷用戶是否授權了,如果沒有授權的話就顯示下面“界面簡介”的第一個圖,讓用戶去執行授權的操作。如

果已經授權了,則直接跳過這個頁面,進入首頁。

2.界面簡介

3.源碼

login.wxml

<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>

login.wcss

.header {     margin: 90rpx 0 90rpx 50rpx;     border-bottom: 1px solid #ccc;     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; }

login.json

{     "navigationBarTitleText": "授權登錄" }

login.js

代碼的 wx.request 是我項目與后臺的一些交互,可直接刪除掉。

需要修改的地方:

記得自己補上 wx.switchTab 接口中的 url 屬性,這是授權成功后跳轉的頁面路徑,由于我的首頁是 tarBar 頁面,所以這里用 

wx.switchTab ,如果不是 tarBar 頁面的話,可以用 wx.navigateTo 和 wx.redirecTo 去跳轉頁面。 

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: ''                             })                         }                     });                 }             }         })     },     bindGetUserInfo: function (e) {         if (e.detail.userInfo) {             //用戶按了允許授權按鈕             var that = this;             //插入登錄的用戶的相關信息到數據庫             wx.request({                 url: getApp().globalData.urlPath + 'hstc_interface/insert_user',                 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: ''               })         } else {             //用戶按了拒絕按鈕             wx.showModal({                 title:'警告',                 content:'您點擊了拒絕授權,將無法進入小程序,請授權之后再進入!!!',                 showCancel:false,                 confirmText:'返回授權',                 success:function(res){                     if (res.confirm) {                         console.log('用戶點擊了“返回授權”')                     }                  }             })         }     },     //獲取用戶信息接口     queryUsreInfo: function () {         wx.request({             url: getApp().globalData.urlPath + 'hstc_interface/queryByOpenid',             data: {                 openid: getApp().globalData.openid             },             header: {                 'content-type': 'application/json'             },             success: function (res) {                 console.log(res.data);                 getApp().globalData.userInfo = res.data;             }         });     },      })


盛大建站承接個人、公司、企業的網站建設、網頁設計、網店制作、獨立商城制作、外貿網站制作,也承接同行介紹的業務,歡迎聯系!
本站承接主要業務如下:
1、提供免備案虛擬主機(網站空間),有獨立國內服務器、高速美國服務器、香港服務器、韓國服務器、日本服務器,>> http://www.fuanxx.com
2、網站建設:個人網店制作、企業建站、公司網站、新聞、下載等;論壇、博客網站搭建,承接外貿英文站制作
3、承接阿里巴巴、京東、淘寶、天貓等的商品數據采集
4、網站防釣魚,可以過360、QQ、搜狗、金山、微信攔截
5、要就發IP網站限制訪問系統,防止同行抄襲并保障海外客戶訪問不受影響,>> http://www.198ip.com
  下一篇:沒有了!
十年如一日,我們專注于提供高品質 定制網站建設服務!
您的信任,我們的責任,期待與您的合作!
广西11选5技巧