小程序微信登录

最新推荐文章于 2023-04-22 11:45:00 发布
最新推荐文章于 2023-04-22 11:45:00 发布
阅读量307 收藏
点赞数
分类专栏： web前端 微信小程序 文章标签： wx.request的封装 小程序登录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_37880401/article/details/89848563
版权

小程序微信登录

相信大家做小程序的， 对微信登录的机制都有一定的了解以及想法了；
大家八仙过海 各显神通，下面这篇文章，只是我对其的了解
如果大家有好的想法 ！！！请一定 与 我交流！！！

I、处理登录的逻辑

关于会遇到的问题以及处理

  1. 首先请求是个异步事件，我们并不是所有接口都需要登录；
    既然是异步事件， 那么我们肯定要在回调函数中进行处理
    这样的话就要涉及到wx.request的封装；我们在下面讲
  2. 关于code的获取
    登录需要用户点击微信自带的button才能获取到
    <button class='login-btn' open-type="getUserInfo" bindgetuserinfo="getUserInfo" 
    type="warn" size="default" loading="{{loading}}" bindtap="primary"> 
        一键登录 
    </button>

  1. 关于权限判断，以及如何判断
    咱们不能所有接口都需要登录， 那样的话连审核都过不了；
    这里同样需要对wx.requesrt进行封装；下面讲

  2. 登录的处理逻辑图：
    小程序登录逻辑
    小程序登录逻辑

II、wx.request的封装逻辑

1. wx.request的封装

  1. 基础层
    a. 调用扩展层的处理函数
    b. wx.request请求

  2. 扩展层
    beforeRequest 发起请求之前 处理有无网络状态
    handleRequestInportData 处理请求参数
    showMask 处理遮罩层
    stopLoading 停止各种的loading
    handleResponse 处理返回结果 (在这里面处理是否跳转登录)

2. wx.request的封装逻辑图

小程序request请求封装.png

III、关于登录 对wx.request的封装

当然是写在handleResponse里面的
跟后端约定好返回码 做对应的操作；
我们这边规定 如果返回 code == 401 || code == 403的话就表示没有登录

if (res.data.code == '401' || res.data.code == '403') {
      console.error('没登录，去登录，并且设置状态')
      // 清空之前的token
      wx.removeStorageSync('accessToken');		
      // 正在登录中
      if (that.globalData.isLogging) return true;	
      // 没在登录中 进入登录状态，并且设置isLogging	
      that.globalData.isLogging = true;		
      // 登录失效且不在白名单 
      if (!CONFIG['API_WHITE_LIST'].includes(thisUrl)) {
        // 跳到登录
        let pages = getCurrentPages();
        for (let i in pages) {
          if (pages[i].route == '/pages/login/login') {
            // console.log(i)
            wx.navigateBack({
              delta: pages.length - (i + 1)
            })
            return true;
          }
        }
        wx.navigateTo({ url: '/pages/login/login' });
        return true;
      }
      return;
    }

IV、相关代码

1. wx.request关于基础层的封装

// 基础层: 
  // 基于微信的request进行二次封装，myRequest是基础层
  // beforeRequest 处理有无网络状态
  // handleRequestInportData 处理请求参数
  // showMask 处理遮罩层
  // stopLoading 停止各种的loading
  // handleResponse 处理返回结果
  
  myRequest: function (url, data, methods, callback, loadType, errorFun, headers) {
    let _this = this;
    // 检查是拥有网络 没有网络 就return；
    if (_this.beforeRequest(url)) return;
    // 参数处理
    let theData = this.handleRequestInportData(url, data, methods, callback, loadType, errorFun, headers, _this);
    // 处理遮罩层
    this.showMask(theData.loadType);

    // 是否是启用模拟数据
    if (DEBUG) {
      let responseData = myData.getData(url, data);
      setTimeout(() => {
        console.log('DEBUG response : ')
        console.log(responseData.data)
        _this.stopLoading();
        callback(responseData)
        // _this.handleResponse(responseData, theData);
      }, 800)
    }else{
    // 开始请求
      wx.request({
        url: theData.url,
        data: {
          ...theData.data,
          ..._this.globalData.otherParams
        },
        method: theData.methods,
        header: theData.headers,
        success: function (res) {
          // 处理返回结果
          _this.handleResponse(res, theData, _this, url);
        },
        fail: function (err) {
          _this.stopLoading();
        },
        complete: function () {
        }
      })
    }
    // 请求结束
  },

