前言：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為場景值</blockquote> <p>如果在其他頁面中使用 <strong>this.$router.params</strong> ,如果鏈接帶參數,得到的就是參數對象;如果不帶參數,得到的是頁面路徑,是拿不到<strong>scene</strong>場景值的,如果開發者需要場景值做一些事情,最好在 <strong>app.js</strong>中拿到scene儲存到本地</p> <p><strong>4.video組件使用時的一些坑</strong><br>(1) <strong>poster</strong>屬性設置的背景圖無效 ,會一閃而過;<br>(2) 網上所說的,用cover-view或者cover-image,在視頻組件外套一層,<strong>親測在開發者工具下可以,但是真機調試下不行</strong>,代碼如下:</p> <blockquote><video id="myVideo" class="video-xx" src="{{videoUrl}}" controls><br><cover-view class="controls"> <cover-image class="img" src="{{img}}"<br>/> </cover-view> </video></blockquote> <p>本人的解決方案是,先隱藏Video組建,顯示背景圖;點擊背景圖再調用播放視頻接口,解絕了這個問題,代碼如下:</p> <blockquote><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><p><strong>在play 方法中加入</strong></p>const video = Taro.createVideoContext('video'); video.play();</blockquote> <p>(4) video不能設置圓角樣式,在開發者工具中可以展示圓角,真機上是無效的</p> <p><strong>5.獲取微信授權,手機號登錄小程序</strong><br>獲取微信授權,拿到手機號登錄小程序,使用該功能前要注意一點:<strong>該功能僅支持企業版小程序</strong></p> <p>下面講講該功能遇見的坑:<br>(1)使用該功能需要先獲取登錄的<strong>code</strong>碼,傳輸<strong>code</strong>到后台接口獲取到<strong>session_key</strong>,獲取<strong>code</strong>,最好是在<strong>componentWillMount</strong>生命周期里面,不要放在<strong>getPhoneNumber()</strong>(授權獲取手機號的方法中),否則多次操作獲取手機號操作會出現<strong>session_key</strong>失效的問題,直接上代碼:</p> <blockquote>//<strong>首先按鈕上做好事件綁定</strong><p><Button openType='getPhoneNumber'<br>onGetPhoneNumber={this.getPhoneNumber.bind(this)}>微信快速登錄</Button></p> <p>//<strong>componentWillMount生命周期獲取code</strong><br> Taro.login().then(res => {<br> if (res.code) {<br> this.setState({<br> code: res.code<br> })}})</p> <p>//<strong>getPhoneNumber獲取授權解密手機號登錄</strong><br>getPhoneNumber(e)</p> </blockquote> <p>暫時先寫這么多,后面會再補充一些,這里有個簡單的小程序(涉及到的功能:手機號授權登陸,手機驗證碼登陸,登出,頁面跳轉的交互,視頻播放等),項目git地址:</p> <p><a href="https://github.com/qzp199510/market" rel="nofollow noreferrer">https://github.com/qzp199510/...</a></p> <p>接口api封裝參考文章地址:</p> <p><a href="https://segmentfault.com/a/1190000016533592">https://segmentfault.com/a/11...</a></p> 原文地址：https://segmentfault.com/a/1190000016794779