• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Tarojs+redux支付宝小程序开发攻略

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

技术选型

   对于习惯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解决方案有关


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap