网站地图 | RSS订阅 老铁博客 - 上海SEO优化|上海网站建设|蜘蛛池出租|站群代搭建
你的位置:首页 » 推广营销 » 正文

新的小程序开发框架?- Taro的深度实践体验

2019-8-3 23:28:7 | 作者:老铁SEO | 0个评论 | 人浏览

  -Taro终于对外开源了,欢迎围观star(先打波广告)。作为第一批使用了Taro开发的TOPLIFE小程序的开发人员之一,自然是走了不少弯路,躺了不少坑,也帮忙找过不少bug。现在项目总算是上线了,那么,也是时候给大家总结分享下了。

  当初开发TOPLIFE第一期的时候,用的其实是wepy(那时Taro还没有开发完成),然后在第二期才全面转换为用Taro开发。作为两个小程序开发框架都使用过,并应用在生产环境里的人,自然是要比较一下两者的异同点。

  相同的地方也不用多说什么,都2018年了,这些特性的支持都是为了让小程序开发变得更现代,更工程化,重点是区别之处

  最大的不同之处,自然就是开发风格上的差异,wepy使用的是类Vue开发风格,Taro使用的是类React开发风格,可以说开发体验上还是会有较大的区别。贴一下官方的demo简单阐述下

  总的来说,毕竟是两种不同的开发风格,自然还是会有许多大大小小的差异。在这里与当前很流行的小程序开发框架之一wepy进行简单对比,主要还是为了方便大家更快速地了解taro,从而选择更适合自己的开发方式。

  taro官方提供的demo是很简单的,主要是为了让大家快速上手,入门。那么,当我们要开发偏大型的项目时,应该如何使用taro使得开发体验更好,开发效率更高?作为深度参与TOPLIFE小程序开发的人员之一,谈一谈我的一些实践体验及心得

  比较常见的一种项目目录组织方式,相比初始模板多了几个文件夹,用于存放redux相关的内容及其他的一些东西,整个项目结构相信还是比较直观,简单明了的

  redux大家应该都不陌生,一种状态管理的库,通常会搭配一些中间件使用。我们的项目主要是用了redux-thunk和redux-logger中间件,一个用于处理异步请求,一个用于调试,追踪actions

  相信大家都遇到过这种时候,接口返回的数据和页面显示的数据并不是完全对应的,往往需要再做一层预处理。那么这个业务逻辑应该在哪里管理,是组件内部,还是redux的流程里?

  对的,购车里的商品店铺和商品是放在两个对象里面的,但视图要求它们要显示在一起。这时候,如果直接将返回的数据存到store,然后在组件内部render的时候东拼西凑,将两者信息匹配,再做显示的话,会显得组件内部的逻辑十分的混乱,不够纯粹。

  所以,我个人比较推荐的做法是,在接口返回数据之后,直接将其处理为与页面显示对应的数据,然后再dispatch处理后的数据,相当于做了一层拦截,像下面这样:

  可以见到,处理数据的流程在render前被拦截处理了,将对应的商品店铺和商品放在了一个对象了.

  实际上,不只是后台数据返回的时候,其它数据结构需要变动的时候都可以做一层数据拦截,拦截的时机也可以根据业务逻辑调整,重点是要让组件内部本身不关心数据与视图是否对应,只专注于内部交互的逻辑,这也很符合react本身的初衷,数据驱动视图

  connect大家都知道是用来连接store、actions和组件的,很多时候就只是根据样板代码复制一下,改改组件各自的store、actions。实际上,我们还可以做一些别的处理,例如:

  实际上,这也是一种数据拦截处理。除了computed,还可以实现其它的功能,具体就由各位看官自由发挥了

  那taro,或者是小程序开发,有没有什么要注意的地方?当然有,走过的弯路可以说是非常多了

  估计是每个页面的数据在小程序内部都有缓存,所以做了10层的限制。带来的问题就是假如页面存在循环跳转,即A页面可以跳到B页面,B页面也可以跳到A页面,然后用户从A进入了B,想返回A的时候,往往是直接在B页面里点击跳转到A,而不是点返回回到A,如此一来,10层很快就突破了。所以我们自己对navigateTo函数做了一层封装,防止溢出

  上面说到,页面内容有缓存。所以假如某个页面是根据不同的数据渲染视图,新渲染时会有上一次渲染的缓存,导致页面看起来有个闪烁的变化,用户体验非常不好。其实解决的办法也很简单,每次在componentWillUnmount生命周期中清理一下当前页面的数据就好了。小程序说到底不是h5,不会说每次进入页面就会刷新,也不会离开就销毁,刷新,清理数据的动作都需要自己再生命周期函数里主动触发

  页面的滚动事件只能通过onPageScroll来监听,所以当我想在组件里进监听操作时,要将该部分的逻辑提前到onPageScroll函数,提高了抽象成本。例如我需要开发一个滚动到某个位置就吸顶的tab,本来可以在tab内部处理的逻辑被提前了,减少了其可复用性

  本来也想详细描述下的,不过在我们几位大佬的努力,加班加点下,已经开发出eslint插件,及补充完整了taro文档。大家只要遵循eslint插件规范,查看文档,应该不会有太大问题,有问题欢迎提issue

  总的来说,用taro来开发小程序体验还是很不错的,最重要的是,可以使用jsx写小程序了!!!作为react粉的一员,可以说是相当的兴奋了~

  Taro 内部组件如何使用外部组件的样式,除了externalClasses外,因为多层组件依次传递,也很冗余

  这个因小程序限制,暂时没有什么更好的办法。或者直接在子组件复制一份样式代码吧

  每个月,我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。

  • 本文来自: 老铁博客,转载请保留出处!欢迎发表您的评论
  • 相关标签:小程序框架  
  • 已有0位网友发表了一针见血的评论,你还等什么?

    必填

    选填

    记住我,下次回复时不用重新输入个人信息

    必填,不填不让过哦,嘻嘻。

    ◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。