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解決方案有關