2. wx.request 扩展层的封装


// 在请求发起之前需要做的事情 处理有无网络状态
  beforeRequest: function(tempUrl) {
    let _this = this;
    wx.getNetworkType({
      success: function (res) {
        if (res.networkType == 'none') {
          return true;
        }
      }
    })
  },

  // 处理请求参数：
  handleRequestInportData: (
    url,
    data,
    methods = 'post',
    callback = () => console.log('未传入回调callback'),
    loadType = 'mask',
    errorFun = (err) => {
      wx.hideLoading();
      wx.showToast({
        title: err.message,
        icon: 'none',
        mask: true,
        duration: 2000
      })
      console.log('未传入回调 errorFun')
    },
    headers = {},
    that
  ) => {
    let requestData = {};
    if (!url) {
      console.error('传入myRequest的URL不可为空');
      return;
    }
    headers = {
      'content-type': 'application/json',
      'Authorization': 'Bearer ' + that.globalData.accessToken,
      'enctype': 'raw'
    }
    data.referrer_uid = that.globalData.referrer_uid != 0 ? that.globalData.referrer_uid : 0;

    requestData.url = InterFace[url];
    requestData.data = data;
    requestData.methods = methods;
    requestData.callback = callback;
    requestData.loadType = loadType;
    requestData.errorFun = errorFun;
    requestData.headers = headers;
    return requestData;
  },



  // 处理返回结果：
  handleResponse: (res, theData, that, tempUrl) => {
    let _this = this;
    that.stopLoading();
    if (res.data.code == '401' || res.data.code == '403') {
      console.error('没登录，去登录，并且设置状态')
      // console.error(that.globalData.isLogging)
      wx.removeStorageSync('accessToken');
      // 正在登录中 设置 isLogging
      if (that.globalData.isLogging) return true;
      that.globalData.isLogging = true;
      // 登录失效且不在白名单 !wx.getStorageSync('accessToken') && !API_WHITE_LIST.includes(tempUrl)
      if (!CONFIG['API_WHITE_LIST'].includes(tempUrl)) {
        // 跳到登录
        let pages = getCurrentPages();
        // Tips: 判断页面栈中是否有login
        for (let i in pages) {
          if (pages[i].route == '/pages/login/login') {
            wx.navigateBack({
              delta: pages.length - (i + 1)
            })
            return true;
          }
        }
        wx.navigateTo({ url: '/pages/login/login' });
        return true;
      }
      return;
    }
    if (res.data.status == 200 && res.data.code != 0) {
      // 调用错误处理函数
      theData.errorFun(res.data)
      return;
    } else if (res.data.code == '503' || res.data.code == '500') {
      // 故障页面
      wx.reLaunch({
        url: '/pages/error/error'
      })
      return;
    }
    // 正常情况下， 回调
    if (res.data.status == 200 && res.data.code == 0) {
      theData.callback(res.data);
      return;
    }
  },


  // 展示遮罩层：
  showMask: (loadType) =>{
    if(loadType == 'none') return;
    if(loadType == 'top'){
      wx.showNavigationBarLoading()
      return;
    }
    wx.showLoading({
      title: '加载中',
      mask: true,
    })
  },
  

  /*
  * 停止各种loading状态
  * @function stopLoading
  * @params {}
  * @barth {Constantine, 2017-11-13 17:19:15}
  */
  stopLoading: () => {
    wx.hideLoading();
    wx.hideNavigationBarLoading()
    wx.stopPullDownRefresh()
  },

3. 登录页面代码

<!--pages/login/login.wxml-->
<nav title="选择登录方式"></nav>
<view class='cul-null'>抱歉您还未登录呢， 请点击下方授权按钮登录</view>
<view class='cul-null'>以使用更多功能</view>

