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

lavor 發布于2019-08-23 12:31 / 1296人閱讀

摘要：前言是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。

前言：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組建,顯示背景圖;點擊背景圖再調用播放視頻接口,解絕了這個問題,代碼如下:


     
     

在play 方法中加入
    const video = Taro.createVideoContext("video");
    video.play();

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

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

下面講講該功能遇見的坑:
(1)使用該功能需要先獲取登錄的code碼,傳輸code到后臺接口獲取到session_key,獲取code,最好是在componentWillMount生命周期里面,不要放在getPhoneNumber()(授權獲取手機號的方法中),否則多次操作獲取手機號操作會出現session_key失效的問題,直接上代碼:

//首先按鈕上做好事件綁定
//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...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98662.html

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

摘要：前言是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。前言：taro是一個可以很好實現一次開發，多端統一的框架，本文只介紹它小程序端開發的一些內容。小程序項目搭建gitup已經有很清楚的說明：https://github.com/NervJS/taro 一.主要操作步驟及命令： 1.cnpm install -g @tarojs/cli 全局安裝taro...

Me_Kun 2019-08-02 11:49 評論0 收藏0
新的小程序開發框架？- Taro的深度實踐體驗

摘要：作為兩個小程序開發框架都使用過，并應用在生產環境里的人，自然是要比較一下兩者的異同點。在這里與當前很流行的小程序開發框架之一進行簡單對比，主要還是為了方便大家更快速地了解，從而選擇更適合自己的開發方式。前言前陣子，來自我們凹凸實驗室的遵循 React 語法規范的多端開發方案 - Taro終于對外開源了，歡迎圍觀star（先打波廣告）。作為第一批使用了Taro開發的TOPLIFE小程...

maochunguang 2019-08-22 18:24 評論0 收藏0
Taro 優秀學習資源匯總

摘要：多端統一開發框架優秀學習資源匯總官方資源項目倉庫官方文檔項目倉庫官方文檔微信小程序官方文檔百度智能小程序官方文檔支付寶小程序官方文檔字節跳動小程序官方文檔文章教程不敢閱讀包源碼帶你揭秘背后的哲學從到構建適配不同端微信小程序等的應用小程序最 Awesome Taro 多端統一開發框架 Taro 優秀學習資源匯總 showImg(https://segmentfault.com/img/r...

toddmark 2019-08-23 18:02 評論0 收藏0
Taro 簡介

摘要：讓人又愛又恨的微信小程序自微信小程序以下簡稱小程序誕生以來，就伴隨著贊譽與爭議不斷。同時于開發者來說，小程序的生態不斷在完善，許多的坑已被踩平，雖然還是存在一些令人詬病的問題，但已經足見微信的誠意了。 Taro 介紹在互聯網不斷發展的今天，前端程序員們也不斷面臨著新的挑戰，在這個變化多端、不斷革新自己的領域，每一年都有新的美好事物在發生。從去年微信小程序的誕生，到今年的逐漸火熱，以及...

sixgo 2019-08-23 16:18 評論0 收藏0
【Copy攻城獅日志】借助Taro暴改Nideshop實現電商支付寶小程序雛形

摘要：接下來，在支付寶小程序開發者工具中打，不出意外能跑起來一個電商支付寶小程序雛形。地址以上是我這個攻城獅對使用轉換原生微信小程序為支付寶小程序的一次微不足道的實踐。 showImg(https://segmentfault.com/img/bVbnCCN?w=1818&h=931);↑開局一張圖，故事全靠編↑ 從一個需求說起作為底層的程序猿，哦不，我連猿都算不上，混的好的叫碼神，混得一...

gnehc 2019-08-23 14:54 評論0 收藏0