详细讲解使用uni-app开发微信小程序的登录模块

从微信小程序的官方公告可以知道，小程序的体验版和开发版调用wx.getUserInfo界面时，不会弹出授权查询框，默认调用失败。您需要使用按钮打开-类型=' getUserInfo '/按钮引导用户主动授权：

1.当用户未被授权时，调用该接口将直接报告错误

2.当用户被授权时，您可以使用此界面来获取用户信息

但是在实际开发中，可能需要弹出授权查询框，所以需要自己编写模拟授权框(主要是判断Button Open-Type=' GetUserInfo '/Button的包裹用户是否是第一次被授权显示页面)。代码如下：

1.页面结构

模板视图！-# ifdef MP-WEIXIN-view v-if=' isCanUse ' view class=' header ' image src='././static/img/wx _ log in . png '/image/View View class=' content ' View申请以下权限/查看文字获取您的公共信息(昵称、头像、地区等。)/text/view button class=' bottom ' type=' primary ' open-type=' getuser info ' with credentials=' true ' lang=' zh _ cn ' @ getuser info=' wxggetuserinfo ' authorize log in/button/view/view！- #endif - /view/template这里的isCanUse用于记录当前用户是否首次被授权使用，底部可以下载获取wx_login.png图。

2.风格

风格。标头{ 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；}/style3。脚本部分

脚本导出默认{ data() { return { SessionKey: ' '，OpenId: ' '，昵称： null，avatarUrl: null，isCanUse : uni。getstorage ync(' Iscanuse ')| | true//默认为true }；}，methods: { //第一授权获取用户信息===》按钮触发wxGetUserInfo(){ let _ this=this；uni。GetUserInfo({ provider : ' weixin '，success : function(infoRes){ let Nike=infoRes。用户信息。NiKe//昵称让头像网址=infores。用户信息。头像网址；//头像请尝试{ uni.setStorageSync('isCanUse '，false)；//记录是否第一次授权脚手架：表示不是第一次授权_这个。updateuser info()；} catch (e) {}，fail(RES){ })；},//登录log in(){ let _ this=this；uni.showLoading({ title: '登录中.'});//1.wx获取登录用户代号uni。登录({ provider : ' weixin '，success : function(loginRes){ let code=loginRes。代码；if(！_this.isCanUse) { //非第一次授权获取用户信息uni。GetUserInfo({ provider : ' weixin '，success : function(infoRes){//获取用户信息后向调用信息更新方法让昵称=infoRes.userInfo。昵称；//昵称让头像网址=infores。用户信息。头像网址；//头像_这个。updateuser info()；//调用更新信息方法} });} //2.将用户登录密码传递到后台置换用户会话密钥、OpenId等信息uni.request({ url: '服务器地址，data: { code: code，}，method: 'GET '，header : { ' content-type ' : ' application/JSON ' }，success: (res)={ //openId，或会话密钥存储//隐藏正在加载uni。hide loading()；} });}, });}, //向后台更新信息updateUserInfo(){ let _ this=this；uni.request({ url:'url '，//服务器端地址数据： { appKey:这个$store.state.appKey，customerid : _this。客户id，昵称： _这个。昵称，headUrl: _this.avatarUrl }，method: 'POST '，head : { ' content-type ' : ' application/JSON ' }，success :(RES)={ if(RES . data。state==' success '){ uni。重新启动({///).信息更新成功后跳转到小程序首页URL : '/page/index/index ' })；} } });} }，onLoad() {//默认加载这个。登录()；} }/script4 .最终效果如下：

wx_login.png图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。