安裝配置
官網 https://nervjs.github.io/taro/

1.先全域性安裝@tarojs/cli

npm install -g @tarojs/cli

2.之後我們初始化一個名為myApp的專案:

taro init myApp

3.在微信小程式客戶端執行:

npm run dev:weapp

taro-ui

官方文件:https://taro-ui.aotu.io/#/

4.專案安裝時 安裝taro-ui 

使用 cnpm install taro-ui

5.taro可以使用小程式的api方法，比如：

componentDidMount () { 
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        console.log(res.windowHeight);
        that.setState({
          height: res.windowHeight+'px'
        })
      },
    })
  }
 

可以獲取螢幕可見區域的高度。

6.呼叫其他元件：

比如頁面需要呼叫的

<Tabone style='font-size:18px;text-align:center;height:{{ this.state.height }};width:100%' ></Tabone>

import Tabone這個頁面

import Tabone from '../tabone/index'

，Tabone頁面需要重新建一個與當前頁面同級的資料夾，使轉化為微信小程式時也能生成基本的四個檔案。

Tabone則是需要使用到的頁面。

7.

需要使用到的自帶控制元件需要通過標頭檔案引入：

import { View,Text } from '@tarojs/components'

8.

點選事件，類似React的點選事件的寫法

<Input type="idcard" onClick={this.show} />

show方法則為呼叫的方法。

如果方法帶引數 則

<Input type="idcard" onClick={this.show.bind(this,'1')} />

方法：

show(type){

console.log(type)  //1

}

9.

新建一個page頁  只需要在taro框架裡 新建一個與index同級的資料夾，新建新的jsx檔案，然後在app.js裡配置

然後再寫這個元件，要不再編譯的時候會找不到這個頁

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

 然後在detail.js檔案裡，

export default class Detail extends Component 修改class後的引數即可，保持class的類名是唯一的。

10.

taro的路由跳轉

Taro.navigateTo({     //

    url: '/pages/showone/index'

})

11.圖片的src最好在頁面import路徑，不是在img標籤裡直接寫路徑，

比如import banner from '../../assets/banner.png'

且命名不能帶數字 banner1 則報錯

12.

遇到的問題以及解決方法：

Source and destination must not be the same.

在寫tabbar之前，首先將需要用到的tabbar的幾個頁面新增在pages中，並且在app.js的pages新增相應的js路徑，

注意：

config = {

navigationBarTitleText: '首頁'

}

navigationBarTitleText的內容需要改變，不然會報錯，然後再寫tabbar新增相應的頁面。