自從小程序文檔更新后，自動授權已不存在啦
目前的授權都是通過button來實現的，具體知識點可參考小程序的官方文檔，以下是我做的一個小demo（進入首頁，跳出一個登錄彈出框，彈出框是自己寫的一個UI組件），廢話不多說，直接上代碼
UI組件部分（modal）
modal.wxml
<view class='modal-mask' wx:if='{{show}}' bindtap='clickMask'> <view class='modal-content'> <scroll-view scroll-y class='main-content'> <slot></slot> </scroll-view> </view></view>modal.wxss
n: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); z-index: 999;}/*遮罩內容*/.modal-content{ display: flex; flex-direction: column; width: 65%; background-color: #fff; border-radius: 10rpx; padding: 20rpx; text-align: center;}/*中間內容*/.main-content{ flex: 1; height: 100%; overflow-y: hidden; max-height: 80vh; /* 內容高度最高80vh 以免內容太多溢出*/}.bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx;}modal.js
Component({ /** * 組件的屬性列表 */ properties: { //是否顯示modal彈窗 show: { type: Boolean, value: false }, //控制底部是一個按鈕還是兩個按鈕，默認兩個 single: { type: Boolean, value: false } }, /** * 組件的初始數據 */ data: { }, /** * 組件的方法列表 */ methods: { // 點擊modal的回調函數 clickMask() { // 點擊modal背景關閉遮罩層，如果不需要注釋掉即可 this.setData({ show: false }) }, // 點擊取消按鈕的回調函數 cancel() { this.setData({ show: false }) this.triggerEvent('cancel') //triggerEvent觸發事件 }, // 點擊確定按鈕的回調函數 confirm() { this.setData({ show: false }) this.triggerEvent('confirm') } }})modal.json
{ "component": true, "usingComponents": {}}pages頁面
home.wxml（這個是彈框，home頁面內容直接在下面加一個<view>這里寫home頁面的內容</view>）
<!-- modal彈窗--> <modalView show="{{showModal}}" bindcancel="modalCancel" bindconfirm='modalConfirm' single='{{single}}'> <view class='modal-content'> <scroll-view scroll-y class='main-content'> <view wx:if="{{canIUse}}" > <view class='header'> <text>提示</text> </view> <view class='content'> <image src="/images/goods_img2.png"></image> <text>是否登錄并繼續使用該程序</text> </view> <view class="header_title"> <text class="dian">•</text> <text>登錄程序需進行微信授權</text> </view> <view class="modal_footer"> <view class="bottom"> <button class='bottom_a'> 拒絕 </button> <button class='bottom_b' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo"> 去登錄 </button> </view> </view></view> </scroll-view> </view> </modalView>home.wxss
.header { text-align: start; height: 100rpx; line-height: 100rpx;} .header image { width: 200rpx; height: 200rpx;} .content { display: flex; margin-left: 50rpx; height: 100rpx; line-height: 100rpx;}.content image{ width: 100rpx; height: 100rpx;} .content text { font-size: 24rpx; margin-left: 20rpx;} .header_title{ margin-left: 50rpx; text-align: start; font-size: 24rpx; color: #ccc; line-height: 100rpx; display: flex;}.dian{ margin-right: 6rpx; font-size: 36rpx;}.modal_footer{ display: flex; justify-content: flex-end;}.bottom { display: flex; color: #ccc; font-size: 24rpx; width: 280rpx;}button::after { border: none;}.bottom button{ background-color: #fff; height: 50rpx; line-height: 50rpx;}.bottom_a{ font-size: 24rpx;}.bottom_b{ font-size: 28rpx; color: #0db95a;}home.js
//home.js//獲取應用實例const app = getApp()Page({ data: { canIUse: wx.canIUse('button.open-type.getUserInfo'), showModal: true, single: false }, onLoad:function(){ var that = this; // 查看是否授權 wx.getSetting({ success: function (res) { if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: function (res) { wx.login({ success: res => { console.log("用戶的code:" + res.code); } }); } }); } else { that.setData({ showModal: true }); } } }); }, bindGetUserInfo: function (e) { if (e.detail.userInfo) { //用戶按了允許授權按鈕 var that = this; // 獲取到用戶的信息了，打印到控制臺上看下 console.log("用戶的信息如下："); console.log(e.detail.userInfo); //授權成功后,通過改變 showModal的值，讓實現頁面顯示出來，把授權頁面隱藏起來 that.setData({ showModal: false }); } else { var that = this; //用戶按了拒絕按鈕 wx.showModal({ title: '警告', content: '您點擊了拒絕授權，將無法獲取你的信息!!!', showCancel: false, confirmText: '返回授權', success: function (res) { // 用戶沒有授權成功，不需要改變 isHide 的值 if (res.confirm) { that.setData({ showModal: true }); } } }); } }})home.json
{ "usingComponents": { "modalView": "../../components/modal/modal" }}好啦~這是全部代碼，效果如下（點擊登錄可進行授權）
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
