前端——》搭建后台管理系统的小程序版本

最新推荐文章于 2025-05-08 11:34:44 发布

Mr_xujiee

最新推荐文章于 2025-05-08 11:34:44 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/nienianzhi1744/article/details/107317716

本文介绍了如何搭建一个后台管理系统的微信小程序版本，包括微信登录、账号密码登录、主页功能（搜索、详情、导出、渠道量统计）、渠道及通道管理、订单管理等功能。重点讲解了微信登录逻辑，涉及获取code、sessionKey以及解密手机号的过程，并提到了侧边栏条件筛选的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此小程序的登录有两种方式，分别是微信授权登录和账号密码登录。账号密码登录比较简单，就不多说。
由于该小程序不向大众开放，只允许内部员工使用，所以并非所有微信号授权以后都可以登录，手机号与账号密码在同一张数据库表，有且仅有在电脑端后台注册过的手机号才允许微信授权登录。
手机号授权登录操作流程：

点击页面上的微信登录按钮，微信自动弹出官方授权个人信息的弹窗
点击允许后弹出我们自定义的授权手机号弹窗，点击授权，弹出官方授权手机号的弹窗
再次点击允许后我们就获取到了手机号，此时将手机号传到后台去匹配用户名密码，直接在后台完成后续登录步骤

手机号授权登录的逻辑流程：

用手机号登录的逻辑是用手机号去后台匹配账户名和密码，匹配上后以账户名和密码直接在后台登录。当然前提是怎么获取到手机号，大概分为三步，如下
获取sessionKey：参数appid，secretkey，grantType，和code。前三个参数都是固定的，可以在微信小程序后台查到，最后一个code就是wx.login返回的。页面点击微信登录弹出授权个人信息窗后点击允许授权，之后我们调用微信的wx.login({})方法，该方法会返回openid和code，opneid暂时用不到，先不管他。我们在自己的服务器上需要写一个接口来通过这个code换取sessionKey，当然直接在js以code为参数请求官方的接口也可以获取到sessionKey。随后将sessionKey返回给前端。
解密得到手机号：参数：encryptedData，iv，sessionKey。页面上必须要有一个获取手机号的按钮，用户点击后弹出官方的授权按钮，点击允许授权后就会获得加密的手机号字符串encryptedData，这个encryptedData字符串必须要iv和sessionKey才能解密。这个解密的过程可以再js中完成，也可以在java服务器端完成。解密完成后就获取到手机号了。sessionKey我们已经获取到了，怎么获取encryptedData和iv呢，只需要一个button 按钮就好了，open-type=“getPhoneNumber” bindgetphonenumber="getPhoneNumber"这两个属性是官方固定的，不允许修改：

<button class="cu-btn line-green text-green" style="margin-left:10px" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">确定</button>

  getPhoneNumber: function (e) {
   
   
    var that = this;
    var data = {
   
   
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv,
      sessionKey: that.data.session_key,
    }
    console.log(data);
    if (e.detail.errMsg == "getPhoneNumber:ok") {
   
   
      //  做解密的操作，可以直接js解密，也可以请求自己的后台服务器解密
    }
  },

要点总结：
先授权个人信息获取到code，再根据code获取到sessionKey，根据sessionKey解密字符串得到手机号。授权个人信息和手机号只能通过官方按钮得到返回值，没有接口进行授权。
页面上至少有两个按钮，一个是授权个人信息，一个是授权手机号，先授权个人信息，再授权手机号。点击授权个人信息后弹出官方授权个人信息弹窗，允许后再点击授权手机号按钮，随后会弹出官方授权个人手机号弹窗，点击允许后就可以获取到加密串和iv了，随后就解密

侧边栏条件筛选

此处用到了一个侧边栏插件side，这个插件找不到出处了，侵删。
js：

// components/side/index.js
var touchDot = 0; //触摸时的原点
var time = 0; //  时间记录，用于滑动时且时间小于1s则执行左右滑动
var interval = ''; // 记录/清理 时间记录
var nth = 0; // 设置活动菜单的index
var nthMax = 5; //活动菜单的最大个数
var tmpFlag = true; // 判断左右华东超出菜单最大值时不再执行滑动事件
Component({
   
   
    properties: {
   
   
        //是否有遮罩
        mask: {
   
   
            type: Boolean,
            value: true
        },
        //是否全屏
        fullScreen: {
   
   
            type: Boolean,
            value: false,
        },
        //类型 左侧 右侧
        type: {
   
   
            type: String,
            value: 'left'
        },
        //背景色
        background: {
   
   
            type