释放双眼，带上耳机，听听看~！
技术选型
对于习惯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解决方案有关
