自从小程序文档更新后，自动授权已不存在啦

目前的授权都是通过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; }.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" }}

好啦~这是全部代码，效果如下（点击登录可进行授权）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。