前言

由于微信小程序在開發上不能安裝npm依賴，和開發流程上也飽受詬病；Taro 是由京東·凹凸實驗室(aotu.io)傾力打造的 多端開發解決方案，在本篇文章中主要介紹了使用taro搭建微信小程序的一些步驟和一個簡單demo的實現。

安裝

先全局安裝@tarojs/cli

$ npm install -g @tarojs/cli
$ yarn global add @tarojs/cli

之后我們初始化一個名為myApp的項目:

$ taro init myApp

然后輸入你的配置：

demo

之后等待所有依賴安裝完畢。

開發

在命令行執行

$ npm run dev:weapp

taro將會進入微信小程序編譯預覽模式。我們打開微信開發者工具，將項目導入，會在預覽窗口中看到hello world。這時我們就可以進行開發啦~~

1.生命周期函數

不過當然也包含componentWillUnmout和componentWillReceiveProps等react原始生命周期函數，用來編寫自定義組件。

2.路由

在 Taro 中，路由功能是默認自帶的，不需要開發者進行額外的路由配置。

// 跳轉到目的頁面，打開新頁面
Taro.navigateTo({
  url: '/pages/page/path/name'
})

// 跳轉到目的頁面，在當前頁面打開
Taro.redirectTo({
  url: '/pages/page/path/name'
})

傳參

// 傳入參數 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

我們可以使用this.$router.params來獲取路由上的參數。

3.組件

Taro 以 微信小程序組件庫 為標準，結合 jsx 語法規范，定制了一套自己的組件庫規范。這部分可以自行去看文檔。值得注意的是，小程序中的寫法bind*這種事件都要改成以on開頭。

寫個demo

現在使用taro構建一個很簡單的demo；需要實現簡單的組件調用，路由跳轉傳參等功能。

demo

1.主頁

一個Swiper，一個列表組件：

// index.js
import Taro, { Component } from '@tarojs/taro'
import { View, Swiper,SwiperItem, Image } from '@tarojs/components'
import ListItem from '../../components/ListItem'
import './index.less'
import img0 from './img/img0.jpg'
import img1 from './img/img1.jpg'
import img2 from './img/img2.jpg'

export default class Index extends Component {
  config = {
    navigationBarTitleText: '首頁'
  }

  skipToDetail(){
    /*  */
  }

  render() {
    return (
      <View className='index'>
        <Swiper indicatorDots autoplay>
        {[img0,img1,img2].map(img=>(<SwiperItem key={img}><Image src={img} /></SwiperItem>))}
        </Swiper>
      {listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this)} description={item.description} title={item.title} key={item.title} />))}
      </View>
    )
  }
}

const listSet=[
  {title:'標題一',description:'描述一'},
  {title:'標題二',description:'描述二'},
  {title:'標題三',description:'描述三'},
]

列表組件，注意這里有個坑，就是不能直接調用函數props，會報一個警告，說是沒有找到onClick handler。查閱官方文檔后，在issues 215中找到了答案，官方說是會在以后的版本中修復這個bug，目前先按下面代碼寫。

import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './index.less'

export default class ListItem extends Component {
    skipToDetail(){
        /* 必須得這樣寫=。= */
        this.props.onClick()
      }
    render() {
        const { title, description } = this.props
        return (
            <View className='list-item' onClick={this.skipToDetail}>
                <View><Text>{title}</Text></View>
                <View><Text>{description}</Text></View>
            </View>
        )
    }
}

2.詳情頁跳轉

我們在入口文件添加新的路由，指向詳情頁detail：
這里需要注意先配置好pages，然后再寫這個組件，要不再編譯的時候會找不到這個頁

// app.js
 config = {
    pages: [
      'pages/index/index',
      'pages/detail/index'
    ],
    ...
  }

創建詳情頁：

import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import './index.less'

export default class Index extends Component {
  componentWillMount () {
  }
  config = {
    navigationBarTitleText: '詳情頁'
  }

  render () {
    const {title,description}=this.$router.params
    return (
      <View>
        ...
      </View>
    )
  }
}

要求點擊每個列表項，需要進行跳轉，并把當前的title和description傳到詳情頁。需要在首頁中的skipToDetail中補充以下內容：

skipToDetail({title,description}){
    Taro.navigateTo({
      url: `/pages/detail/index?title=${title}&description=${description}`
    })
  }

并在render方法中將參數傳入這個函數中：

 render() {
    return (
      <View className='index'>
        ...
      {listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this,item)} description={item.description} title={item.title} key={item.title} />))}
      </View>
    )
  }

參考文檔

1. taro官網文檔