乾貨 | Taro 開發微信小程序入門與實戰

• 2019 年 11 月 21 日
• 筆記

技術選型

如果追求極致的性能又沒有多終端適配的需求，推薦使用小程序原生的開發方式來開發。

如果你是 Vue 開發者，但又不想過多的折騰，繼續沿用 Vue 的開發方式來開發小程序，那麼用 mpvue 將會是你的最明智的選擇。同時也支持一些第三方 UI 庫，這就給一些需要講求速度的小程序開發者提供了便利。mpvue 2.0 在 微信小程序 的基礎上增加了對 百度智能小程序、頭條小程序 和 支付寶小程序 的支持。

對於 React 愛好者來說，Taro 將是你開發小程序的不二選擇，Taro 是第一款用 React 語法寫小程序的框架，一直在不斷的迭代和快速的成長，官方團隊還給開發者提供了 Taro-UI 庫，同時支持將 微信小程序 轉為 Taro 項目以及 Taro 代碼與微信小程序代碼混寫

叨叨了這麼多，回到分享的主題，下面將會詳細介紹 如何使用 Taro 開發微信小程序

一：安裝 Taro 開發工具 @tarojs/cli

二：使用命令創建模板項目

可以根據自己的需要，選擇是否使用ts, sass或者less, 接着等安裝好依賴，項目就構建完成；

框架的使用和注意事項，文檔中有介紹，我這邊主要寫一些項目配置和踩過的坑;

這裡需要先安裝一些依賴

代碼規範 .prettierrc

.prettierignore

樣式規範：.stylelintrc.js

.stylelintignore

**/dist

.tslint.json

再加上自己配置一個.gitignore文件，就這樣，我們將大致需要的配置文件都配置好了；看看效果：

當有不規範的代碼提交的時候

把所有問題都解決之後提交，當然tslint以及其他的一些配置都是自定義的，可以自己配置。覺得麻煩的可以根據自己的「口味」配置項目。

然後我們就可以愉快的開發我們的項目，運行npm run dev:weapp,打開我們的小程序

很多人反饋用原生的 Taro.request或者用第三方axios等等做異步請求總會有錯，我沒親測，但是自己用promise封裝了方法, 在根目錄src文件夾下創建utils文件夾， 在這裡我簡單的模擬微信授權登錄，以及檢測session是否過期，綁定用戶的場景寫一個大概例子，接口為虛構：

http.ts代碼如下：

api.ts

index.ts (自定義公共處理接口文件)

最後在pages/index/index.tsx中引用就好了

整個框架的使用大致就是這樣了，react的書法風格還是挺舒服的，如果習慣了vue的寫法可能剛開始會不習慣，有興趣的可以嘗試嘗試，下面再簡單的把一些小技巧給補上：

一：圖片以模塊的方式的引入

使用ts搭建的項目，引入靜態資源，比如圖片，會提示找不到模塊，這時候就必須將圖片聲明為一個模塊：

在types目錄的global.d.ts文件下:

declare module 『*.png』 {   const img: any   export default img  }

二：動態添加style

<View style={{backgroundImage: `url(${bgImg})`}}></View>

三：動態添加class

四：this的指向問題

1）在 Taro 的頁面和組件類中，this 指向的是 Taro 頁面或組件的實例,如果我們要引用原生組件，需要使用到this的時候，如果如下引用：

Taro.createCanvasContext(canvasId, this.$scope)  wx.createLivePlayerContext(liveId, this.$scope)

錯誤：wx.createLivePlayerContext(liveId, this)這樣引入是沒有效果的，this並不是指向 wx.createLivePlayerContext.

(當前版本沒有liveplayer的回調方法，所以直接用原生wx)

五：全局樣式問題

全局原始app.scss 只會影響到頁面級別的文件，組件的獲取不到全局的樣式，

可以在組件內部import 全局樣式文件，但是這裡就有可能，多個組件都引入全局，生成多份全局樣式文件