iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >微信小程序用户授权环节实现过程
  • 235
分享到

微信小程序用户授权环节实现过程

微信小程序用户授权小程序授权微信授权 2023-01-31 12:01:29 235人浏览 八月长安
摘要

目录公共组件权限判断微信授权验证wx.getUserProfile()手机号帐号信息验证在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信

在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信息的授权后,获取到相关信息

因为不止一个页面的跳转需要此授权校验的功能,所以我们选择封装一个授权校验的公共组件,跳转到需要验证的页面,需要进行授权登录

公共组件权限判断

封装公共组件,在需要使用校验的地方引入,进行判断

逻辑判断:

存入了手机号,则校验中的回调函数允许执行

未存入手机号,则先判断有无存入微信授权信息,(有的话,去存手机号,没有的话,先去存授权信息)

function CheckAuth(callback){
  // wx.getStorageSync 获取微信本地存储
  // 判断是否有存入手机号进本地存储
  if(wx.getStorageSync('tel')){
    //处理业务
    callback()
  }else{
    // 没有存入手机号,但是判断是否有认证信息的 token
    if(wx.getStorageSync('token')){
      wx.navigateTo({
        url: '/pages/telfORM/telform',
      })
      // 没有存入手机号,也没有 token 认证信息
    }else{
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }
  }
}
export default CheckAuth

例如,shopcar 购物车组件:

校验通过情况:(已登陆过)

在进行获取购物车数据前,触发 CheckAuth( ),且传入其中的回调函数为获取对应列表数据,若有手机号,则运行执行该回调函数,获取数据,渲染数据

  
  onShow() {
    // 验证通过后可以触发回调函数
    CheckAuth(()=>{
      let {nickName} = wx.getStorageSync('token')
      let tel = wx.getStorageSync('tel')
      request({
        url:`/carts?_expand=Good&username=${nickName}&tel=${tel}`
      }).then(res=>{
       this.setData({
         cartList:res
       })
      })
     })
  },

校验未通过情况:(未存入任何信息,首次登陆)

未获取到本地的存储授权信息及账号信息,则进行页面的跳转,跳转至授权页面

function CheckAuth(callback){
    // 已存入过手机号,直接可获取数据
  if(wx.getStorageSync('tel')){
    //处理业务
    callback()
  }
    // 没有存入手机号,但是判断是否有认证信息的 token
    else{
    if(wx.getStorageSync('token')){
      wx.navigateTo({
        url: '/pages/telform/telform',
      })   
    }
     // 没有存入手机号,也没有 token 认证信息
     else{
      wx.navigateTo({
        url: '/pages/auth/auth',
      })
    }
  }
}

微信授权验证wx.getUserProfile()

使用 wx.getUserProfile( ) 获取当前微信的信息

验证成功后,在成功回调函数里存储 token 信息,再次跳转至手机号存储页面

  // 获取 微信授权 验证
  handleAuth(){
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success:(res)=>{
        wx.setStorageSync('token', res.userInfo)
        wx.navigateTo({
          url: '/pages/telform/telform',
        })
      }
    })
  },

手机号帐号信息验证

页面结构:

<mp-form-page title="绑定手机号" subtitle="验证微信账号后需要绑定手机号">
  <mp-cells title="信息">
    <mp-cell>
      <input class="weui-input" placeholder="请输入手机号" bindinput="formInputChange" />
      <view slot="footer" class="weui-vcode-btn">获取验证码</view>
    </mp-cell>
  </mp-cells>
  <view slot="button">
    <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
  </view>
</mp-form-page>

引入 WeUI:

{
  "usinGComponents": {
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell"
  },
  "navigationBarTitleText": "手机号绑定"
}

提交手机号:

未存入过信息,使用 post 请求存入新数据,跳转回正常使用页面

存入过了信息,不再重复存,跳转回正常使用页面

跳转返回页面:wx.navigateBack()

  // 点击确定 提交手机号
  submitForm(){
    // 手机号存入本地
    wx.setStorageSync('tel', this.data.tel)
    // 试着去数据库找一下,相同 手机号 和 微信验证 的数据是否有
    request({
      url:`/users?tel=${this.data.tel}&nickName=${wx.getStorageSync('token').nickName}`
    }).then(res=>{
      // 数据库未存过信息,post请求,去数据库中新建一个数据,带上token和手机号
      if(res.length===0) {
        request({
          url:`/users`,
          method:'post',
          data:{
            ...wx.getStorageSync('token'),
            tel:this.data.tel
          }
        }).then(res=>{
         // 回退两级,返回到 购物车 或 个人中心
          wx.navigateBack({
            delta:2
          })
        })
      } 
      // 数据库存过信息,就不再重复存入,跳转回正常页面使用即可
      else {
        wx.navigateBack({
          delta:2
        })
      }     
    })
  },

到此这篇关于微信小程序用户授权环节实现过程的文章就介绍到这了,更多相关小程序用户授权内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 微信小程序用户授权环节实现过程

