安裝

Taro 項目基于 node，請確保已具備較新的 node 環(huán)境（>=8.0.0）鼻疮，推薦使用 node 版本管理工具 nvm 來管理 node

 $ npm install -g @tarojs/cli

使用

初始化一個名為myApp的項目:

 $ taro init myApp

之后按照官網(wǎng)說明輸入您的配置膜蠢，忘了截圖了丽涩，各位自由發(fā)揮吧

編譯

執(zhí)行命令

 $ npm run dev:weapp

這個時候坑出現(xiàn)了，報錯提示沒有XXX模塊（沒有截圖蝌戒，名稱忘了）

于是召烂，我執(zhí)行命令

 $ npm install XXX

報錯：

image

原因：

需要安裝Visual Studio

解決方式：

通過官網(wǎng)下載安裝VS（我下載的是2017）

注意的是在安裝VS2017的過程中需要選上Common Tools for Visual C++的選項碱工，因為默認是不選擇的

最后把npm的vs版本設置成2017（不執(zhí)行這個貌似也可以）

打開命令行，輸入

 npm config set msvs_version 2017

安裝設置完VS后奏夫，執(zhí)行 npm install XXX怕篷，之后執(zhí)行npm run dev:weapp

到這基本成功了，

之后自行下載并打開微信開發(fā)者工具酗昼，然后選擇項目根目錄進行預覽廊谓。

（大坑注意：一定要下載穩(wěn)定版本，我當初下載了最新的版本仔雷，弄了很久沒有出來Hello world!）

image

Taro項目結構分析

image

由于個人習慣蹂析，開發(fā)中我是用webstrom開發(fā)，下面是一個簡單的demo

image

生命周期函數(shù)

路由

在 Taro 中电抚，路由功能是默認自帶的，不需要開發(fā)者進行額外的路由配置竖共。

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

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

傳參

// 傳入?yún)?shù) id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test'
})

我們可以使用this.$router.params來獲取路由上的參數(shù)公给。

組件

Taro 以 微信小程序組件庫 為標準借帘，結合 jsx 語法規(guī)范，定制了一套自己的組件庫規(guī)范淌铐，具體可以自行去看文檔

 //listItem.tsx
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import './listItem.scss'
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>
    )
  }
}

主頁

import Taro, {Component, Config} from '@tarojs/taro'
import {View, Text} from '@tarojs/components'
import ListItem from '../../components/ListItem'
import './index.scss'
import img0 from './img/11.jpg'
import img1 from './img/22.jpg'
import img2 from './img/33.jpg'

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

  componentWillMount() {
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

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

  render() {
    const listSet = [
      {title: '標題一', description: '描述一'},
      {title: '標題二', description: '描述二'},
      {title: '標題三', description: '描述三'},
    ]
    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, item)} description={item.description} title={item.title}
                    key={item.title}/>))}
      </View>
    )
  }
}

詳情

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

export default class Index extends Component {
  componentWillMount() {
  }

  config = {
    navigationBarTitleText: '詳情頁'
  }

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

demo預覽，點擊標題可以跳轉到詳情

image