如何在小程序实现多角色切换

730 阅读2分钟

角色切换场景

一般的场景个号小程序很难遇到在同一个小程序做多角色切换的场景。但在企业微信私域环境,随着客户数据维度的增加,如:多店铺、多区域、管理者等。客户会期望不同维度或者权限的人展示不同的信息。

在实现多角色需求之前公司的方案是:每个角色开发一个对应的小程序。这种方案本质上没问题。迫使我们做出的改变的原因是:

  • SAAS客户需要同时配置多个小程序会增加配置成本
  • 未来我们要增加到第三个角色,增加一个小程序就会增加维护成本
  • 针对非购买的客户想展示基础功能如:2个tabBar

小程序限制条件

当然做多角色的小程序是有风险的,微信小程序对主包大小、分包数量是有限制的。过多的多角色开发势必会对主包的打包造成影响,当前微信小程序对限制如下:

  • 单个分包/主包大小不能超过 2M
  • 整个小程序所有分包大小不超过 30M(服务商代开发的小程序不超过 20M)
  • 需要自定义tabBar,比如一个角色有5个tabBar,另外一个角色只需要3个tabBar ,基础配置用户只有2个tabBar。PS: 微信小程序最多只能有5个tabbar项

其他注意事项

其他的注意事项如下:

  • 是否使用了图表库。主包只有2M,除非你们有其他的渠道提升主包的大小。PS: 我们使用了echarts.js大概有350KB

多角色切换实现

角色切换示例:

多角色切换的示例使用场景如下:

多角色切换的代码实现如下:

// 涉及到的微信小程序接口如下:
wx.reLaunch({}) // 该接口会关闭所有页面, 使用其他路由接口会tabbar错乱的情况
wx.switchTab({}) // 切换角色后定位到tabBar首页

// 事件订阅
Event.$emit('') // 更新不同角色的tabBar

多角色切换的UI显示如下:

使用中间页切换角色:

一键切换角色代码如下:

Event.$emit({name: "update-tabbar"});
wx.reLaunch({
  url: '/pages/tab/home', 
  complete: () => {
    wx.switchTab({ url: '/pages/tab/home' });
  },
});

结语

技术改变了什么?