Taro Vue

入口組件

每一個(gè) Taro 應(yīng)用都需要一個(gè)入口組件用來注冊應(yīng)用，入口文件默認(rèn)是 src 目錄下的 app.js。 在 Taro 中使用 Vue，入口組件必須導(dǎo)出一個(gè) Vue 組件，在入口組件中我們可以設(shè)置全局狀態(tài)或訪問小程序入口實(shí)例的生命周期：

import Vue from 'vue'
// 假設(shè)我們已經(jīng)在 './store' 配置好了 vuex
import store from './store'
const App = new Vue({
  store,
  onShow (options) {
  },
  render(h) {
    // this.$slots.default 是將要會(huì)渲染的頁面
    return h('block', this.$slots.default)
  }
})
export default App

對于一個(gè)入口文件(例如app.js)而言，我們可以新增一個(gè) app.config.js 的文件進(jìn)行全局配置，app.config.js 的默認(rèn)導(dǎo)出就是小程序的全局配置:

// app.config.js
export default {
  pages: [
    'pages/index/index'
  ],
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

生命周期

onLaunch()

在微信/百度/字節(jié)跳動(dòng)/支付寶小程序中這一生命周期方法對應(yīng) app 的 onLaunch

監(jiān)聽程序初始化，初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次）

在此生命周期中通過 getCurrentInstance().router.params，可以訪問到程序初始化參數(shù)

參數(shù)格式如下

其中，場景值 scene，在微信小程序和百度小程序中存在區(qū)別，請分別參考 微信小程序文檔 和 百度小程序文檔

來源信息 referrerInfo 的數(shù)據(jù)結(jié)構(gòu)如下

created()

在微信/百度/字節(jié)跳動(dòng)/支付寶小程序中這一生命周期方法對應(yīng) app 的 onLaunch，在 componentWillMount 后執(zhí)行

監(jiān)聽程序初始化，初始化完成時(shí)觸發(fā)（全局只觸發(fā)一次）

onShow()

在微信/百度/字節(jié)跳動(dòng)/支付寶小程序中這一生命周期方法對應(yīng) onShow，在 H5/RN 中同步實(shí)現(xiàn)

程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示時(shí)觸發(fā)，微信小程序中也可以使用 Taro.onAppShow 綁定監(jiān)聽

在此生命周期中通過 this.$router.params，可以訪問到程序初始化參數(shù)

參數(shù)與 componentWillMount 中獲取的基本一致，但百度小程序中補(bǔ)充兩個(gè)參數(shù)如下

onHide()

在微信/百度/字節(jié)跳動(dòng)/支付寶小程序中這一生命周期方法對應(yīng) onHide，在 H5/RN 中同步實(shí)現(xiàn)

程序從前臺(tái)進(jìn)入后臺(tái)時(shí)觸發(fā)，微信小程序中也可以使用 Taro.onAppHide 綁定監(jiān)聽

onError(String error)

在微信/百度/字節(jié)跳動(dòng)/支付寶小程序中這一生命周期方法對應(yīng) onError，H5/RN 中尚未實(shí)現(xiàn)

程序發(fā)生腳本錯(cuò)誤或 API 調(diào)用報(bào)錯(cuò)時(shí)觸發(fā)，微信小程序中也可以使用 Taro.onError 綁定監(jiān)聽

onPageNotFound(Object)

在微信/字節(jié)跳動(dòng)小程序中這一生命周期方法對應(yīng) onPageNotFound，其他端尚未實(shí)現(xiàn)
微信小程序中，基礎(chǔ)庫 1.9.90 開始支持

程序要打開的頁面不存在時(shí)觸發(fā)，微信小程序中也可以使用 Taro.onPageNotFound 綁定監(jiān)聽

參數(shù)如下

頁面組件

每一個(gè) Taro 應(yīng)用都至少包括一個(gè)頁面組件，頁面組件可以通過 Taro 路由進(jìn)行跳轉(zhuǎn)，也可以訪問小程序頁面的生命周期，每一個(gè)頁面組件必須是一個(gè) .vue 文件：

<template>
  <view class="index">
    <NumberDisplay />
    <NumberSubmit />
  </view>
</template>
<script>
import NumberDisplay from '../../components/NumberDisplay.vue'
import NumberSubmit from '../../components/NumberSubmit.vue'
export default {
  name: 'Index',
  components: {
    NumberDisplay,
    NumberSubmit
  }
}
</script>
<style>
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

頁面配置

和入口組件一樣，對于一個(gè)頁面文件(例如./pages/index/index.vue)而言，我們可以新增一個(gè) ./pages/index/index.config.js 的文件進(jìn)行頁面配置，index.config.js 的默認(rèn)導(dǎo)出就是的頁面配置，每一個(gè)頁面都擁有自己配置 config，這個(gè)配置是針對當(dāng)前頁面配置，配置規(guī)范基于微信小程序的頁面配置進(jìn)行制定，所有平臺(tái)進(jìn)行統(tǒng)一:

生命周期

onReady()

頁面首次渲染完畢時(shí)執(zhí)行，此生命周期在小程序端對應(yīng)小程序頁面的 onReady 生命周期。從此生命周期開始可以使用 createCanvasContext 或 createselectorquery 等 API 訪問真實(shí) DOM。

在可以非頁面組件中，可以使用 Taro 內(nèi)置的 消息機(jī)制 訪問頁面組件的 onReady() 生命周期：

<template>
  <view id="only" />
</template>
<script>
  import { eventCenter, getCurrentInstance } from '@tarojs/taro'
  export default {
    mounted () {
      eventCenter.once(getCurrentInstance().router.onReady, () => {
        const query = Taro.createSelectorQuery()
        query.select('#only').boundingClientRect()
        query.exec(res => {
          console.log(res, 'res')
        })
        console.log('onReady')
      })
    }
  }
</script>

onLoad(options)

頁面創(chuàng)建時(shí)執(zhí)行，此生命周期在小程序端對應(yīng)小程序頁面的 onLoad 生命周期。此生命周期可以訪問 getCurrentInstance().router。

created()

頁面加載時(shí)觸發(fā)，一個(gè)頁面只會(huì)調(diào)用一次，此時(shí)頁面 DOM 尚未準(zhǔn)備好，還不能和視圖層進(jìn)行交互

mouted()

頁面初次渲染完成時(shí)觸發(fā)，一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互

beforeUpdate()

頁面即將更新

updated(prevProps, prevState)

頁面更新完畢

beforeDestroy()

頁面卸載時(shí)觸發(fā)，如 redirectTo 或 navigateBack 到其他頁面時(shí)

onShow()

頁面顯示/切入前臺(tái)時(shí)觸發(fā)

onHide()

頁面隱藏/切入后臺(tái)時(shí)觸發(fā)， 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺(tái)等

在以上所有的生命周期方法中，都可以通過 getCurrentInstance().router 獲取打開當(dāng)前頁面路徑中的參數(shù)。

頁面事件處理函數(shù)

在小程序中，頁面還有在一些專屬的事件處理函數(shù)，如下

onPullDownRefresh()

監(jiān)聽用戶下拉刷新事件

• 需要在全局配置的 window 選項(xiàng)中或頁面配置中開啟 enablePullDownRefresh
• 可以通過 Taro.startPullDownRefresh 觸發(fā)下拉刷新，調(diào)用后觸發(fā)下拉刷新動(dòng)畫，效果與用戶手動(dòng)下拉刷新一致。
• 當(dāng)處理完數(shù)據(jù)刷新后，Taro.stopPullDownRefresh 可以停止當(dāng)前頁面的下拉刷新

onReachBottom()

監(jiān)聽用戶上拉觸底事件

• 可以在全局配置的 window 選項(xiàng)中或頁面配置中設(shè)置觸發(fā)距離 onReachBottomDistance
• 在觸發(fā)距離內(nèi)滑動(dòng)期間，本事件只會(huì)被觸發(fā)一次

onPageScroll(Object)

監(jiān)聽用戶滑動(dòng)頁面事件

Object 參數(shù)說明：

注意：請只在需要的時(shí)候才在 page 中定義此方法，不要定義空方法。以減少不必要的事件派發(fā)對渲染層-邏輯層通信的影響。注意：請避免在 onPageScroll 中過于頻繁的執(zhí)行 this.setState() 等引起邏輯層-渲染層通信的操作。尤其是每次傳輸大量數(shù)據(jù)，會(huì)影響通信耗時(shí)。

onShareAppMessage(Object)

監(jiān)聽用戶點(diǎn)擊頁面內(nèi)轉(zhuǎn)發(fā)按鈕（Button 組件 openType=’share’）或右上角菜單“轉(zhuǎn)發(fā)”按鈕的行為，并自定義轉(zhuǎn)發(fā)內(nèi)容。

注意：只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕

Object 參數(shù)說明：

此事件需要 return 一個(gè) Object，用于自定義轉(zhuǎn)發(fā)內(nèi)容，返回內(nèi)容如下：

自定義轉(zhuǎn)發(fā)內(nèi)容

示例代碼

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首頁'
  }
  onShareAppMessage (res) {
    if (res.from === 'button') {
      // 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
      path: '/page/user?id=123'
    }
  }
  render () {
    return (
      <View className='index'>
        <Text>1</Text>
      </View>
    )
  }
}

