E企盈小程序营销工具技术服务商 热线:4006-838-530

微信网页授权,微信小程序之授权登录附完整源码

E企盈直播平台营销卖货系统

个人博客上已经同步更新了文章,有目录索引,阅读起来比较方便,欢迎大家移步个人博客上读阅~个人博客地址:微信小程序之授权登录一、前言由于微信官方修改了getUserInfo接口,所以现在无法实现一进入微信小程序就弹出授权窗口,只能通过button去触发。官方连接:二、实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过button组件去触发getUserInof接口。在用户进入微信小程序的时候,判断用户是否授权了,如果没有授权的话就显示授权页面,让用户去执行授权的操作。如果已经授权了,则直接跳过这个页面,进入首页。三、界面简介1.不带tabBar2.带tabBar四、源码1.index.wxmlviewwx:if=”{{isHide}}”viewwx:if=”{{canIUse}}”viewclass=’header’imagesrc=’/images/wx_login.png’/image/viewviewclass=’content’view申请获取以下权限/viewtext获得你的公开信息(昵称,头像等)/text/viewbuttonclass=’bottom’type=’primary’open-type=”getUserInfo”lang=”zh_CN”bindgetuserinfo=”bindGetUserInfo”授权登录/button/viewviewwx:else请升级微信版本/view/viewviewwx:elseview我的首页内容/view/view2.index.wcss.header{margin:90rpx090rpx50rpx;border-bottom:1pxsolid#ccc;text-align:center;width:650rpx;height:300rpx;line-height:450rpx;}.headerimage{width:200rpx;height:200rpx;}.content{margin-left:50rpx;margin-bottom:90rpx;}.contenttext{display:block;color:#9d9d9d;margin-top:40rpx;}.bottom{border-radius:80rpx;margin:70rpx50rpx;font-size:35rpx;}3.index.jsPage({data:{//判断小程序的API,回调,参数,组件等是否在当前版本可用。canIUse:wx.canIUse(‘button.open-type.getUserInfo’),isHide:false},onLoad:function(){varthat=this;//查看是否授权wx.getSetting({success:function(res){if(res.authSetting[‘scope.userInfo’]){wx.getUserInfo({success:function(res){//用户已经授权过,不需要显示授权页面,所以不需要改变isHide的值//根据自己的需求有其他操作再补充//我这里实现的是在用户授权成功后,调用微信的wx.login接口,从而获取codewx.login({success:res={//获取到用户的code之后:res.codeconsole.log(“用户的code:”+res.code);//可以传给后台,再经过解析获取用户的openid//或者可以直接使用微信的提供的接口直接获取openid,方法如下://wx.request({////自行补上自己的APPID和SECRET//url:’https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=’+res.code+’&grant_type=authorization_code’,//success:res={////获取到用户的openid//console.log(“用户的openid:”+res.data.openid);//}//});}});}});}else{//用户没有授权//改变isHide的值,显示授权页面that.setData({isHide:true});}}});},bindGetUserInfo:function(e){if(e.detail.userInfo){//用户按了允许授权按钮varthat=this;//获取到用户的信息了,打印到控制台上看下console.log(“用户的信息如下:”);console.log(e.detail.userInfo);//授权成功后,通过改变isHide的值,让实现页面显示出来,把授权页面隐藏起来that.setData({isHide:false});}else{//用户按了拒绝按钮wx.showModal({title:’警告’,content:’您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!’,showCancel:false,confirmText:’返回授权’,success:function(res){//用户没有授权成功,不需要改变isHide的值if(res.confirm){console.log(‘用户点击了“返回授权”’);}}});}}})关于TabBar的处理,只需要把上面写好的页面设置到app.json里面即可。4.github下载五、福利:微信小程序学习视频资源分享需要以下微信小程序项目教学视频的,可以关注下面的公众号,回复“小程序”即可获取百度云分享链接!如果失效的话,可以在公众号上面私信我。六、同类文章推荐阅读

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信网页授权,微信小程序之授权登录附完整源码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