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

金鐘罩鐵布衫發表於2019-04-04
React

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

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

一、簽到小程式

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

小程式碼
原始碼戳這裡》》》

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

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

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

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

3. 個人資訊模組

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

二、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": "獲取使用者的簽到位置"
    }
},
複製程式碼

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

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

  • 發揮多端的優勢，嘗試其他小程式，h5等的打包釋出。
  • 繼續跟進word文件下載，更換二維碼為小程式二維碼帶引數（wxacode.getUnlimited）
  • openid對於多端的影響

尾語

==菜的摳腳，大佬輕噴。內容較粗糙，有問題請指正。==
有必要誇一下，小程式的處理速度還是很快的，兩個小時稽核就通過了。

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

相關文章