Taro开发企微、微信小程序

前言

本文旨在记录个人在使用Taro开发一套代码用于企微和微信小程序时，遇到的一些问题，希望我的踩坑经历可以帮到大家，如果大佬有更好的意见欢迎提出！

背景

刚入职公司接到了一个企微小程序，需要处理兼容到微信小程序。在调研之后发现主要是几个方面： api兼容、登录、构建配置兼容、插件兼容

api 兼容

微信小程序大部分api都是企微和微信通用的，除了企微的 wx.qy 这个 api，所以当页面需要判断是企微还是微信只需要判断 wx.qy 是否不为空就行。并且针对使用了 wx.qy 的部分做好小程序端的逻辑补充就行。

登录

企微通过加入企业方式可以直接使用小程序，不需要登录。微信需要获取用户信息 token 保存到数据库进行登录： 新增一个登录页面用于微信登录，在闪屏页面判断微信端时跳转微信登录，企微端进行首页展示

  useEffect(() => {
    // 设置延迟时间后隐藏splash界面
    setTimeout(() => {
      if (wx && wx.qy) {
        Taro.navigateTo({
          url: '你的首页',
        });
      } else {
        Taro.navigateTo({
          url: '你的登录页',
        });
      }
    }, 1500);
  });

构建配置兼容

首先需要根据平台不同，去配置不同的appId，利用环境变量去配置不同的 appid, .env.work 和 .env.weapp

TARO_APP_ID= "各自的appid"

然后下载 cross-env，配置 package.json 的构建脚本

  "scripts": {
    "build:weapp": "cross-env PLATFORM=weapp taro build --type weapp --env weapp",
    "build:qywx": "cross-env PLATFORM=qywx taro build --type weapp --env work --qywx"
  }

插件兼容

在全局配置 app.config.js 根据当前构建环境的不同去配置不同的插件

// 判断当前环境该使用哪些插件
const plugins =
  process.env.PLATFORM === 'qywx'
    ? {
        插件a: {
          version: 'xx',
          provider: 'appid',
        },
      }
    : {
        插件b: {
          version: 'xx',
          provider: 'appid',
        },
      };
      
// 声明需要使用插件里的哪些组件
const usingComponents =
  process.env.PLATFORM === 'qywx'
    ? { 'ww-open-data': 'plugin://contactPlugin/ww-open-data' }
    : { login: 'plugin://user-info/login' };
    
export default defineAppConfig({  
    // 其他配置
    plugins,
    usingComponents
})

最后执行构建命令打开小程序，可以根据构建的平台选择不同的小程序模式进行调试