搭建vue3版taro以及相關api

salad633發表於2024-03-15
VueAPI

1.安裝Taro

1.使用 npm 或者 yarn 全域性安裝 @tarojs/cli
$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

2.專案初始化:

taro init myApp

編譯執行
使用 Taro 的 build 命令可以把 Taro 程式碼編譯成不同端的程式碼，然後在對應的開發工具中檢視效果。
Taro 編譯分為 dev 和 build 模式：
dev 模式（增加 --watch 引數） 將會監聽檔案修改。
build 模式（去掉 --watch 引數） 將不會監聽檔案修改，並會對程式碼進行壓縮打包。 dev 模式生成的檔案較大，設定環境變數 NODE_ENV 為 production 可以開啟壓縮，方便預覽，但編譯速度會下降。

3.內建環境變數

Taro 在編譯時提供了一些內建的環境變數來幫助使用者做一些特殊處理。

process.env.TARO_ENV用於判斷當前的編譯平臺型別。
取值：weapp / swan / alipay / tt / qq / jd / h5 / rn
可以透過這個變數來區分不同環境，從而使用不同的邏輯。
在編譯階段，會移除不屬於當前編譯型別的程式碼，只保留當前編譯型別下的程式碼，例如： 1. 在微信小程式和 H5 端分別引用不同資源：
原始碼 

if (process.env.TARO_ENV === 'weapp') {
  require('path/to/weapp/name')
} else if (process.env.TARO_ENV === 'h5') {
  require('path/to/h5/name')
}

編譯後（微信小程式）

if (true) {
  require('path/to/weapp/name')
}

編譯後（H5）

if (true) {
  require('path/to/h5/name')
}

2. 決定不同端要載入的元件
原始碼（React JSX）

<View>
  {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
  {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>`

編譯後（微信小程式）

<View>
  {true && <ScrollViewWeapp />}
</View>

編譯後（H5）

<View>
  {true && <ScrollViewH5 />}
</View>

元件檔案中跨平臺支援指定平臺保留樣式：

/*  #ifdef  %PLATFORM%  */
模板程式碼
/*  #endif  */

指定平臺剔除樣式：

/*  #ifndef  %PLATFORM%  */
模板程式碼
/*  #endif  */

相關文章