Taro小程序兼容H5打包问题

Taro小程序兼容H5打包问题

记录在实际开发过程中，所遇到的Taro小程序打包的问题。

文章目录

关于Taro小程序与H5打包兼容性的问题

第一部分：多端运行情况分析

第二部分：第三方UI库打包导致组件尺寸不统一的问题

第三部分：在小程序环境中成功导入app.config.js文件；但在H5环境中遇到错误

第四部分：将Taro程序打包为H5文件时，默认情况下会导致CSS中的图片引用路径发生变化

第五部分：关于Taro不同版本间存在的兼容性问题记录

总结

一、多端同时运行

在某些情况下,为了方便查看小程序与H5的效果配合使用时,往往需要同时运行这两个应用,然而在Taro打包配置中，默认设置会在/dist目录下生成相应的编译文件.当运行小程序并随后启动H5时,系统会自动将已编译好的/dist目录的内容覆盖掉.

参考文档

    const const {
    	...,
    	outputRoot: `dist/${process.env.TARO_ENV}`
    }

注意：小程序还要要修改 project.config.json 的 miniprogramRoot， 如：

    "miniprogramRoot": "dist/weapp/"

打开不同的控制台，将需要调试的平台命令跑起来

    npm run dev:weapp
    npm run dev:h5

在 dist 目录下会多两个文件

    dist/weapp
    dist/h5

请注意，在修改完代码后，请确保小程序重新选择项目路径 /dist/weapp；否则你可能会遇到无法生效的问题。

二、第三方UI库打包后，组件大小不一致

config/index编译配置文件中修改

      h5: {
    esnextModules: ['taro-ui'],
      }

三、在小程序中，引入 app.config.js 没有问题，在h5中，引入报错

在获取 app.config.js 配置路由路径的过程中，在小程序导入操作是正常的；然而在H5环境中会触发错误。通过打包结果分析可知，在 weapp/dist/ 存储有 app.config.js 文件；与此相对应的是，在 H5 环境下该文件并未生成。具体错误信息如下：

    "export 'default' (imported as 'app') was not found in '../app.config.js'

为了独立放置到一个新的js文件中，在 app.config.js 采用import方式引入，在其他地方导入时也是如此。

四、taro 打包成 h5，css中的图片引入路径会改变

这是因为 publicPath 打包后输出的路径， 默认/

当 publicPath 设置为 '/' 时，在线资源将从网站的根目录加载。这有助于确保在线资源具有统一的路径。然而，在某些情况下（如本地开发环境或部署于非默认根目录），可能会导致在线资源中的 CSS 和 JS 文件加载出现问题。

当将 publicPath 设置为 ./ 时：如果将其设为相对于当前页面的相对路径 ./，那么资源加载路径会被确定为相对于服务器当前页面的位置。这可能导致在 CSS 中背景图路径的解析出现问题，因为这些背景图通常需要从项目根目录中进行解析以确保正确加载。

当您在使用二级域名或者不在二级域名的情况下（例如 https://www.baidu.com/test 为例），H5打包完成后应放置于 www.baidu.com 域名目录下的 test 文件位置，并将 publicPath 设置为 ...

    publicPath: '/test/'

注意：publicPath 和 nxgix 也有关联，这些方法不一定适配你当前的项目。

五、taro部分版本问题记录

3.1   Swiper 组件在 IOS h5中每张图片第一次加载时，会将页面重新渲染一次，往下滑动之后，会造成会返回顶部；
    3.3.2   Swiper 组件在 IOS h5中每张图片第一次加载时，会将页面重新渲染一次，往下滑动之后，会造成会返回顶部；
    3.3.3  	Swiper 组件刷新问题处理了，h5 第一次加载会有白屏可能。

总结

以上就是在处理Taro小程序兼容H5过程中的打包问题，在这个过程中可能会遗漏一些记录。不过目前代码已经能够运行，在讨论其他兼容问题时会进一步优化。js和组件兼容问题后续内容将在介绍进行详细记录。