<button class='login-btn' open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="warn" size="default" loading="{{loading}}" bindtap="primary"> 一键登录 </button>
<button class='login-btn' plain="{{true}}" type="default" size="default" bindtap="jumpTo" data-url='/pages/loginOld/loginOld'> 手机登录 </button>

// pages/login/login.js
   /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    app.globalData.isLogging = false;
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    app.globalData.isLogging = false;
  },
  
  // 发起登录
  getUserInfo: function (e) {
    console.log(e)
    this.setData({
      loading: true
    })
    let encryptedData = e.detail.encryptedData;
    let iv = e.detail.iv;

    console.log('login in')
    let _this = this;

    wx.login({
      success: ret => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        var CODE = ret.code;
        app.globalData.otherParams.wxcode = ret.code;
        app.myRequest('login', {
          wxcode: CODE,
          info: e.detail.userInfo,
          allInfo: e.detail,
        },
          'get',
          function (data) {
            console.log(data)
            if(data.data.has_reg == false){
              _this.userRegister(encryptedData, iv, data.data.openid)
              console.error('没有注册过')
            }else{
              console.error('注册过')
              wx.showToast({
                title: '已有账号，登录中',
                icon: 'none',
                mask: true,
                duration: 1500
              })
              _this.saveData(data);
              _this.setData({
                loading: false,
                userInfo: data.data.memberProfile,
                hasUserInfo: true
              })
              if (!data.data.has_phone){
                // TODO: 判断用户有没有手机号，没有调用接口绑定，并且完善密码
              }
              setTimeout(() => {
                wx.navigateBack({
                  delta: 1
                })
              }, 800)
            }
          })
        console.log('login', ret)
      }
    })
  },

  // 自动注册
  userRegister: function (encryptedData, iv, openid) {

    let _this = this;
    app.myRequest('userRegister', {
      encryptedData: encryptedData,
      iv: iv,
      openid: openid
    },
      'post',
      function (data) {
        console.log(data)
        // 缓存数据
        _this.saveData(data);
        _this.setData({
          userInfo: data.data.memberProfile,
          member: data.data.member,
          hasUserInfo: true,
          hideBindBlock: false,
          loading: false
        })
        app.globalData.newUser = true;
        wx.showToast({
          title: '注册成功',
          icon: 'none',
          mask: true,
          duration: 1500
        })
      })
  },

4.关于登录按钮的样式

不满意的话你可以让微信自带的buttom opacity = 0
然后自己写一个想要的样式放在自带的buttom的下面

结束语

能坚持到这里的已经是真爱了
希望各位大神 有好的方法 与我交流?

