Taro，做爲React開發者，使用感覺

時間 2019-11-05

標籤 taro 做爲 react 開發者使用感覺欄目 React 简体版

原文原文鏈接

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

本文概要

使用Taro，redux開發的學生課堂簽到小程序展現
*Taro的基本使用
*做爲React開發者，使用的注意事項（僅包括實踐中遇到的）
實際開發中的處理
Taro以及微信小程序開發中遇到的問題總結
TODO

1、簽到小程序

功能概述：基於地理位置（經緯度）的簽到平臺。另外包括校內新聞模塊，word資料下載模塊，我的信息模塊等。掃碼登陸：學生體驗帳號 123456，密碼 123456。react

源碼戳這裏》》》

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

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

3. 我的信息模塊

2、Taro的基本使用

yarn global add @tarojs/cli，使用 yarn 安裝 CLI
taro init myApp 建立模板項目(按照一系列默認命令，便可建立redux ，mobx等生成器模板)。而且以後會默認安裝依賴。
npm un dev:weap ，進入微信開發工具查看本身的小程序。
具體組件和api和小程序類似，可查看Taro文檔自行了解。
以後開發就相似於React了。注意componentDidShow、 componentDidMount生命週期在小程序中的不一樣表現。tab頁componentDidMount只走一次。

備註：Taro 默認對小程序的異步 API 進行了包裝，能夠像使用 Promise 那樣進行調用。ios

// WX
wx.request({
    url: '', // 僅爲示例，並不是真實的接口地址
    data: {},
    header: {
      'content-type': 'application/json' // 默認值
    },
    success(res) {}
})
// Taro
Taro.request(url).then(function (res) {
    console.log(res)
})
複製代碼

3、做爲React開發者，使用的注意事項（僅包括實踐中遇到的）

sourcemap不能用就很xxxxx
不能解構傳值，須要key value傳給子組件
不能在render以外寫jsx
this.props傳來的函數必須on或者dispatch開頭
父組件傳來的props,必須定義在static defaultProps裏，要否則獲取不到
componentDidMount,在微信/百度/字節跳動/支付寶小程序中這一輩子命週期方法對應 app 的 onLaunch
componentDidShow在微信/百度/字節跳動/支付寶小程序中這一輩子命週期方法對應 onShow
componentDidHide在微信/百度/字節跳動/支付寶小程序中這一輩子命週期方法對應 onHide
JS 代碼裏必須書寫單引號，特別是 JSX 中，若是出現雙引號，可能會致使編譯錯誤
環境變量 process.env 的使用,不要以解構的方式來獲取經過 env 配置的 process.env 環境變量，請直接以完整書寫的方式 process.env.NODE_ENV 來進行使用
使用 this.$componentType 來判斷當前 Taro.Component 是頁面仍是組件,可能取值分別爲 PAGE 和 COMPONENT
不支持無狀態組件
不能在包含 JSX 元素的 map 循環中使用 if 表達式
不能使用 Array#map 以外的方法操做 JSX 數組
父組件要往子組件傳遞函數，屬性名必須以 on 開頭以上是使用過程當中遇到的問題，更多注意事項請查閱官方文檔

4、實際開發中的處理

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)
    })
}
複製代碼

3. 單擊按鈕，滾動到相應節點

toggleComments = () => {
    Taro.createSelectorQuery().select('#comments-id').boundingClientRect(function(rect){
        // 使頁面滾動到響應位置
        Taro.pageScrollTo({
            scrollTop: rect.bottom
        })
    }).exec()
}
複製代碼

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

1. doc文檔的下載與預覽

小程序目前提供了wx.downloadFile的API，但目前只支持長傳和下載圖片，語音，視頻三種類型的文件。doc文件會下載爲臨時路徑的 .myword文件，可供預覽（安卓手機默認微信內置瀏覽器打開,可轉發至電腦。ios tbd）。git

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相同。github

// 用戶受權，app.js中配置項
permission: {
    "scope.userLocation": {
        "desc": "獲取用戶的簽到位置"
    }
},
複製代碼

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

預覽二維碼圖片之後，不支持識別二維碼。npm

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