Taro框架的使用

背景

Taro是繼Wepy、Mpvue之后，為解決終端碎片化問(wèn)題的又一框架

Taro安裝

Taro 是一個(gè)基于 NodeJS 多端統(tǒng)一開(kāi)發(fā)框架，在安裝使用 Taro 之前需要確保已安裝好 Node 環(huán)境。

Node安裝

NPM 與 Yarn

  • NPM(https://www.npmjs.com/get-npm)
  • Yarn(https://yarnpkg.com)
    Yarn 是由 Facebook、Google、Exponent 和 Tilde 聯(lián)合推出了一個(gè)新 Node 包管理工具，相比于 NPM，它具有速度更快、安裝版本統(tǒng)一、更加清爽簡(jiǎn)潔等特點(diǎn)。

查看版本號(hào)

$ npm -v 
$ yarn -v

taro-cli

  • 全局安裝 Taro 開(kāi)發(fā)工具 @tarojs/cli
  • NPM
$ npm install -g @tarojs/cli
  • Yarn
$ yarn global add @tarojs/cli
  • 查看Taro 版本
$ taro -v

使用

創(chuàng)建項(xiàng)目

$ taro init myApp
  • NPM 5.2+ 也可在不全局安裝的情況下使用 npx 創(chuàng)建模板項(xiàng)目：
$ npx @tarojs/cli init myApp
image.png

  • 完成之后


    image.png

  • node版本我使用的是 v11.10.1

  • 需要輸入的幾項(xiàng)配置：


    image.png

  • 目前 Taro 已經(jīng)支持微信/百度/支付寶小程序、H5 以及 ReactNative 等端的代碼轉(zhuǎn)換，針對(duì)不同端的啟動(dòng)以及預(yù)覽、打包方式并不一致。

微信小程序

選擇微信小程序模式，需要自行下載并打開(kāi)微信開(kāi)發(fā)者工具，然后選擇項(xiàng)目根目錄進(jìn)行預(yù)覽。
微信小程序編譯預(yù)覽及打包：

# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 僅限全局安裝
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用戶(hù)也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp

百度小程序

選擇百度小程序模式，需要自行下載并打開(kāi)百度開(kāi)發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。
百度小程序編譯預(yù)覽及打包：

# npm script
$ npm run dev:swan
$ npm run build:swan
# 僅限全局安裝
$ taro build --type swan --watch
$ taro build --type swan
# npx 用戶(hù)也可以使用
$ npx taro build --type swan --watch
$ npx taro build --type swan

支付寶小程序

選擇支付寶小程序模式，需要自行下載并打開(kāi)支付寶小程序開(kāi)發(fā)者工具，然后在項(xiàng)目編譯完后選擇項(xiàng)目根目錄下 dist 目錄進(jìn)行預(yù)覽。
支付寶小程序編譯預(yù)覽及打包：

# npm script
$ npm run dev:alipay
$ npm run build:alipay
# 僅限全局安裝
$ taro build --type alipay --watch
$ taro build --type alipay
# npx 用戶(hù)也可以使用
$ npx taro build --type alipay --watch
$ npx taro build --type alipay

H5

H5 模式，無(wú)需特定的開(kāi)發(fā)者工具，在執(zhí)行完下述命令之后即可通過(guò)瀏覽器進(jìn)行預(yù)覽。

H5 編譯預(yù)覽及打包：

# npm script
$ npm run dev:h5
# 僅限全局安裝
$ taro build --type h5 --watch
# npx 用戶(hù)也可以使用
$ npx taro build --type h5 --watch

React Native

React Native 端運(yùn)行需執(zhí)行如下命令，React Native 端相關(guān)的運(yùn)行說(shuō)明請(qǐng)參見(jiàn) React Native 教程。

# npm script
$ npm run dev:rn
# 僅限全局安裝
$ taro build --type rn --watch
# npx 用戶(hù)也可以使用
$ npx taro build --type rn --watch

更新 Taro

# taro
$ taro update self
# npm 
npm i -g @tarojs/cli@latest 
# yarn 
yarn global add @tarojs/cli@latest

更新項(xiàng)目中 Taro 相關(guān)的依賴(lài)，這個(gè)需要在你的項(xiàng)目下執(zhí)行。

$ taro update project

React 核心語(yǔ)法

JSX 語(yǔ)法

  • JSX 允許在 JS 中直接使用 XML 標(biāo)記的方式來(lái)聲明界面
// 只看 render 函數(shù)，絕大多數(shù)情況下 render 函數(shù)里都會(huì)有 XML 標(biāo)記
render () {
  return (
    <View className='index'>
      <View className='title'>{this.state.title}</View>
      <View className='content'>
        {this.state.list.map(item => {
          return (
            <View className='item'>{item}</View>
          )
        })}
        <Button className='add' onClick={this.add}>添加</Button>
      </View>
    </View>
  )
}
  • class 變成 className 【class是JavaScript保留關(guān)鍵字】
  • 上述代碼通過(guò) babel 轉(zhuǎn)換為 JS 代碼
  • 不能定義變量，使用 if/else 等，你可以用提前定義變量；用三元表達(dá)式來(lái)達(dá)到同樣的效果。
  • 列表渲染，一般是用數(shù)組的 map 函數(shù)
  • 事件綁定上，使用 on + 事件名稱(chēng)

React 組件 （component）

class Demo extends Component {
  // ...
  render () {
    return <View className='test'>{this.state.num}</View>
  }
}
  • 組件類(lèi)的第一個(gè)字母必須大寫(xiě),否則會(huì)報(bào)錯(cuò)。
  • 組件類(lèi)只能包含一個(gè)頂層標(biāo)簽，否則也會(huì)報(bào)錯(cuò)。
  • 每個(gè) React 組件都會(huì)有一個(gè) render 函數(shù)，用于返回該組件的 JSX 片段
  • 也可以在 render 函數(shù)里返回另一個(gè)組件，即組件之間的相互嵌套

Props

  • 父組件傳給子組件的數(shù)據(jù),會(huì)掛載在子組件的 this.props 上
  • 組件中如果收到了新的 props，就會(huì)重新執(zhí)行一次 render 函數(shù)，也就是重新渲染一遍。
// 子組件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
// 父組件
class Demo extends React.Component {
  render () {
    return <Welcome name='aotu,taro!' />
  }
}
// 最終頁(yè)面上會(huì)渲染出 <h1>Hello, aotu,taro!</h1>

state

  • 是屬于組件自己內(nèi)部的數(shù)據(jù)狀態(tài)，一般在 constructor 構(gòu)造函數(shù)里初始化定義 state
  • state 需要變化時(shí)，是不允許隨便更改的，需要調(diào)用 this.setState 來(lái)進(jìn)行更改
  • 只把跟組件內(nèi)部視圖有關(guān)聯(lián)的數(shù)據(jù)，變量放在 state 里面，以此避免不必要的渲染。
class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: 'aotu,taro!'};
  }
  render() {
    return <h1>Hello, {this.state.name}</h1>;
  }
}

