大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关怎么在微信小程序中授权,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
10年的沅江网站建设经验,针对设计、前端、开发、售后、文案、推广等六对一服务,响应快,48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同,自动调整沅江建站的显示方式,使网站能够适用不同显示终端,在浏览器中调整网站的宽度,无论在任何一种浏览器上浏览网站,都能展现优雅布局与设计,从而大程度地提升浏览体验。成都创新互联从事“沅江网站设计”,“沅江网站推广”以来,每个客户项目都认真落实执行。
modal.wxml
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页面内容直接在下面加一个
提示 是否登录并继续使用该程序 • 登录程序需进行微信授权
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" } }
关于怎么在微信小程序中授权就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。