Taro Vue

入口組件

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

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

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

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

生命周期

onLaunch()

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

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

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

參數(shù)格式如下

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

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

created()

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

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

onShow()

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

程序啟動，或從后臺進入前臺顯示時觸發(fā)，微信小程序中也可以使用 Taro.onAppShow 綁定監(jiān)聽

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

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

onHide()

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

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

onError(String error)

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

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

onPageNotFound(Object)

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

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

參數(shù)如下

頁面組件

每一個 Taro 應用都至少包括一個頁面組件，頁面組件可以通過 Taro 路由進行跳轉(zhuǎn)，也可以訪問小程序頁面的生命周期，每一個頁面組件必須是一個 .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>

頁面配置

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

生命周期

onReady()

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

在可以非頁面組件中，可以使用 Taro 內(nèi)置的 消息機制 訪問頁面組件的 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)建時執(zhí)行，此生命周期在小程序端對應小程序頁面的 onLoad 生命周期。此生命周期可以訪問 getCurrentInstance().router。

created()

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

mouted()

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

beforeUpdate()

頁面即將更新

updated(prevProps, prevState)

頁面更新完畢

beforeDestroy()

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

onShow()

頁面顯示/切入前臺時觸發(fā)

onHide()

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

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

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

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

onPullDownRefresh()

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

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

onReachBottom()

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

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

onPageScroll(Object)

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

Object 參數(shù)說明：

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

onShareAppMessage(Object)

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

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

Object 參數(shù)說明：

此事件需要 return 一個 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ā)標題',
      path: '/page/user?id=123'
    }
  }
  render () {
    return (
      <View className='index'>
        <Text>1</Text>
      </View>
    )
  }
}

onResize(object)

只有微信小程序支持
基礎庫 2.4.0 開始支持

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

onTabItemTap(Object)

微信小程序中，基礎庫 1.9.0 開始支持

點擊 tab 時觸發(fā)

Object 參數(shù)說明：

componentWillPreload()

目前只有微信小程序支持

預加載鉤子

onTitleClick()

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

點擊標題觸發(fā)

onOptionMenuClick()

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

點擊導航欄額外圖標觸發(fā)

onPopMenuClick()

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

暫無說明

onPullIntercept()

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

下拉截斷時觸發(fā)

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

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

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

// ./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 組件。