微信小程序授权登录模板源代码

前言：因为微信官方修改了getUserInfo界面，现在一进入微信小程序就不可能弹出授权窗口，只能通过按钮触发。官方连接：点击打开链接。1.实现思路编写一个微信授权登录页面，让用户实现点击功能，即通过按钮组件触发getUserInof界面。当用户进入微信小程序时，判断用户是否被授权，如果没有，则显示下面“界面介绍”的第一个图，让用户进行授权操作。如果已经授权，直接跳过此页，进入首页。2.界面介绍 3。源代码log in . wxmlviewwx 3360 if=' { { cani use } } ' View class=' header ' image src='/images/wx _ log in . png '/image/View class=' content ' View申请以下权限/查看文本以获取您的公共信息(昵称、等。)/text/view button class=' bottom ' type=' primary ' open-type=' getuser info ' lang=' zh _ cn ' bingetuserinfo=' bingetuserinfo '授权登录/button/view wx :否则请升级微信版本/view log in . wcss . header { margin 3360 90 rpx 0 90 rpx50rpx；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 { '导航栏标题文字' : '授权登录' } log in . js代码的wx.request是我的项目和后台的一些交互，可以直接删除。需要修改的地方：记得在wx.switchTab界面填写url属性，这是授权成功后要跳转的页面路径。因为我的主页是tarBar页面，所以这里使用wx.switchTab，如果不是tarBar页面，可以使用wx.navigateTo和wx.redirecTo跳转到该页面。页面({ data: {//确定API、回调、参数、组件等。的小程序在当前版本中可用。

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().} });}, })补充：关于getApp().拿不到值的说明：是因为我已经在全局射流研究…文件app.js那里作了赋值。就是当用户进入小程序的时候，就获取到用户的opneid然后放到全局变量openid中。下面直接看下代码就好app.jsApp({ /** *当小程序初始化完成时，会触发onLaunch(全局只触发一次)*/onLaunch:函数(){ var=thiswx。登录({ success : RES={ wx。请求({ URL :全球数据。代码。全球数据。wx _ URL _ 2，成功： RES={那。全球数据。打开id=RES . data。打开id；} }) } });}, /** * 设置全局变量*/globalData: { openid:0，wx _ URL _ 1: 'https://api.weixin.qq.com/sns/jscode2session？appid=自己的APPIDsecret=自己的SECRETjs _ code='，wx _ URL _ 2: ' grant _ type=authorization _ code ' })