人工智能研究中心快递柜——代码分析六

最新推荐文章于 2025-12-31 21:08:34 发布

原创最新推荐文章于 2025-12-31 21:08:34 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能

本文分析了微信小程序中针对不同用户权限的管理机制。通过wx:if判断用户类型，展示不同权限的数据，并利用block标签循环userList显示用户信息。此外，详细介绍了mantle蒙层中的按钮操作，如单个和批量添加用户的逻辑处理。在JavaScript部分，定义了param参数以处理权限和操作类型，根据页面加载时的用户角色切换不同页面，并提供了删除用户的功能。

2021SC@SDUSC

index.wxml

index.js

在微信端小程序部分，对于不同身份的用户会授予不同的使用权限，以使不同权限的功能被相应级别的用户使用，本次主要分析关于权限管理部分。

index.wxml

使用view style设置全局属性，这一部分是与css中相似的。在中间的内容块部分利用for函数循环userList，以用户id作为主键，获得用户列表。block标签中使用wx:if，进行用户类型判断，根据不同类型显示不同的权限数据。

 <block>
      <view class='item'> 
        <image wx:if="{{item.avatarurl === null}}" class='poster' src='https://i0.hdslb.com/bfs/face/member/noface.jpg@96w_96h_1c.webp'></image>
        <image wx:else class='poster' src='{{item.avatarurl}}'></image>
        <view class='vertical'>
          <text class='title'>{{(item.name == null || item.name == 'null') ? '' : item.name}}</text>
          <text class='sub-title'>{{item.phone}}</text>
        </view>
        <image id="{{item.id}}" src='../../img/icon_remove.png' style="width: 60rpx; height: 60rpx; margin: 20rpx" bindtap="removeUser"></image>
      </view>
    </block>

利用mantle蒙层进行权限的增加，button部分size表示按钮大小，type表示按钮类型，bindtap实现事件的绑定，事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

 <mantle id="mantle" option="{{mantle}}">
    <button size="mini" type="primary" bindtap="singleAddPage">单个添加</button>
    <button size="mini" type="primary" bindtap="batchAddPage">批量添加</button>
  </mantle>

index.js

在这部分定义了param参数，该参数包含了权限与柜子的操作类型，分别用page和cabinetSri表示，不同的权限会出现不同的页面。该参数的定义首先是定义了data，其中包含了userList、type、cabinetSri等参数，然后定义了方法，通过this.data.参数值进行参数的设置。

 let param = {
      phone: wx.getStorageSync('phone'),
      cabinetSri: this.data.cabinetSri,
      type: this.data.type,
    }

首先页面加载时onload通过wx.getStorageSync获取param的值，然后使用switch语句进行不同页面的选择。

switch(param.page) {
      case constUtil.STUDENT_MANAGE_PAGE:
        this.setData({
          type: constUtil.ROLE_STUDENT,
          text: '学生',
        })
        console.log("--page switch-- STUDENT_MANAGE_PAGE")
        break;
      case constUtil.TEACHER_MANAGE_PAGE:
        this.setData({
          type: constUtil.ROLE_TEACHER,
          text: '教师',
        })
        console.log("--page switch-- TEACHER_MANAGE_PAGE")
        break;
      default:
        console.log("--page switch-- default")
    }

之后实现了删除用户的方法，在param中有设置了ID属性，调用自定义的request方法，利用ID属性进行删除。

在本部分也定义了在上述index.wxml中使用的singleAddPage和batchAddPage绑定按钮的响应事件的方法。

singleAddPage: function() {
    let old = wx.getStorageSync('param');
    let param = {
      ...old,
      addType: constUtil.SINGLE_ADD_PAGE,
    }
    console.log("-------singleAddPage-----", param)
    wx.setStorageSync('param', param);
    wx.navigateTo({
      url: '/pages/manage/add/single/index'
    })
  },

关于这部分使用到的'/pages/manage/add/single/index'代码将在后续进行分析。