微信小程序实现授权登录

前言：由于微信官方修改了getUserInfo界面，不可能一进入微信小程序就弹出授权窗口，只能通过按钮触发。官方连接：点击打开链接

1.实施思路

编写一个微信授权登录页面供用户点击，即通过按钮组件触发getUserInof界面。当用户进入微信小程序时，判断用户是否获得授权，如果没有，则显示下面“界面介绍”的第一张图片，让用户进行授权操作。如果已经授权，直接跳过此页，进入首页。

2.界面介绍

3.源代码

login.wxml

view wx : if=' { { cani use } } ' view class=' header ' image src='/images/wx _ log in . png '/image/view view class=' content ' view申请以下权限/查看文本以获取您的公共信息(昵称、头像等。)/text/view button class=' bottom ' type=' primary ' open-type=' getuserinfo ' lang=' zh _ cn ' bindguteuserinfo=' bindguteuserinfo ' authorized log in/button/view viewx 3360 els请升级微信版本/viewlogin.wcss。标头{ margin : 90 rpx 0 90 rpx 50 rpx；border-bottom: 1px实心# ccc文本对齐：中心；宽度： 650 rpx；height: 300rpx线高： 450 rpx；} .标题图像{ width: 200rpxheight: 200rpx} .内容{ margin-left : 50 rpx；保证金-底部： 90 rpx；} .内容文本{ display:块；color: # 9d9d9d边距-top : 40 rpx；} .底部{ border-radius : 80 rpx；margin: 70rpx 50rpxfont-size : 35 rpx；}login.json

{ ' navigationBarTitleText ' : '授权登录' }login.js

代码的Wx.request是我的项目和后台的一些交互，可以直接删除。

需要修改的内容：

记得在wx.switchTab界面填写url属性，这是授权成功后要跳转的页面路径。因为我的主页是tarBar页面，所以我们在这里使用wx.switchTab。如果不是tarBar页面，我们可以使用wx.navigateTo和wx.redirecTo进行跳转。

页面({ data: { //判断小程序的原料药，回调，参数，组件等是否在当前版本可用canouse : wx。canouse('按钮。开放式。getuserinfo ')}，on load : function(){ var=this；//查看是否授权wx。get setting({ success : function(RES){ if(RES . auth setting['作用域。userinfo ']){ wx。getuser info({ success : function(RES){//从数据库获取用户信息那个。queryusreinfo()；//用户已经授权过wx。SwitCh TAb({ URL : ' ' })})；} } }) }，bindGetUserInfo:函数(e) { if (e.detail.userInfo) { //用户按了允许授权按钮变量=这个；//插入登录的用户的相关信息到数据库wx。请求({ URL : GetApp()。全球数据。URL path ' hstc _ interface/insert _ user '，数据： { OpenID : GetApp()。全球数据。OpenID，昵称： e.detail.userInfo。昵称，头像网址3360 e .详细信息。用户信息。头像网址，province:e.detail.userInfo。省份东3360号城市细节。用户信息。城市}，header: { '内容从数据库获取用户信息那个。queryusreinfo()；console.log('插入小程序登录用户信息成功！');} });//授权成功后，跳转进入小程序首页wx。SwitCh TAb({ URL : ' ' })} else {//用户按了拒绝按钮wx.showModal({ title: '警告，content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入！'，showCancel:false，confirmText: '返回授权，成功：功能(RES){ if(RES . confirm){ console。日志('用户点击了"返回授权"') } } }) } }, //获取用户信息接口queryUsreInfo:函数(){ wx。请求({ URL : GetApp()。全球数据。URL path ' hstc _ interface/querybypenid '，数据： { OpenID : GetApp()。全球数据。OpenID }，标头： { '内容类型' : '应用程序/JSON ' }，成功：函数(RES){控制台。日志(资源数据)；getApp().} });}, })以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。