Aisengard
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
微信小程序登录注册页面代码
m0_57790713的博客
02-22 1万+
上面代码中，index.wxml 文件定义了注册页面的视图，包括用户名、密码、确认密码的输入框以及提交按钮和一个跳转到登录页面的链接。index.js 文件定义了注册页面的逻辑，当用户点击提交按钮时会发送注册请求，并根据请求的返回结果进行提示和页面跳转。login.js 文件类似地定义了登录页面的逻辑
uniapp小程序中的登录完整代码（兼容小程序和app）
前端-尔嵘
10-18 1910
一、index.vue。三、login.css。四、main.json。
微信小程序实现登陆页面代码
qq_24806477的博客
09-13 3055
微信小程序简单登陆代码
微信小程序 基于Promise 对 wx.request 封装处理
学而不思则罔,思而不学则殆
04-22 1779
基于 Promise，对微信小程序中 wx.request 请求方法做封装处理。
【uniapp&微信小程序】封装uni.request()
热门推荐
Ghmin的博客
02-27 1万+
在项目开发过程中，往往需要对请求进行二次封装，这篇文章将对uni.request()进行二次封装，并实现多个环境的请求配置，对请求方式，数据格式等进行封装，将请求做到最简化。可以看到，封装之后的请求已经非常精简，配置好各个环境地址，根据请求方式，数据格式，选择对应的封装方法即可。
微信小程序微信小程序微信小程序
最新发布
03-20
微信
微信小程序 实例汇总 完整项目源代码
11-01
微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要针对移动设备，尤其是智能手机。它允许开发者在微信内创建原生体验的应用程序，无需通过应用商店即可供用户使用。这个压缩包文件“wechat”很可能包含了...
微信小程序登录注册页面
05-25
微信小程序的登录注册页面完整设计，纯前台，无后台。
微信小程序登录
09-26
适用于微信小程序初期阶段， 一个简单的登录页面，很简单，里面有大致的框架。 有兴趣的朋友 下载下载可以看一下 。
微信小程序接口封装、原生接口封装、request、params封装
06-10
微信小程序接口封装、原生接口封装、request、params封装 小程序方法封装，简单的小程序接口封装
微信小程序设置全局请求URL及封装wx.request请求操作示例
12-09
本文实例讲述了微信小程序设置全局请求URL及封装wx.request请求操作。分享给大家供大家参考，具体如下： app.js： App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method： 请求方式 * url: 请求地址 * data： 要传递的参数 * callback： 请求成功回调函数 * errFun： 请求失败回调函数 **/ wxRequest(method, url, data, callback, errFun) {
微信小程序笔记——小程序授权登录封装
leo
06-20 5390
一、前言 产品需求：在游客模式登录下，用户做某些操作（如：评论，点赞。。。）时，需要拉起小程序授权登录，在没有单独登录页的情况下（为了方便可以让产品&UI出一个单独的登录页），封装一下小程序授权登录就比较方便了。 1、组件编写 新建Component => author author.wxml: <!-- 未登录情况下拉起授权登录按钮 --> <b...
uniapp 微信小程序登录方法封装
hui_web的博客
08-25 1172
uniapp 微信小程序登录方法封装前言一、登录接口二、登录上代码总结 前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法 一、登录接口 uni.getUserProfile uni.login 二、登录 上代码 代码如下（示例）： // 登录统一接口 tologin: function(cb, ) { // 防止拉起多个登录授权 return new Promise((reslove, reject) => { let userInfo uni.ge
【微信小程序原生】 封装request
AAAXiaoApple的博客
05-11 2898
新建一个request类，对wx.request进行简单封装 在request类里做了以下几件事: 在构造函数里创建默认请求的http header，可以在header里配制一些内容，在对应请求方法中如果没有设置header参数，就使用此默认header参数； 以get post delete put等方法对request进行封装，在发起网络请求不需要重复的写wx.request({method:xxx})这些代码，只要调用getRequest、postRequest等方法就可以了； 在rq.
小程序云开发用户注册页面
aaa44123的博客
07-04 730
微信小程序云开发-注册页面
完整且易读的微信小程序的注册页面（包含倒计时验证码、获取用户信息）
weixin_30783913的博客
05-22 437
目录 1、页面展示 2、wxml代码 3、wxss代码 4、js代码 1、页面展示 2、wxml代码 <!--pages/register/register.wxml--> <scroll-view> <image src='/i...
【小程序】实现登录的流程与封装思路
m0_71485750的博客
09-08 5732
为什么需要用户登录？增加用户的粘性和产品的停留时间；如何识别同一个小程序用户身份？认识小程序登录流程openid和unionid获取code换取authToken用户身份多平台共享账号绑定手机号绑定。
微信小程序出现400或者403错误。
weixin_43673603的博客
11-26 3307
在小程序引用外部的网页api时，突然出现报错400，或者403错误时的解决办法。 1.检查api是否还有效，检查方法为复制api，然后在浏览器打开iain，如果出现返回结果则表明不是api的问题，看2. 2.api的返回集定义：1）定义header:{"Content-Type":'json'}, 3.把http改成https进行访问 4.在微信开发开发平台的合法域名中加入你要访问的域名。 5....
小程序微信登录demo
10-14
小程序微信登录demo是一个示例程序，用于展示小程序如何使用微信登录功能。 首先，用户在小程序中点击登录按钮，触发登录事件。小程序调用微信登录接口，发送请求到微信平台，请求用户的授权登录。 微信平台接收到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值