微信小程序------登录

接触微信小程序，一个多月了，总体来说还是比较简单的，能用到的方法和组件，接口等微信都给提供。而且不用处理那个恶心的兼容问题，但小程序还有许多坑，下面就提一下排坑之路。

小程序登录：

我的登录思路，wx.login -> 拿到code -> 用code做参数请求后台，返回openId -> 拿到openId获取用户的用户名和头像在后台做注册，返回一个用户的唯一标识accessToken -> 在其他页面就可以拿accessToken去请求数据渲染页面。

wx.login({success: res => {//console.log(res.code)//发送 res.code 到后台换取 openId, sessionKey, unionIdif(res.code){wx.request({url: getApp().globalData.server+"user/getOpenId.htm",method: 'POST',header : {'content-type': 'application/x-www-form-urlencoded'},data:{code:res.code},success: function(res) {var openid = res.data.data.openIdthat.globalData.openId = openidwx.setStorage({key: "openId",data: openid})}})}}      })

// 获取用户信息wx.getSetting({success: res => {if (res.authSetting['scope.userInfo']) {// 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框wx.getUserInfo({success: res => {// 可以将 res 发送给后台解码出 unionIdthis.globalData.userInfo = res.userInfo//console.log(res)// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回// 所以此处加入 callback 以防止这种情况if (this.userInfoReadyCallback) {this.userInfoReadyCallback(res)}wx.getStorage({key: 'openId',success: function (res) {var openId = res.datawx.getUserInfo({success: function (res) {wx.request({url: getApp().globalData.server+"user/wechatLogin.htm",method: 'POST',header: {'content-type': 'application/x-www-form-urlencoded'},data: { openid: openId, nickName: res.userInfo.nickName, avatarUrl: res.userInfo.avatarUrl },success: function (res) {wx.setStorage({key: "accessToken",data: res.data.data.accessToken})}})},fail: function () {wx.redirectTo({url: '../login/login'})}})}})}})}}})

因为用户可能首次进入会有拒绝访问用户信息，这就增加了另一种可能性，而且做开发的时候wx.getUserInfo开发版不会弹窗，测试的时候就非常困难，就在index里面做了守卫，如果到用户注册过的话，就直接到首页，如果用户拒绝了获取用户信息，就直接跳到登录页面，里面有按钮可以直接在次获取弹窗。

wx.getStorage({key: 'accessToken',success: function (res) {that.getUserDataFn();},fail: function () {wx.redirectTo({url: '../login/login'})}})

（注意）一些小程序并不是一进入就让授权登录，就像一些商城，可以让你浏览，如果你购买的话，才需要授权用户信息

小程序不会自动弹出授权登录，需要通过按钮才能触发

登录思路需要用户信息的地方判断是否登录，没有登录的话跳去登录页

var userInfo = wx.getStorageSync('user_info').data;if (!userInfo) {wx.redirectTo({url: "/pages/login/login?id=1"});}

在需要用户信息的地方判断缓存里面是否有用户信息，没有的话就跳去登录，可以根据传的参数区别是从那个页面跳过去的可以授权之后在次返回这个页面。

这是一个单独的登录页，图片可以放一个自己小程序的头像，点击授权登录，弹出授权登录弹窗

 getUserInfo: function (t) {//弹出授权信息var that = this;wx.login({success: function (o) {var n = o.code;wx.request({url: 'url',method: "POST",data: {code: n,//code必传encryptedData: t.detail.encryptedData,//看后台需求，传什么iv: t.detail.iv,//看后台需求，传什么headimgurl: t.detail.userInfo.avatarUrl,//看后台需求，传什么nickname: t.detail.userInfo.nickName//看后台需求，传什么},success: function (e) {console.log('e', e)if (200 == e.statusCode) {wx.setStorageSync("access_token", e.data.access_token), wx.setStorageSync("user_info", e.data); //存入缓存// 判断从那个页面点进来，授权成功后返回那个页面if (that.data.back == 1) {wx.switchTab({url: "/pages/home/home"});} else if (that.data.back == 'mine') {wx.switchTab({url: "/pages/mine/mine"});} else if (that.data.back == 2){wx.switchTab({url: "/pages/index/index"});}}},complete: function () {wx.hideLoading();}});},fail: function (e) {}});}

注意：button有默认的边框去不掉可以用

.login-btn:after {border: none;
}

微信小程序------登录相关推荐

access突然需要登录_早知道早好，微信小程序登录开发需要注意的事项
最近公司要做一个企业微信的小程序,方便企业内的成员来登录,以便一些公司内的业务,只限于公司内的成员来操作,因为有微信小程序的开发经验,所以先当作微信小程序来开发了! 首先来讲一下这个企业微信小程序与微 ...
Taro -- 微信小程序登录
Taro微信小程序登录 1.调用Taro.login()获取登录凭证code: 2.调用Taro.request()将code传到服务器: 3.服务器端调用微信登录校验接口(appid+appsecr ...
微信小程序登录-利用Oenid实现白名单和黑名单
微信小程序登录-利用Oenid实现白名单和黑名单 1.通过获取openid 存储到数据库中 2.结合数据库中额用户资料实现白名单和黑名单.
Spring Boot + 微信小程序——登录凭证校验DEMO
基本概念微信小程序-登录凭证校验:通过 wx.login 接口获得临时登录凭证 code 后传到开发者服务器调用此接口完成登录流程. 微信小程序API https://developers.weix ...
sessionkey 微信小程序获取_微信小程序登录，获取code，获取openid，获取session_key...
微信小程序登录 wx.login(Object object) 调用接口获取登录凭证(code).通过凭证进而换取用户登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session ...
uni-app微信小程序登录授权
uni-app微信小程序登录授权首先是需要用到一个授权按钮来触发获取用户信息授权: 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件,把获取授权接 ...
php与ipa接口登录验证失败,thinkPHP5.0开发微信小程序登录接口signature验证失败
我用TP5开发微信小程序登录接口的时候,在校验签名signature那遇到了个坑,一直校验失败,找了很久才发现原因是:tp的input方法会自动转移html字符,比如'"'转成了 & ...
小程序微信统计表格_微信小程序登录机制
" 不是0,也不是1,有0也有1 " 总有一个瞬间,你想记录当下的一些事情,所以有了这篇文章,不会口吐芬芳,我直接开门了,但愿能让你见山. 1. 背景 21 届的校园招聘已经打响了 ...
微信小程序登录返回 -41003
微信小程序登录解密失败小程序登录的时候,通过客户端获取的code等加密的信息,传给后端解密,可是后端解密返回 -41003 问题踩坑过程复现流程: 用户点击授权按钮.通过按钮绑定 getUser ...
java后端微信小程序登录与注册
java后端微信小程序登录与注册&微信登录授权分析: 微信小程序用户表的字段来源于微信服务器 , 必须想办法去获取到对应的用户信息找到微信开放平台: 微信开放平台以下是微信开放平台给出 ...

微信小程序------登录

（注意）一些小程序并不是一进入就让授权登录，就像一些商城，可以让你浏览，如果你购买的话，才需要授权用户信息

微信小程序------登录相关推荐

最新文章

热门文章