Tarojs+redux支付寶小程式開發攻略

小程式開發 Redux · 發表 2019-04-30 22:21:00

摘要：技術選型對於習慣react語法的開發者來講，RN是實現native的必備工具。我們甚至可以遮蔽官方穩定而強大的配置層，直接上手開發。而後，同為表層React語法的Rax、Taro這樣的開源多端開發框架的興起，讓react開發人員得以不必在多端投入更高的成本。反過來，只要有足夠的...

技術選型

對於習慣react語法的開發者來講，RN是實現native的必備工具。 我們甚至可以遮蔽官方穩定而強大的配置層，直接上手開發。
而後，同為表層React語法的Rax、Taro這樣的開源多端開發框架的興起，讓react開發人員得以不必在多端投入更高的成本。反過來，只要有足夠的移動端開發經驗(主要體現在多端機型相容這方面)，那麼這些開源的多端框架就會成為你手中的神器，讓你幾乎零成本get到碎片化多端開發技能。
Taro相對於Rax的優勢是，在國內的開源社群更為活躍(論中文文件的重要性)，整合的端更多(包括不限於h5，native與各類小程式)，整合的功能更多, 語法限制與RN相去不遠(基於整合註冊RN中間層實現的Native)。
雖然Taro整合的端數比較多，但在開發過程中，我們可針對一類單獨watch，build，每一類的官方除錯方案與端官方(如螞蟻金服支付寶小程式)的除錯工具無縫對接。
整合Redux而不是mobX，則是單純的基於技術熟練度的思考（實際上mobX在開發正規化上更高層一些）。

支付寶小程式端開發準備

我曾思考一個很有深度的問題，混合開發的難點是在哪。
這個問題大概三秒鐘就有了答案：
1環境配置； 2除錯相容

那麼基於上述兩個問題中的第一個，Taro在官方文件中已經給出瞭解決方案——基於taro的配置，我們只需要簡單地修改幾個配置欄位即可。
後面有詳細的流程。

折回開發準備： 
1 需要node開發環境(這是句廢話); 
2 taro腳手架 執行的時候選擇整合redux; 
3 安官方文件中這裡，點選下圖紅框中的連結，下載並安裝支付寶除錯工具。

4 申請專案除錯許可權(按螞蟻金服支付寶小程式官方文件走簡單流程。連結地址：https://docs.alipay.com/mini/developer/getting-started/ )

腳手架簡單配置。

1 css模組化配置

taro的css模組化目前支援基於hash隨機值的模組化(等同於css-modules)，配置極為簡單， 如官方所示：
https://nervjs.github.io/taro/docs/css-modules.html
這裡直接給出連結，對應修改兩個bool引數即可。
但要注意的是：在css的命名上：
要以 name.module.css(/less/sass)的形式——
如：index.module.less 
在使用時，以json變數的形式引入並使用，如程式碼所示

import styles from './index.module.less'

class Demo extends Component {
render () {
return (
<View className={styles.wrap}>
<Text className={styles.demoText}>
demo
</Text>
</View>
)
}
}

當然，除開上述方式，我們也可以用css in js的方式實現，這點上幾乎所有表層react語法的多端框架都支援：

import styles from './index.module.less'

const demoStyle = {
width: '300px',
height: '300px'
}
class Demo extends Component {
render () {
return (
<View style={demoStyle}>
<Text >
demo
</Text>
</View>
)
}
}

但要注意的是，上述寫法中的單位px，不會被轉化成對應的rem，而用css-modules的形式，會預設以iphone6的尺寸給轉化成rem(省去了很多麻煩)。
實際上，我個人認為css in js的形式更能體現元件化開發的思想，但在tarojs裡，建議還是用css-modules，親測比較成熟，沒有出任何問題。

2 redux配置

在“開局”選擇redux整合時，展開的taro框架裡，已經給集成了redux的使用demo。
 使用總結來講，即，三個資料夾。

如圖，actions，constants，reduces裡的檔案應該與pages裡每個pege名一一對應(目錄統一，更加清晰)。

要注意的是，如果store裡使用的是下圖中的中介軟體(預設生成使用就這個)，那麼在寫非同步action時，請用promise，而不應該用generetor函式

非同步action的就可以這麼寫：

//postReq是基於fetch封裝了請求頭的請求函式
exportfunction fetchData (payload){
const {params={},callback} = payload;
return dispatch=>{
postReq(url,{
params,
callback
})
.then(
res=>{
if(res.status){
dispatch({
type: FETCHDATA
data: res.data
})
}
}
)
}
}

開發注意事項

1 阻止事件冒泡

如果有特殊的情況，需要阻止實踐冒泡，在官方中提供了針對此需求的api，但在支付寶小程式端似乎不太好用(親測不起效),解決方案是：
 用一個例項屬性控制，在第一次觸發的點選事件裡修改例項屬性值，冒泡觸發的事件裡基於這個例項屬性做邏輯,如：

handleWrapClick = ()=>{
if(this.isStop){
return null
}
this.goHome() //跳轉到Home頁
}

2 jsx只能寫在render，注意，以下程式碼在支付寶小程式端是不起效的：

class Demo extends Component {
//在下面的這個例項方法裡寫jsx是不起效的
renderText = ()=>(
<Text>
demo
</Text>
)
render () {
const text = this.renderText();
return (
<View style={demoStyle}>
{text}
</View>
)
}
}

我們應該寫成下面的方式：

class Demo extends Component {
//jsx必須寫在render裡
render () {
const text = (
<Text>
demo
</Text>
);
return (
<View style={demoStyle}>
{text}
</View>
)
}
}

上述問題跟taro的render解決方案有關