onResize(object)

只有微信小程序支持
基礎(chǔ)庫 2.4.0 開始支持

小程序屏幕旋轉(zhuǎn)時(shí)觸發(fā)。詳見 響應(yīng)顯示區(qū)域變化

onTabItemTap(Object)

微信小程序中，基礎(chǔ)庫 1.9.0 開始支持

點(diǎn)擊 tab 時(shí)觸發(fā)

Object 參數(shù)說明：

componentWillPreload()

目前只有微信小程序支持

預(yù)加載鉤子

onTitleClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

點(diǎn)擊標(biāo)題觸發(fā)

onOptionMenuClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

點(diǎn)擊導(dǎo)航欄額外圖標(biāo)觸發(fā)

onPopMenuClick()

只有支付寶小程序支持，基礎(chǔ)庫 1.11.0 開始支持

暫無說明

onPullIntercept()

只有支付寶小程序支持，基礎(chǔ)庫 1.3.0 開始支持

下拉截?cái)鄷r(shí)觸發(fā)

H5 暫時(shí)沒有同步實(shí)現(xiàn) onReachBottom 、 onPageScroll 這兩個(gè)事件函數(shù)，可以通過給 window 綁定 scroll 事件來進(jìn)行模擬，而 onPullDownRefresh 下拉刷新則暫時(shí)只能用 ScrollView 組件來代替了。

頁面事件函數(shù)各端支持程度如下

以上成員方法在 Taro 的頁面中同樣可以使用，書寫同名方法即可，不過需要注意的，目前暫時(shí)只有小程序端支持（支持程度如上）這些方法，編譯到 H5/RN 端后這些方法均會(huì)失效。

// ./pages/index/index.jsx
export default {
  navigationBarTitleText: '首頁'
}

內(nèi)置組件/Props

Taro 中使用 Vue，內(nèi)置組件遵循小程序組件規(guī)范，組件的參數(shù)和小程序參數(shù)完全保持一致。

事件

使用 @ 修飾符（或 v-on:，更多用法可以參考Vue文檔）替代小程序事件中的 bind，在事件處理函數(shù)中可以用 stopPropagation 阻止事件冒泡：

<template>
  <view>
    <input v-model="number" type="number" class="input" />
    <button @tap="addNumber">
      Add new number
    </button>
  </view>
</template>
<script>
export default {
  data() {
    return {
      number: 0
    }
  },
  methods: {
    addNumber(e) {
      e.stopPropagation()
    }
  }
}
</script>

其它限制

由于小程序訪問元素位置為異步 API，因此小程序中無法使用內(nèi)置的 transition-group 組件。