前言：taro是一個可以很好實現(xiàn)一次開發(fā)投蝉，多端統(tǒng)一的框架拦英，本文只介紹它小程序端開發(fā)的一些內(nèi)容蒿辙。
使用taro框架需要的知識儲備：
????????????1.熟悉react語法，否則選用taro需要一定學習成本
????????????2.redux熟悉最好荣倾，就像redux官網(wǎng)說的一樣，"當你覺得需要redux時候再用它骑丸，否則react就夠用了"
? ? ?????????react中文學習文檔：https://react.docschina.org/docs/hello-world.html
? ? ?????????redux中文學習文檔：http://www.redux.org.cn/
小程序項目搭建
gitup已經(jīng)有很清楚的說明：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
開發(fā)環(huán)境開啟菊碟，現(xiàn)在你只需要打開微信開發(fā)者工具节芥，在小程序項目中引入安裝腳手架的目錄就好了
是不是很簡單？
下面講講開發(fā)過程遇見的坑:
1.事件綁定傳參
本人喜歡用es6方式傳值,但是在taro使用es6傳值編譯會出錯,所以在使用taro制作小程序時建議使用.bind傳值,如點擊事件傳值:
onClick={this.onClick.bind(this,num)}
? 2.底部TabBar使用
官方的**TabBar**配置只要在**app.js**中配置好就行了,但是官方的**TabBar**只提供了部分屬性不好擴展,如果需要擴展,建議自定義開發(fā)
3.小程序場景和頁面參數(shù)的獲取值獲取
小程序場景值獲取需要注意一點 ,: **只能在app.js的componentWillMount生命周期獲取**,直接上代碼
? ? const params = this.$router.params;//獲取所有參數(shù)
? ?const query = params.query ;//query里面是鏈接上帶的參數(shù)
?const scene = params.scene ;//scene為場景值
如果在其他頁面中使用 this.$router.params ,如果鏈接帶參數(shù),得到的就是參數(shù)對象;如果不帶參數(shù),得到的是頁面路徑,是拿不到scene場景值的,如果開發(fā)者需要場景值做一些事情,最好在 app.js中拿到scene儲存到本地
4.video組件使用時的一些坑
(1) poster屬性設置的背景圖無效 ,會一閃而過;
(2) 網(wǎng)上所說的,用cover-view或者cover-image,在視頻組件外套一層,親測在開發(fā)者工具下可以,但是真機調(diào)試下不行,代碼如下:
<video id="myVideo"? class="video-xx" src="{{videoUrl}}" controls><cover-view class="controls"> <cover-image class="img"? src="{{img}}" /> </cover-view> </video>
本人的解決方案是,先隱藏Video組建,顯示背景圖;點擊背景圖再調(diào)用播放視頻接口,解絕了這個問題,代碼如下:
? ? <Video className='video' src='{video}? ?style={this.state.videoStyle}? controls={true}> </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不能設置圓角樣式,在開發(fā)者工具中可以展示圓角,真機上是無效的
5.獲取微信授權,手機號登錄小程序
獲取微信授權,拿到手機號登錄小程序,使用該功能前要注意一點:該功能僅支持企業(yè)版小程序
下面講講該功能遇見的坑:
(1)使用該功能需要先獲取登錄的code碼,傳輸code到后臺接口獲取到session_key,獲取code,最好是在componentWillMount生命周期里面,不要放在getPhoneNumber()(授權獲取手機號的方法中),否則多次操作獲取手機號操作會出現(xiàn)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)
暫時先寫這么多,后面會再補充一些,這里有個簡單的小程序(涉及到的功能:手機號授權登陸,手機驗證碼登陸,登出,頁面跳轉(zhuǎn)的交互,視頻播放等),項目git地址:
https://github.com/qzp199510/market
接口api封裝參考文章地址:
https://segmentfault.com/a/1190000016533592
