Taro，作為React開發者，使用感受

摘要： 繼去年畢設，使用小程式原生語言開發了一個英語學習小程式 （smart英語學習》》） 以後，一年沒有寫過小程式了。最近心血來潮，準備用很火的Taro(類似於react語法，多端)開發一個課堂簽到小程式，踩踩坑，感受一下。 本文概要 使用Taro，redux開發的學生課堂簽到小...

繼去年畢設，使用小程式原生語言開發了一個英語學習小程式 （smart英語學習》》） 以後，一年沒有寫過小程式了。最近心血來潮，準備用很火的Taro(類似於react語法，多端)開發一個課堂簽到小程式，踩踩坑，感受一下。

本文概要

1. 使用Taro，redux開發的學生課堂簽到小程式展示
2. *Taro的基本使用
3. *作為React開發者，使用的注意事項（僅包括實踐中遇到的）
4. 實際開發中的處理
5. Taro以及微信小程式開發中遇到的問題總結
6. TODO

一、簽到小程式

功能概述：基於地理位置（經緯度）的簽到平臺。另外包括校內新聞模組，word資料下載模組，個人資訊模組等。掃碼登入： 學生體驗賬號 123456，密碼 123456。

原始碼戳這裡》》》

1. 基於騰訊api經緯度的簽到

2. 新聞部分，word資料下載

3. 個人資訊模組

二、Taro的基本使用

1. yarn global add @tarojs/cli ，使用 yarn 安裝 CLI
2. taro init myApp 建立模板專案(按照一系列預設命令，即可建立redux ，mobx等生成器模板)。並且之後會預設安裝依賴。
3. npm un dev:weap ，進入微信開發工具檢視自己的小程式。
4. 具體元件和api和小程式相似，可檢視Taro文件自行了解。
5. 之後開發就類似於React了。注意 componentDidShow、 componentDidMount 生命週期在小程式中的不同表現。tab頁 componentDidMount 只走一次。

備註：Taro 預設對小程式的非同步 API 進行了包裝，可以像使用 Promise 那樣進行呼叫。

// WX
wx.request({
url: '', // 僅為示例，並非真實的介面地址
data: {},
header: {
'content-type': 'application/json' // 預設值
},
success(res) {}
})
// Taro
Taro.request(url).then(function (res) {
console.log(res)
})
複製程式碼

三、作為React開發者，使用的注意事項（僅包括實踐中遇到的）

1. sourcemap 不能用就很xxxxx
2. 不能解構傳值，需要 key value 傳給子元件
3. 不能在 render 之外寫 jsx
4. this.props 傳來的函式必須 on 或者 dispatch 開頭
5. 父元件傳來的 props ,必須定義在 static defaultProps 裡，要不然獲取不到
6. componentDidMount ,在微信/百度/位元組跳動/支付寶小程式中這一生命週期方法對應 app 的 onLaunch
7. componentDidShow 在微信/百度/位元組跳動/支付寶小程式中這一生命週期方法對應 onShow
8. componentDidHide 在微信/百度/位元組跳動/支付寶小程式中這一生命週期方法對應 onHide
9. JS 程式碼裡必須書寫單引號，特別是 JSX 中，如果出現雙引號，可能會導致編譯錯誤
10. 環境變數 process.env 的使用,不要以解構的方式來獲取通過 env 配置的 process.env 環境變數，請直接以完整書寫的方式 process.env.NODE_ENV 來進行使用
11. 使用 this.$componentType 來判斷當前 Taro.Component 是頁面還是元件,可能取值分別為 PAGE 和 COMPONENT
12. 不支援無狀態元件
13. 不能在包含 JSX 元素的 map 迴圈中使用 if 表示式
14. 不能使用 Array#map 之外的方法操作 JSX 陣列
15. 父元件要往子元件傳遞函式，屬性名必須以 on 開頭 以上是使用過程中遇到的問題， 更多注意事項請查閱官方文件

四、實際開發中的處理

1. alias同樣可以使用。

