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解决方案有关