本文链接: https://www.lsjlt.com/news/191770.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 微信小程序用户授权环节实现过程
    目录公共组件权限判断微信授权验证wx.getUserProfile()手机号帐号信息验证在商城项目中,我们需要对部分的页面,进行一个授权的判别,例如购物车,及个人中心,需要完成用户信...
    99+
    2023-01-31
    微信小程序用户授权 小程序授权 微信授权
  • 【微信小程序开发】小程序微信用户授权登录(用户信息&手机号)
    🥳🥳Welcome Huihui's Code World ! !🥳🥳 接下来看看由辉辉所写的关于小程序的相关操作吧 目录 🥳🥳Welc...
    99+
    2023-10-26
    小程序 微信小程序 微信 1024程序员节
  • 微信小程序实现授权登录之获取用户信息
    本文实例为大家分享了微信小程序实现获取用户信息的具体代码,供大家参考,具体内容如下 小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内...
    99+
    2022-11-13
  • 微信小程序用户授权最佳实践指南
    前言 开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识别,就要获取相机权限、你要做位置地图功能、就要获取用户的位置权限,你要将图片保存...
    99+
    2022-11-12
  • 怎么在微信小程序中为用户授权
    这期内容当中小编将会给大家带来有关怎么在微信小程序中为用户授权,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。开发微信小程序中,经常会用到获取一些用户权限的页面,比如你要登录,就要获取个人信息、你要做人脸识...
    99+
    2023-06-14
  • 简单实现微信小程序授权登录
    可以直接复制粘贴,只需要改一些东西就可以了 首先在wxml中用微信自带的button开放属性 授权登录 然后在对应的js中创建一个login方法,因为上面bindtap指向的是login,所以就要创建一个新的方法 login(evt){/...
    99+
    2023-10-04
    php 微信小程序
  • 微信小程序如何实现授权登录
    这篇文章给大家分享的是有关微信小程序如何实现授权登录的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、前言由于微信官方修改了 getUserInfo 接口,所以现在无法实现一进入...
    99+
    2022-10-19
  • 微信小程序实现授权登录之怎么获取用户信息
    这篇文章主要讲解了“微信小程序实现授权登录之怎么获取用户信息”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序实现授权登录之怎么获取用户信息”吧!小程序登录小程序可以通过微信官方提供的...
    99+
    2023-06-30
  • 微信小程序如何开发用户授权登陆
    这篇文章主要介绍了微信小程序如何开发用户授权登陆,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。准备:微信开发者工具下载地址:https://...
    99+
    2022-10-19
  • 微信小程序中wx.getUserInfo如何引导用户授权
    小编给大家分享一下微信小程序中wx.getUserInfo如何引导用户授权,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体如下:首先,在page外定义一个函数用户判断是否为空对象var&...
    99+
    2022-10-19
  • 微信小程序用户授权获取手机号(getPhoneNumber)
    前言 小程序有一个获取用户很便捷的api,就是通过getPhoneNumber获取用户的已经绑定微信的手机号码。有一点要大家注意,现在微信和注重用户体验,有些方法都是需要用户主动去触...
    99+
    2022-11-11
  • 微信小程序如何实现用户授权弹窗并拒绝时引导用户重新授权
    小编给大家分享一下微信小程序如何实现用户授权弹窗并拒绝时引导用户重新授权,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!先看效果图...
    99+
    2022-10-19
  • 如何实现微信小程序之授权登录
    这篇文章主要介绍如何实现微信小程序之授权登录,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!1.实现思路自己写一个微信授权登录页面让用户实现点击的功能,也就是实现了通过 button 组件去触发 getUserInof...
    99+
    2023-06-14
  • 微信小程序如何调用微信授权窗口
    这篇文章主要介绍了微信小程序如何调用微信授权窗口,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。1. 具体实现app.js的onLaunch(...
    99+
    2022-10-19
  • 【微信授权登录】uniapp开发小程序,实现获取微信授权登录功能
    一、解题思路: 微信授权登录(获取用户信息) 1.先获取用户信息——用户授权允许后,通过调用uni.login 可以获取到code。 2.拿着获取到的code去调用——登录接口,可以获取到token。 3.把token存入缓存。就可以在页面...
    99+
    2023-08-16
    小程序 微信 javascript
  • 微信小程序中如何实现用户授权以及判断登录是否过期
    小编给大家分享一下微信小程序中如何实现用户授权以及判断登录是否过期,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!初始界面:判断用...
    99+
    2022-10-19
  • 微信小程序如何授权获取用户详细信息openid
    这篇文章主要介绍微信小程序如何授权获取用户详细信息openid,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!小程序获取用户的头像昵称openid之类第一种使用wx.getUserIn...
    99+
    2022-10-19
  • 如何实现uni-app微信小程序授权登录
    小编给大家分享一下如何实现uni-app微信小程序授权登录,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一、appID相关申请和配置1. appid获取方式登录微...
    99+
    2023-06-22
  • 【Springboot】整合wxjava实现 微信小程序:授权登录
    文章目录 一、wxjava是什么二、使用步骤1.引入依赖2.配置yml3.小程序的配置4.后端的业务逻辑代码controllerserviceimpldto 5.前端的业务逻辑代码新建...
    99+
    2023-09-09
    微信小程序 spring boot 小程序
  • 微信小程序授权登录功能如何实现
    这篇文章主要介绍“微信小程序授权登录功能如何实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序授权登录功能如何实现”文章能帮助大家解决问题。微信授权登录我们的项目开发有时候用到用户的一些信...
    99+
    2023-07-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作