主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
本文将与大家分享微信小程序如何实现授权登录,获取用户信息和手机号。
相关学习推荐:小程序开发教程
综上,新增获取用户手机号的功能,使用了获取用户信息和用户手机号的功能。刚写的时候发现在一个登录页面上写了两个按钮。获取手机号的逻辑是用户点击授权后跳转到首页,用户点击拒绝时发现弹出提示。最后,可能是对微信的限制。模拟器调试拒绝有提示,真机点击拒绝可以跳转。没办法再写一套关于用户进入详情页判断手机号授权的指令。!!
1.全球判断
App({ onLaunch: function () {//调用API从本地缓存获取数据//显示本地存储容量var logs = wx . getstoragesync( # 39;日志 # 39;)| |[]logs . un shift(date . now())wx . setstoragesync( # 39;日志 # 39;对数)that = this//获取用户是否第一次进入新版本var versions = wx . getstoragesync( # 39;版本 # 39;);console . log( # 39;版本: # 39;+版本);//确定是否需要授权if(versions = = # 39;1'){//授权,可以直接调用getUserInfo获取头像昵称,不会弹回wx . get userinfo({ success:function(RES){ that . global data . userinfo = RES . userinfo console . log(that . global data . userinfo)},fail:function(){ wx . redirect to({ URL: # 39;../吴锐_豪斯/pages/log in/index # 39;,} } } } } else {//未授权,跳转到登录页面wx . redirect to({ URL: # 39;../吴锐_豪斯/pages/log in/index # 39;,}) },on show:function(){//console . log(getCurrentPages())},on hide:function(){//console . log(getCurrentPages())},on error:function(msg){//console . log(msg)},util:require( # 39;we7/resource/js/util . js # 39;),tabBar:{ ;颜色 : # 123 , 选定的颜色 : # 1 ba 9 ba ;, 边框样式 : # 1 ba 9 ba ;, 背景颜色 : # fff , 列表 :[ ] },getLocationInfo:function(CB){ var that = this;if(this . global data . location info){ CB(this . global data . location info)} else { wx . get location({ type: # 39;gcj02 # 39,//默认情况下,wgs84返回gps坐标,gcj02返回成功:function(RES){ that . global data . location info = RES;CB(that . global data . location info)},fail: function () { // fail },complete:function(){//complete } } },globalData: { userInfo: null,appid: ;",app secret: ;",},siteInfo:require( # 39;siteinfo.js # 39)});2 .登录登录页面判断
index.wxml
ltview wx:if = ;{ { isHide } } gt ltview wx:if = ;{ { canIUse } } gt lt视图 gt ltimage src = # 39../../../we7/resource/images/log in . png # 39; gt lt/image gt; lt/view gt; lt视图 gt lttext gt请依次允许访问您的公共信息和手机号码
。页眉{ margin:90 rpx 0 90 rpx 50 rpx;border -bottom:1px solid # CCC;text-align:居中;宽度:650rpx身高:300rpxline -身高:450rpx}.标题图像{ width:200 rpx;身高:200rpx}.content { margin -left:50 rpx;margin -bottom:90 rpx;}.内容文本{ display:block;颜色:# 9d9d9dmargin -top:40 rpx;} /* .oper BTN { border -radius:80 rpx;边距:70rpx 50rpxfont -size:35 rpx;}.operBtns{ background: #eef0ed!重要;border -半径:80rpx边距:70rpx 50rpxfont -size:35 rpx;颜色:#000300!重要;} */.隐藏{ border -radius:80 rpx;边距:70rpx 50rpxfont -size:35 rpx;显示:无;}.显示{ display:block;/*背景:#eef0ed!重要;*/border -radius:80 rpx;边距:70rpx 50rpxfont -size:35 rpx;/*颜色:#000300!重要;*/} (C)索引. js
const app = getApp();Page({ data: {//确定是否有API、回调、参数、组件等。小程序的当前版本可用。cani use:wx . cani use( # 39;button . open -type . get userinfo # 39;),isHide: false,authorized log in: # 39;授权 # 39;,用户电话: # 39;手机授权号 # 39;,李: ",flag: true },onLoad:function(){ var that = this;//检查是否授权//Get用户是否第一次进入新版本var versions = wx . getstoragesync( # 39;版本 # 39;);if(versions = = # 39;1'){ wx . get setting({ success:function(RES){ if(RES . auth setting[ # 39;scope.userInfo # 39]){//调用常用登录方法app . util . get userinfo(function(userinfo){ that . setdata({ userinfo:userinfo })});} else {//用户未被授权。//更改isHide的值,显示授权页面that . setdata({ is hide:true });} } });} else {//用户未被授权。//更改isHide的值,显示授权页面that . setdata({ is hide:true });}},bindge userinfo:function(e){ if(e . detail . userinfo){//用户按下了允许授权按钮that = thislet user = e . detail . userinfo;//获取用户的信息,打印到控制台看console . log( ;用户的信息如下:“);console.log(用户);//授权成功后,通过改变isHide的值,显示实现页面,隐藏授权页面。that . data . lee if(that . data . lee = = # 39;'){ wx . show toast({ icon: ;无 ,标题: # 39;请继续点击手机号码 # 39;,})、that.setData({ isHide: true,flag:(!that.data.flag)、lee:true })that . wx login();} else if(!that . data . lee){ wx . switch tab({ URL: ;/吴锐_豪斯/pages/index/index ;} } } } else {//用户按下了拒绝按钮wx . show modal({ title: # 39;警告 # 39;,内容: # 39;您不能通过单击“拒绝授权”来访问小程序。请授权后再进入!!!',showCancel: false,confirm text: # 39;返回授权 # 39;,success: function(res) {//用户未授权成功,不需要更改isHide的值if(RES . confirm){ console . log( # 39;用户点击了“返回授权” # 39;);} } });} },wxlogin: function() {//获取用户的openID var that//调用常用登录方法app . util . get userinfo(function(userinfo){ that . setdata({ userinfo:userinfo })});}、获取电话号码:函数(E){//点击按钮获取手机号码var即= thisthat . data . lee if(that . data . lee = = # 39;'){ wx . show toast({ icon: ;无 ,标题: # 39;请先点击获取用户信息 # 39;,})return } else { wx . check session({ success:function(RES){ console . log(e . detail . errmsg)console . log(e . detail . iv)console . log(e . detail . encrypted data)var ency = e . detail . encrypted data;var iv = e . detail . iv;var session k = that . data . session key;if(e . detail . errmsg = = # 39;getPhoneNumber:用户拒绝失败 # 39;){ wx . show modal({ title: # 39;警告 # 39;,内容: # 39;您点击拒绝授权,部分功能无法使用!!!',showCancel: false,confirm text: # 39;返回授权 # 39;,success: function(res) {//用户没有授权成功,不需要修改isHide的值if(RES . confirm){ wx . setstoragesync( # 39;enws # 39, '1');wx . switch tab({ URL: ;/吴锐_豪斯/pages/index/index ;})console . log( # 39;用户点击了“返回授权” # 39;);};} })、that.setData({ modalstatus: true,});} else { that.setData({ lee: false,});wx . switch tab({ URL: ;/吴锐_豪斯/pages/index/index ;})//同意授权var userinfo = wx . getstoragesync( # 39;userInfo # 39);app . util . request({ # 39;网址 # 39;: 'entry/wx app/save user mobile # 39;,data:{ session id:userinfo . session id,uid: userinfo.memberInfo.uid,iv: iv,encryptedData: ency },success:function(RES){ if(RES . data . data . error = = 0){ console . log( # 39;成功 # 39;+RES . data . data);//用户输入了新版本,可以更新本地数据wx . setstoragesync( # 39;版本 # 39;, '1');wx . setstoragesync( # 39;enws # 39, '2');} else {//用户保存手机号码失败。下次继续授权手机号wx . setstoragesync( # 39;enws # 39, '1');console . log( # 39;失败 # 39;+RES . data . data);} },fail:function(RES){ console . log( # 39;失败 # 39;+RES);} });} },失败:function(){ console . log( ;Session_key已过期,需要重新执行登录流程”);that . wxlogin();//再次登录} });} }})2.详情页上手机号码的授权判断
使用写入遮罩层。
(1)index.html
lt代码 gt lt!--授权弹匣提醒-->; ltview class = 容器 gt ltview class = 浮动 hidden = # 39{ { viewShowed } } # 39 gt lt查看class = # 39浮动内容 # 39; gt lttext gt授权获取手机号码
/*手机号码授权*/。浮动{高度:100%;宽度:100%;位置:固定;background-color: rgba(0,0,0,0.5);z-指数:2;top:0;左:0;}.float content {/* padding:20 rpx 0;*/宽度:80%;背景:# fff利润率:40%自动;border -半径:20rpx显示器:flexflex -方向:列;justify -内容:space -左右;align -项:居中;位置:相对;身高:255rpx}.浮动内容文本{ color:# 000;font -size:40 rpx;显示:块;边距:0自动;位置:绝对;顶配:50rpx/* text-align:居中;*//* line -高度:60rpx*/border -radius:30 rpx;}.floatText{宽度:100%;高度:100rpx显示器:flexjustify -内容:flex -start;位置:绝对;底部:0;} . BTN -can cle { line -height:100 rpx;flex:1;边距:0;填充:0;border-radius:无;} (3) index.js
data:{ view displayed:true,//控制授权是否可以显示},can cle:function(){ wx . setstoragesync( # 39;enws # 39, '2');this . setdata({ view showed:true })},/* * *生命周期函数--监控页面显示*/on show:function(){ varenws = wx . getstoragesync( # 39;enws # 39);控制台. log( ;enws: ;,+enws);var that = this如果(enws!= '2'){//判断那个. setdata({ view displayed:false,})console . log( # 39;判断是否可以授权 # 39;);} else {},获取电话号码:函数(e){//点击按钮获取手机号码var that = thiswx . check session({ success:function(RES){ console . log(e . detail . errmsg)console . log(e . detail . iv)console . log(e . detail . encrypted data)var ency = e . detail . encrypted data;var iv = e . detail . iv;var session k = that . data . session key;that.setData({ viewShowed: true,})wx . setstoragesync( # 39;enws # 39, '2');if(e . detail . errmsg = = # 39;getPhoneNumber:用户拒绝失败 # 39;){} else {//同意授权var userinfo = wx . getstoragesync( # 39;userInfo # 39);app . util . request({ # 39;网址 # 39;: 'entry/wx app/save user mobile # 39;,data:{ session id:userinfo . session id,uid: userinfo.memberInfo.uid,iv: iv,encrypted data:encrypted },success:function(RES){ console . log( # 39;成功 # 39;+RES);if(RES . data . data . error = = 0){ console . log( # 39;成功 # 39;+RES . data . data);//用户输入了新版本,可以更新本地数据wx . setstoragesync( # 39;版本 # 39;, '1');} else {//用户保存手机号失败,下次继续授权手机号}},fail:function(RES){ console . log( # 39;失败 # 39;+RES);} });} } });},更多编程相关知识请访问:编程入门!!就是这样授权小程序登录,获取信息详情和手机号的。请多关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
- 如何实现小程序发送服务通知(小程序如何主动向用户发送通知)
- 如何获取小程序的unionid(如何获取小程序的页面路径)
- 生成海报的示例小程序(Java后端)(微信小程序生成海报演示)
- 什么是小程序? 有哪些功能?(什么是小程序?有哪些功能?)
- 介绍如何用小程序生成参数二维码(二维码+小程序参数)
本文由主机参考刊发,转载请注明:如何授权小程序登录获取信息和手机号(小程序获取手机号授权登录合法吗) https://zhujicankao.com/77851.html
评论前必须登录!
注册