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...
原文地址：https://segmentfault.com/a/1190000016794779