主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
因为微信官方修改了getUserInfo的界面,所以不可能一进入微信小程序就弹出授权窗口,只能按键触摸。
头发。
1.实现思路
为用户编写一个微信授权登录页面,实现点击功能,即通过按钮组件触发getUserInof接口。当用户输入micro
在信任小程序的时候,判断用户是否已经授权。如果没有,将显示下面的“界面介绍”的第一个图,用户可以执行授权操作。诸如
如果已经授权,就跳过这一页,进入首页。
相关免费学习推荐:微信小程序开发
2.界面介绍
3.源代码
login.wxml
ltview wx:if = ;{ { canIUse } } gt lt查看class = # 39标题 # 39; gt ltimage src = # 39/images/wx _ log in . png # 39; gt lt/image gt; lt/view gt; lt查看class = # 39内容 # 39; gt lt视图 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;} .底部{ border -半径:80rpx边距:70rpx 50rpxfont -size:35 rpx;}login.json
{ navigationBarTitleText : Authorization " }login.js
代码wx.request是我的项目和后台的一些交互,可以直接删除。
需要修改的内容:
记得自己在wx.switchTab接口补url属性。这是成功授权后跳转的页面路径。因为我的主页是tarBar页面,所以我在这里使用它。
Wx.switchTab,如果不是tarBar页面,可以用wx.navigateTo和wx.redirecTo跳转。
Page({ data: {//确定是否有API、回调、参数、组件等。小程序的当前版本可用。cani use:wx . cani use( # 39;button . open -type . get userinfo # 39;)},onLoad:function(){ var that = this;//检查wx . get setting({ success:function(RES){ if(RES . auth setting[ # 39;scope.userInfo # 39]){ wx . Get userinfo({ success:function(RES){//从数据库中获取用户信息that . queryuserinfo();//用户已经授权了wx . switch tab({ URL: # 39;'}) } });}}}}},bindge userinfo:function(e){ if(e . detail . userinfo){//用户按了允许授权按钮that = this//将登录用户的相关信息插入数据库wx.request ({URL: getapp()。global data . URL path+ # 39;hstc _ interface/insert _ user # 39;,数据:{ OpenID:getApp(). global data . OpenID,昵称:e.detail.userInfo.nickName,avatar URL:e . detail . userinfo . avatar URL,省份:e.detail.userInfo.province,城市:e.detail.userInfo.city },头:{ # 39;内容-类型 # 39;: '应用/JSON # 39;},success: function (res) {//从数据库中获取用户信息that . queryuserinfo();控制台. log( ;成功插入小程序登录用户信息!");} });//授权成功后,跳转到首页wx . switch tab({ URL: # 39;'})} else {//用户按下了拒绝按钮wx . show modal({ title: # 39;警告 # 39;,内容: # 39;您不能通过单击“拒绝授权”来访问小程序。请授权后再进入!!!',showCancel:false,confirm text: # 39;返回授权 # 39;,success:function(RES){ if(RES . confirm){ console . log( # 39;用户点击了“返回授权” # 39;} } } } } } },//获取用户信息接口query userinfo:function(){ wx . request({ URL:getapp())。global data . URL path+ # 39;hstc _ interface/queryByOpenid # 39;,数据:{ OpenID:get app(). global data . OpenID },头:{ # 39;内容-类型 # 39;: '应用/JSON # 39;},success:function(RES){ console . log(RES . data);getApp(). global data . userinfo = RES . data;} });},})以上是实现微信小程序授权登录的细节。请多关注主机参考其他相关文章!
这几篇文章你可能也喜欢:
本文由主机参考刊发,转载请注明:实现微信小程序的授权登录(微信如何授权登录小程序) https://zhujicankao.com/78933.html
评论前必须登录!
注册