Taro，京東凹凸實(shí)驗(yàn)室出品的適配多端的一個(gè)框架，Taro 是一套遵循 React 語(yǔ)法規(guī)范的 多端開(kāi)發(fā) 解決方案。現(xiàn)如今市面上端的形態(tài)多種多樣，Web、React-Native、微信小程序等各種端大行其道，當(dāng)業(yè)務(wù)要求同時(shí)在不同的端都要求有所表現(xiàn)的時(shí)候，針對(duì)不同的端去編寫(xiě)多套代碼的成本顯然非常高，這時(shí)候只編寫(xiě)一套代碼就能夠適配到多端的能力就顯得極為需要。

一.taro開(kāi)發(fā)搭建

1.taro很方便就在于其環(huán)境搭建很輕松，照著官方文檔幾行代碼就能搭建好。

2.在進(jìn)行預(yù)覽的時(shí)候，不同的方式區(qū)別是很大的！！！，寫(xiě)的什么就要用什么進(jìn)行預(yù)覽，不然真的是天差地別。（我踩的最傻屌的坑）

二.關(guān)于標(biāo)簽

1.在taro上目前我所用的所有標(biāo)簽都要事先聲明，比如View，Button，Image等.如下聲明

import { View, Input, Button ,Image,Text} from "@tarojs/components";

2.各個(gè)標(biāo)簽在使用時(shí)首字母都是大寫(xiě)，不大寫(xiě)是不規(guī)范的

3.特別注意微信小程序只識(shí)別view和text等，相當(dāng)于于h5中的div，p標(biāo)簽等等

三.關(guān)于函數(shù)的書(shū)寫(xiě)

1.遵從react語(yǔ)法，直接上例子

changeheading(e) {  this.setState({     heading: e.detail.value       });     }

四.關(guān)于taro本身自帶標(biāo)簽

1.Picker：

用于寫(xiě)滑動(dòng)選擇，選擇日期啥的，非常方便 ，示例是選擇時(shí)間的組件

state = {  timeSel: '12:01', }onTimeChange = e => {  this.setState({     timeSel:      e.detail.value     })  }<Picker mode='time' onChange={this.onTimeChange}>         <View className='arry'>              {this.state.timeSel} >         </View></Picker>

2.Opendata

在微信小程序中用于獲取用戶頭像，昵稱等信息，可以直接獲取。

<OpenData className='avatar' type='userAvatarUrl'></OpenData>  //獲取頭像<OpenData className='name' type='userNickName' lang='zh_CN'></OpenData>  // 獲取昵稱

3.其他的標(biāo)簽見(jiàn)taro官方文檔。

五. 關(guān)于組件的引用

1.首先如何寫(xiě)一個(gè)組件

export default class 組件名 extends Component {render(){  return()}

寫(xiě)時(shí)修改組件名，在引用時(shí)就可直接引用，例如

import 組件名 from '../../組件所在位置';

六.關(guān)于頁(yè)面跳轉(zhuǎn)

1.首先要在 app.js 的 page 里添加要管理的頁(yè)面路徑（即要跳轉(zhuǎn)的頁(yè)面路徑）'pages/login/login',

2.然后在要跳轉(zhuǎn)的頁(yè)面寫(xiě)一個(gè)跳轉(zhuǎn)方法就ok了

toPage() {   Taro.navigateTo({       url: '/pages/login/login',       })    }

七.關(guān)于微信授權(quán)彈窗問(wèn)題

wx.getUserInfo(OBJECT)此接口有調(diào)整，使用該接口將不再出現(xiàn)授權(quán)彈窗，請(qǐng)使用  引導(dǎo)用戶主動(dòng)進(jìn)行授權(quán)操作，即該接口使用不在彈出授權(quán)窗口，只能使用button引導(dǎo)用戶自己完成授權(quán)操作