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