小程序系列之Taro項目介紹(3)

前言

如果你對之前的Taro小程序框架有了一定的瞭解,那麼接下來學習,就相當於是一次實戰,如果還不太瞭解,建議還是先回去看一下文檔,畢竟有些東西,官方出的文檔全面得多,下面介紹如何創建taro小程序項目.

---

先介紹官方項目Demo創建

在創建之前,請大家自行安裝配置好npm模塊,此處,強烈建議大家使用yarn工具.好處多多,具體請參考點擊鏈接查看.以下教程默認你已配置好環境.

1.安裝Taro依賴

# 使用 npm 安裝 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安裝 CLI
$ yarn global add @tarojs/cli
# OR 安裝了 cnpm，使用 cnpm 安裝 CLI
$ cnpm install -g @tarojs/cli


注意:如若安裝過程出現了sass異常,請自行安裝以下操作,如無,可忽略
$ npm install -g mirror-config-china

2. 初始化項目

$ taro init myApp  //初始化項目,如下圖所示

創建項目,會自動給我們加上git操作,以及初始化,非常方便

3.梳理目錄結構

config目錄 -----> 主要存放項目內部的一些配置,

  			dev.js----> 經常用於配置類似BASE_URL這種全局字段,用於開發階段,區別於prod

  			index.js---->項目的設計稿,名稱以及配置多個編譯模塊如H5,weapp等

  			prod.js------>經常用於配置類似BASE_URL這種全局字段,用於上線階段,區別於dev

src目錄 -----> 存放源碼的地方

  				action目錄 ------->填寫公共方法,操作

  				constants目錄 -------> 用於存放常量文件

  				pages目錄-------> 頁面放置的目錄

  				reducers目錄------->存放一些方法,用於數據處理和傳遞

  				store目錄-------> 數據處理文件

  				app.scss-------> 存放全局樣式,適合抽取相同樣式,如button等

  				app.tsx-------> APP頁面入口的配置基本都在這裏,如微信小程序的超時時間配置等

  				index.html-------> APP頁面入口

global.d.ts ------> 配置項

package.json ------> 配置依賴和一些命令

project.config.json ---->配置小程序的APPID,還有一些快捷入口等

tsconfig.json -----> ts模板語法的一些配置

至於其他一些.editorconfig和.eslintrc以及.gitignore都是一些配置文件.與本項目無關,和個人使用的習慣有關, 如統一使用單雙引號的設置等. 當然, 可能真實的項目,還可能有其他的模塊,比如component目錄,用於存放自定義組件等,apis模塊,用於接口請求,common模塊,存放公共工具類等

值得我們注意的是,我們使用taro框架生成的代碼,在經過編譯轉換成小程序代碼之後,和源碼不一樣,而且和微信小程序的原生代碼也不一樣, 所以我們需要找異常信息時,需要先找對應編譯後的代碼,再找到對應源碼位置才能定位到錯誤.

4.理解Taro框架轉換代碼概念

說實話,我沒想到有一些同學對這個轉換代碼概念產生歧義,這裏我給大家簡單的解釋一下.taro框架主要是爲了解決一套代碼多端共用的問題, 也就是說,一套代碼作用於多個代碼, 所有的適配和兼容操作,都在這一套代碼中進行,只不過是通過環境判斷執行對應代碼罷了.而不是在生成的代碼中修改. 甚至有人問我,生成代碼之後, 每個生成的代碼和之前不一樣,怎麼處理?是解決衝突合併嗎?那工作量豈不是很大嗎?這就是典型的沒有明白轉換代碼概念.

	 //環境判斷
    switch (Taro.getEnv()) {
      //以主流三家小程序爲例
      case Taro.ENV_TYPE.WEAPP:
        //幹微信支持的事情
        break;
      case Taro.ENV_TYPE.ALIPAY:
      //干支付寶支持的事情
        break;
      case Taro.ENV_TYPE.SWAN:
      //幹百度支持的事情
        break;        
    }

關於小程序開發,個人的一些建議(純屬個人一些經驗分享)

• 小程序的表單提交,經常會涉及到一些數據判斷, 如判空或者判非法等,都需要配置, 而不是用java的思維,直接判斷.需要通過一些配置,可直接達到目的,也是一種標準的js寫法, 非常建議學習這種做法.

• 關於數據請求,爲了統一管理, 所有請求方法都應該放在一個文件中,把網絡請求進行封裝後, 所有處理都應該走一個入口,方便統一信息返回處理

• 由於微信對小程序限制了大小, 建議所有的圖片都放在服務器進行遠程訪問

• 關於調試,如果開發和測試不在一個地方, 可以使用遠程真機調試開發查看數據,測試操作界面. (適用於可能測試有設備,開發沒有設備,我個人親身經歷). 調試人員需要有權限訪問小程序,可能需要小程序後臺添加測試人員的微信.

• 強烈建議搞懂小程序文檔中的三個id, AppId,openId,UnionId.並弄清楚小程序登錄機制

• 巧用open-data標籤獲取用戶信息,但只能作爲展示使用. 不能操作數據.若想操作數據, 還得openId.

• 關於小程序適配問題, 由於Taro框架能夠支持一套代碼轉換多個端源碼,但可能在適配和兼容上就沒有那麼理想了, 思路是,先轉換到對應小程序端的源碼,執行看效果,如果發現某些功能無法執行,可能是因爲適配原因,建議是通過環境判斷對應平臺,對**特殊的平臺(如支付寶等)**API進行適配,可在對應特殊平臺官方文檔中查找API.

• 在兼容性方面, Taro對標微信小程序, 也就是說Taro框架的所有適配都是優先於微信小程序,畢竟微信小程序是第一個被行業內公認的, 這樣也就造成了其他端的小程序需要驗證,兼容以及適配.

• 查詢API使用,順序是先從Taro查詢是否支持對應API,然後在查對應平臺API. 其實我想講一種情況,就是當微信出現了新的API, 但是Taro還沒有同步到,這種情況應該如何處理呢?這種情況,可以直接使用對應平臺的關鍵字調用即可.如例子所示(以微信小程序爲例):

  //使用之前應該先判斷是否是對應平臺
  wx.request({  //假設是這個方法
  //那麼問題來了, 有人想說,這個寫了不是報錯了嗎?對的,報錯無所謂, 能夠執行就行了.
  //因爲編譯完成後, 在微信平臺依然是可以被識別到的.
  })  
  

• Taro版本問題導致編譯生成的小程序源碼在微信開發者工具中會彈出各種各樣的錯誤問題.舉個我親身經歷的例子, 在之前的電腦上編譯毫無差錯,我換了一臺電腦,然後就各種報錯,怎麼都弄不好,經過多次比對兩邊環境的版本,才發現,使用了新的庫版本會出現一些不兼容的問題, 我在新電腦上安裝的是新版本的Taro庫,但是在舊電腦上使用的是舊版本,所以我卸載了新版本, 然後安裝舊版本, 重新編譯,發現成功了.這個問題是一個好例子,非常直觀的說明了,前端對於版本的升級,是非常敏感的, 因爲版本的迭代,可能很多寫法和兼容都存在差異, 所以大家在升級某一個庫的時候,如果不是特別瞭解, 最好對應適配與它相關聯的版本.