跳到主要内容

谈谈多端相关原理

  • 1、定制了一套标准来抹平不同平台的差异

  • 2、运行时原理：在运行时会根据当前环境，动态地进行对平台代码转换和适配

  • 2、在编译时，会进行转换，主要通过babel插件来转换

    • 微信小程序来说，有.wxml、.wxss、.js、 .json

    • jsx文件转换成小程序的wxml模板，生成小程序的配置文件、页面及组件的代码等等

    • view标签转换h5的div

taro​

taro2​

taro3.4​

  • 主要改动是支持使用 Preact 和 Vue3.2 进行开发

taro3.5​

  • Webpack5

  • 模块联邦的依赖预编译

    • 可以预先把项目的 node_modules 依赖打包为一个模块联邦 remote 应用，再次编译时 Webpack 则无需再对依赖进行编译，从而提升编译速度

  • 支持使用 esbuild 压缩 JS/CSS

  • 支持pnpm

多端开发处理​

  • 环境变量
  • 条件编译
  • 多端文件
    • 虽然内置环境变量虽然可以解决大部分跨端的问题，但是代码需要写很多逻辑判断，影响代码可维护性
    • 可以使用多端文件，来解决跨端差异
    • 原文件名 + 平台类型，如table.h5.js、table.weapp.js
    • 每个端写对应的文件，可以更好的维护

问题总结​

  • h5在钉钉导航标题问题
    • 需要使用钉钉的SDK
  • 在弹出层、二级页面，有些hooks只会在顶层页面才会触发
    • usePageScroll
      • 使用Scroll-View组件替代
    • useReady
  • 页面不会自动刷新问题，比如切换底部tabbar，页面没有刷新
    • 解决办法，在页面的onShow触发请求
  • 样式问题，修改第三方组件
    • 使用styleIsolation: 'shared', 表示设置样式共享。这使得你的组件的样式可以影响到第三方组件