您现在的位置是:首页 >其他 >【taro react】---- 解决H5接入uni-app版本的IM网站首页其他

【taro react】---- 解决H5接入uni-app版本的IM

Rattenking 2024-10-25 12:01:04
简介【taro react】---- 解决H5接入uni-app版本的IM

1. 问题

由于项目开发比较紧张,腾讯 IM 的接入就使用了 TUIKit 含UI集成方案,遇到的问题,uni-app的UI本来就是一个单独的项目,需要集成到现有的 Taro React 中,就只能作为一个独立的项目,不跳转时不影响原有逻辑。

2. 解决办法

  1. 单独搭建一个 IM 的项目,需要使用的时候,跳转过去;
  2. 在当前项目中创一个静态的文件夹,打包编译的时候不编译静态文件夹中的文件,直接复制到编译后的生产目录。

3. 采用方案二解决

3.1 copy

用于把文件从源码目录直接拷贝到编译后的生产目录。

3.2 copy.patterns

  1. 用于指定需要拷贝的文件或者目录,每一项都必须包含 from 、to 配置,分别代表来源和需要拷贝到的目录。同时可以设置 ignore 配置来指定需要忽略的文件, ignore 是指定的 glob 类型字符串,或者 glob 字符串数组。
  2. 注意,from 必须指定存在的文件或者目录,暂不支持 glob 格式。from 和 to 直接置顶项目根目录下的文件目录,建议 from 以 src 目录开头,to 以 dist 目录开头。
  3. 一般有如下的使用形式:
module.exports = {
  // ...
  copy: {
    patterns: [
      { from: 'src/asset/tt/', to: 'dist/asset/tt/', ignore: ['*.js'] }, // 指定需要 copy 的目录
      { from: 'src/asset/tt/sd.jpg', to: 'dist/asset/tt/sd.jpg' } // 指定需要 copy 的文件
    ]
  }
}

3.3 copy.options

拷贝配置,可以指定全局的 ignore:

module.exports = {
  // ...
  copy: {
    options: {
      ignore: ['*.js', '*.css'] // 全局的 ignore
    }
  }
}

4. 实际配置

4.1 配置代码

// 获取环境变量
const env = JSON.parse(process.env.npm_config_argv)['cooked'][1].split(':')[1];

module.exports = {
  // ...
  // 编译后的生产目录配置
  outputRoot: `dist/dist_${env}`,
  copy: {
    // 判断环境,h5时不编译,直接拷贝到编译后的生产目录
    patterns: env == 'h5' ? [
      { from: 'src/static', to: `dist/dist_${env}/static` }
    ] : []
  }
}

4.2 编译结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sl46DCjH-1686644334411)(image.png)]

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。