Taro：使用taro完成小程序開發

前言：taro是一個能夠很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。
小程序項目搭建
gitup已經有很清楚的說明：https://github.com/NervJS/taro

一.主要操做步驟及命令：

1.cnpm install -g @tarojs/cli

全局安裝taro腳手架，此處我用的是淘寶鏡像cnpm，

淘寶鏡像配置命令：npm install -g cnpm --registry= https://registry.npm.taobao.org

安裝過程當中會問你是否須要redux模板，能夠先不要，等感受確實須要redux再添加，

ts若是不會的話也不須要安裝

2.執行 cnpm run dev:weapp命令,就能夠進入小程序開發環境進行開發了

二.開發過程碰到的一些坑:

1.事件綁定傳參
本人喜歡用es6方式傳值,可是在taro使用es6傳值編譯會出錯,因此在使用taro製做小程序時建議使用.bind傳值,如點擊事件傳值:

onClick={this.onClick.bind(this,num)}

2.底部TabBar使用
官方的TabBar配置只要在app.js中配置好就好了,可是官方的TabBar只提供了部分屬性很差擴展,若是須要擴展,建議自定義開發

3.小程序場景和頁面參數的獲取值獲取
小程序場景值獲取須要注意一點 ,: 只能在app.js的componentWillMount生命週期獲取,直接上代碼

const params = this.$router.params;//獲取全部參數
const query = params.query ;//query裏面是連接上帶的參數
const scene = params.scene ;//scene爲場景值

若是在其餘頁面中使用 this.$router.params ,若是連接帶參數,獲得的就是參數對象;若是不帶參數,獲得的是頁面路徑,是拿不到scene場景值的,若是開發者須要場景值作一些事情,最好在 app.js中拿到scene儲存到本地

4.video組件使用時的一些坑
(1) poster屬性設置的背景圖無效 ,會一閃而過;
(2) 網上所說的,用cover-view或者cover-image,在視頻組件外套一層,親測在開發者工具下能夠,可是真機調試下不行,代碼以下:

<video id="myVideo" class="video-xx" src="{{videoUrl}}" controls>
<cover-view class="controls"> <cover-image class="img" src="{{img}}"
/> </cover-view> </video>

本人的解決方案是,先隱藏Video組建,顯示背景圖;點擊背景圖再調用播放視頻接口,解絕了這個問題,代碼以下:

<Video className='video' 
         src='{video}
        style={this.state.videoStyle}
         controls={true}
         customCache={false}
         autoplay={false}
         onPause={this.bindplay}
         id='video'
     >
   </Video>
<View class='img_box' style={this.state.viewStyle}>     
     <Image className='img' src={Play} onClick={this.play} />
</View>

在play 方法中加入

const video = Taro.createVideoContext('video');
    video.play();

(4) video不能設置圓角樣式,在開發者工具中能夠展現圓角,真機上是無效的

5.獲取微信受權,手機號登陸小程序
獲取微信受權,拿到手機號登陸小程序,使用該功能前要注意一點:該功能僅支持企業版小程序

下面講講該功能碰見的坑:
(1)使用該功能須要先獲取登陸的code碼,傳輸code到後臺接口獲取到session_key,獲取code,最好是在componentWillMount生命週期裏面,不要放在getPhoneNumber()(受權獲取手機號的方法中),不然屢次操做獲取手機號操做會出現session_key失效的問題,直接上代碼:

// 首先按鈕上作好事件綁定

<Button openType='getPhoneNumber'
onGetPhoneNumber={this.getPhoneNumber.bind(this)}>微信快速登陸</Button>

//componentWillMount生命週期獲取code
Taro.login().then(res => {
if (res.code) {
this.setState({
code: res.code
})}})

//getPhoneNumber獲取受權解密手機號登陸
getPhoneNumber(e)

暫時先寫這麼多,後面會再補充一些,這裏有個簡單的小程序(涉及到的功能:手機號受權登錄,手機驗證碼登錄,登出,頁面跳轉的交互,視頻播放等),項目git地址:

https://github.com/qzp199510/...

接口api封裝參考文章地址:

https://segmentfault.com/a/11...