Tarojs+redux支付寶小程式開發攻略
技術選型
對於習慣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解決方案有關