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，擷取裡面的内容之後，最後輸出。

總結

這也算是項目相容性的一部分了，需要熟知