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封裝了請求頭的請求函數
export  function 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解決方案有關