組件的生命周期

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentWillMount() {}
 
  componentDidMount() {}

  componentWillUpdate(nextProps, nextState) {}
    
  componentWillReceiveProps(nextProps) {}  
  
  componentDidUpdate(prevProps, prevState) {}

  shouldComponentUpdate(nextProps, nextState) {}

  componentWillUnmount() {}
  
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

  • constructor，顧名思義，組件的構(gòu)造函數(shù)。一般會(huì)在這里進(jìn)行 state 的初始化，事件的綁定等等

  • componentWillMount，是當(dāng)組件在進(jìn)行掛載操作前，執(zhí)行的函數(shù)，一般緊跟著 constructor 函數(shù)后執(zhí)行

  • componentDidMount，是當(dāng)組件掛載在 dom 節(jié)點(diǎn)后執(zhí)行。一般會(huì)在這里執(zhí)行一些異步數(shù)據(jù)的拉取等動(dòng)作

  • shouldComponentUpdate，返回 false 時(shí)，組件將不會(huì)進(jìn)行更新，可用于渲染優(yōu)化

  • componentWillReceiveProps，當(dāng)組件收到新的 props 時(shí)會(huì)執(zhí)行的函數(shù)，傳入的參數(shù)就是 nextProps ，你可以在這里根據(jù)新的 props 來(lái)執(zhí)行一些相關(guān)的操作，例如某些功能初始化等

  • componentWillUpdate，當(dāng)組件在進(jìn)行更新之前，會(huì)執(zhí)行的函數(shù)

  • componentDidUpdate，當(dāng)組件完成更新時(shí)，會(huì)執(zhí)行的函數(shù)，傳入兩個(gè)參數(shù)是 prevProps 、prevState

  • componentWillUnmount，當(dāng)組件準(zhǔn)備銷(xiāo)毀時(shí)執(zhí)行。在這里一般可以執(zhí)行一些回收的工作，例如 clearInterval(this.timer) 這種對(duì)定時(shí)器的回收操作

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容