Taro跨端渲染 - Kaiqisan

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒,这篇文章讲讲Taro的多端开发

众所周知，Taro最强大的地方在于其可以多端打包，可以打包成小程序，网页，百度小程序等等，有时候我们一份代码想要打包成多个应用，却想要某一部分模块在不同端显示不同的内容，这个时候，就需要以下的知识点了！

---

关于尺寸

Taro中尺寸单位建议使用px和百分比，Taro默认会对所有单位进行转换，在微信小程序中会转换为rpx

在h5中会转换为rem,如果不想转换，尺寸单位就需要局部或全部大写，写成Px或者PX都行

在实际开发中Taro默认750px作为换算标准，如果您想修改，可以在项目配置文件中修改配置（config/index.js）属性 designWidth到一个具体的您想要达到的数据

多端打包方式

配置文件（config/index.js）修改输出地址，并随着打包目标不同而改变

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

对于这个process.env.TARO_ENV就代表了打包成的目标是微信小程序还是网页还是百度小程序…

这个属性不只是在配置文件中可以使用，它可以在全局使用。

所以我们可以通过这个打包方向的不同来通过判断去执行不同的操作比如条件渲染

if (process.env.TARO_ENV === 'weapp') {
    // 执行一个操作
} else if (process.env.TARO_ENV === 'h5') {
    // 执行另一个操作
}

多端组件

使用taro内部规定的文件命名方式，会根据您打包方向来决定导入的文件（可以是数据也可以是jsx组件）

// demo-comp.h5.js
export default {
    name: '网页'
}

// demo-comp.weapp.js
export default {
    name: '小程序'
}

然后在导入的时候去除 ** 打包名（上面的h5 weapp）** 使用这个方式导入文件。

import name from './components/demo-comp'

然后尝试输出

componentDidMount() {
    console.log(name);
}

结果为（以打包成小程序为例）

最后由于我们打包成小程序，所以在打包的时候导入了demo-comp.weapp.js，获取里面的内容之后，最后输出。

总结

这也算是项目兼容性的一部分了，需要熟知