微信小程序的授权实现过程解析

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

目前的授权都是通过按钮来实现的，具体知识点可参考小程序的官方文档，以下是我做的一个小演示（进入首页，跳出一个登录弹出框，弹出框是自己写的一个用户界面组件),废话不多说，直接上代码

用户界面组件部分（模态)

modal.wxml

view class=' modal-mask ' wx : if=' { { show } } ' bind tap=' click mask ' view class=' modal-content ' scroll-view scroll-y class=' main-content ' slot/slot/scroll-view/view/view modal。页面样式表

n:固定；左： 0；右： 0；top : 0；底部： 0；背景-color: rgba(0，0，0，0.5)；z指数： 999；}/*遮罩内容*/.模态内容{ display : flex flex-direction :柱；宽度： 65%;背景-color : # fff；边界半径： 10 rpxpadding: 20rpx文本对齐：中心；}/*中间内容*/.主内容{ flex : 1；高度： 100%;溢出-y:隐藏；最大高度： 80vh/* 内容高度最高80vh以免内容太多溢出*/}.底部{ border-radius : 80 rpxmargin : 70 rpx 50 rpx font-size : 35 rpx；}modal.js

组件({ /** *组件的属性列表*/properties: { //是否显示情态的弹窗show: { type:布尔值，value: false }，//控制底部是一个按钮还是两个按钮，默认两个single: { type:布尔值，value: false } }，/** *组件的初始数据*/data: { }，/** *组件的方法列表*/methods: { //点击情态的的回调函数单击掩码(){ //点击情态的背景关闭遮罩层，如果不需要注释掉即可这个。setdata({ show : false })}，//点击取消按钮的回调函数取消(){此。setdata({ show : false })这。触发事件('取消')//触发事件触发事件}, //点击确定按钮的回调函数确认(){这个。setdata({ show : false })这。triggerevent(' confirm ')} } })模式。数据

{“组件”:为真，“使用组件”: {}页页面

home.wxml(这个是弹框，家页面内容直接在下面加一个视角这里写家页面的内容/view)

！-莫代尔弹窗-modalView show=' { { show modal } } ' bind cancel=' modalCancel ' bind confirm=' 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=' http :/images/goods _ img 2。png '/图像文本是否登录并继续使用该程序/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=' getusernfo ' lang=' zh _ CN ' bindgetusernfo=' bindgetusernfo '去登录/button/view/view/view/scroll-view/view/modal view home。页面样式表。标题{ text-align :开始；高度： 100 rpx线高： 100 rpx} .标题图像{ width : 200 rpx h8 : 200 rpx }。内容{ display:灵活左边距左： 50rpx高度： 100 rpx线高： 100 rpx}.内容图像{ width: 100rpx高度： 100 rpx} .内容文本{ font-size : 24 rpx左边距left: 20rpx}。header _ title {边距-左侧： 50 rpx文本对齐：开始；font-size : 24 rpxcolor: # ccc线高： 100 rpxdisplay: flex}。Dian { margin-right : 6rpx；font-size : 36rpx}.modal _ footer { display : flex justice-content :灵活端；}.底部{ display : flexcolor : # CCC font-size : 24 rpx；宽度： 280 rpx}按钮：在{ border:无}。底部按钮{底色： # fff高度： 50 rpx线高： 50 rpx}.bottom _ a { font-size : 24 rpx}.bottom _ b { font-size : 28 rpxcolor: # 0db95a}home.js

//home.js//获取应用实例const app=GetApp()Page({ data : { CAnius : wx。可以使用('按钮。开放式。GetUserInfo ')、showModal: true、single: false }、OnLoad : FuncTion(){ var即=this//查看是否授权wx。get setting({ success : function(RES){ if(RES . auth setting['作用域。userinfo ']){ wx。getuser info({ success : function(RES){ wx。登录({成功： RES={控制台。日志('用户的代码： ' RES . code)；} });} });}否则{那。setdata({ show modal : true })；} } });}，bindGetUserInfo:函数(e) { if (e.detail.userInfo) { //用户按了允许授权按钮变量=这个；//获取到用户的信息了，打印到控制台上看下console.log('用户的信息如下：');控制台。日志(例如详细信息。UserInfo)；//授权成功后，通过改变显示的值，让实现页面显示出来，把授权页面隐藏起来那个。setdata({ show modal : false })；} else { var那=this//用户按了拒绝按钮wx.showModal({ title: '警告，content: '您点击了拒绝授权，将无法获取你的信息！showCancel: false，confirmText: '返回授权，成功：函数(res) { //用户没有授权成功，不需要改变石出的值如果(RES .确认){那。setdata({ show modal : true })；} } });} }})home.json

{ '使用组件： { 'modalView': '././组件/模态/模态' }}好啦~这是全部代码，效果如下（点击登录可进行授权)

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