// config/index.js
alias: {
'@actions': path.resolve(__dirname, '..', 'src/actions'),
'@assets': path.resolve(__dirname, '..', 'src/assets'),
'@components': path.resolve(__dirname, '..', 'src/components'),
'@constants': path.resolve(__dirname, '..', 'src/constants'),
'@reducers': path.resolve(__dirname, '..', 'src/reducers'),
'@style': path.resolve(__dirname, '..', 'src/style'),
'@util': path.resolve(__dirname, '..', 'src/util')
},
複製程式碼

2. Taro.requset()的簡單處理

// feth.js
import Taro from '@tarojs/taro'

const defaultMethod = 'POST'
const successStatus = 200
const successFlag = 1
const messageToast = title => {
Taro.showToast({
title,
icon: 'none',
duration: 1000
})
}

export default function fetch(options) {
const { 
url,
method = defaultMethod,
params,
showErrorToast = true,
} = options
return Taro.request({
url,
method,
data: params,
}).then(response => {
const { statusCode, data } = response
// 不是200以外的
if (statusCode != successStatus) {
const { error } = data
// reject出去。showToast在catch裡執行。
const errMessage = {errMsg: error || '請求介面失敗'}
return Promise.reject(errMessage)
} else {
// flag是不是1的判斷
const { flag, message, data: datas } = data
if (flag == successFlag) {
return Promise.resolve(datas)
} else {
const errMessage = {errMsg: message || '流程錯誤'}
return Promise.reject(errMessage)
}
}
}).catch(errors => {
const { errMsg } = errors
if (showErrorToast) {
messageToast(errMsg || '發起請求異常')
}
const errMessage = errMsg || '發起請求異常'
return Promise.reject(errMessage)
})
}
複製程式碼

五、Taro以及微信小程式開發中遇到的問題總結

1. doc文件的下載與預覽

小程式目前提供了wx.downloadFile的API，但目前只支援長傳和下載圖片，語音，視訊 三種類型的檔案。doc檔案會下載為臨時路徑的 .myword檔案，可供預覽（安卓手機預設微信內建瀏覽器開啟,可轉發至電腦。ios tbd）。

Taro.showLoading()
const params = {
url,
fileType: "doc",
success(res) {
// 只要伺服器有響應資料，就會把響應內容寫入檔案並進入 success 回撥，業務需要自行判斷是否下載到了想要的內容
if (res.statusCode === 200) {
const wxPath = res.tempFilePath
Taro.openDocument({
filePath: wxPath,
fileType: "doc",
success: function (ress) {
Taro.hideLoading()
console.log(ress)
},
fail: function (resfo) {
Taro.hideLoading()
util.showToast('開啟文件失敗')
}
})
}
},
fail: function (resfd) {
Taro.hideLoading()
util.showToast('檔案下載失敗')
},
}
Taro.downloadFile(params).then()
複製程式碼

2. 獲取地理位置，經緯度，用於簽到

wx.getLocation({
type: 'gcj02', // wgs84 返回 gps 座標，gcj02 返回可用於 wx.openLocation 的座標
success(res) {
const { latitude, longitude } = res
}
})
複製程式碼

①、wx.getLocation，呼叫前需要 使用者授權。scope.userLocation

②、發起簽到與掃碼簽到時，應保證 type 相同。

// 使用者授權，app.js中配置項
permission: {
"scope.userLocation": {
"desc": "獲取使用者的簽到位置"
}
},
複製程式碼

3. 不能長按識別(除小程式碼外的)二維碼 (tbd)

預覽二維碼圖片以後，不支援識別二維碼。

getEventData(data, tag) {
return data.currentTarget.dataset[tag];
},
previewImage = (e) => {
const current = getEventData(e, 'src')
Taro.previewImage({
current: current, // 當前顯示圖片的http連結
urls: [current] // 需要預覽的圖片http連結列表
})
}
複製程式碼

六、TODO

wxacode.getUnlimited

尾語

==菜的摳腳，大佬輕噴。內容較粗糙，有問題請指正。==

有必要誇一下，小程式的處理速度還是很快的，兩個小時稽核就通過了。