taro多端实践之h5端

taro是什么

引用官方的一句话来说明:

Taro 是一套遵循 React 语法规范的 多端开发 解决方案。现如今市面上端的形态多种多样,Web、React-Native、微信小程序等各种端大行其道,当业务同时在不同的端都要求有所表现的时候,针对不同的端编写多套代码的成本显然非常高,这时只编写一套代码就能适配到多端的能力就显得极为重要。使用 Taro,我们只需书写一套代码,再通过 Taro 的编译工具,即可将源代码分别编译出在不同端(微信/百度/支付宝/字节跳动小程序、快应用、H5、React-Native 等)运行的代码。

由于各小程序在api设计层面大体上还是一致的,所以这些端的兼容问题会稍微少点。h5和RN还有快应用的兼容,相对来说应该是比较难处理的。

taro兼容h5的实践

从兼容h5端的实践,总的来说,大问题没有,小问题还是不少的。下面我就来一一说说这些小问题。

  1. map组件暂未支持编译到h5端(当前taro最新版本2.0.1)。map组件的缺失对于需要的业务来说,还是比较麻烦的,解决办法有2种。第一,可以自己通过js的开源地图封装,对于能力较强的,可以去官方提个PR;第二,看看能不能从产品上进行阉割;
  2. iconfont使用alicdn,在本地dev无法显示。这个部署到服务器就没有问题了。后来查看taro的github上的issue发现,跟dev的机制有关系,具体还说不太清楚。需要在iconfont生成的代码font-face的url,指向alicdn的域名前添加完整的http或https协议(默认的域名前是双斜线(//)开头)。
  3. swiper组件在h5端,autoplay到最后一个slide,会停止下来(使用taro版本1.3.25)。查看官方changelog,该问题已经在taro版本2.0.0解决。
  4. 写样式需要注意2个问题。一个是单位,前期写css,用了rpx单位的情况。解决办法就是写回px。对于行内写了rpx的,使用Taro.pxTransform方法兼容,行内样式写了rpx,不会生效。另外一个需要注意的是高度使用vh。在部分浏览器,100vh是整个屏幕的高度,而视窗高度是100vh减去地址栏的高度,因此最好使用window.innerHeight来替代100vh的使用。
  5. onPageScroll函数的定义如果使用函数表达式定义,在h5端不会执行。解决办法是,使用具名函数定义而非函数表达式。

  6. 页面栈没有route属性。

const pages = Taro.getCurrentPages()
pages[0].route // route属性取到的值是undefined

解决办法:查询issue发现已有解决办法,在h5端,route获取方法pages[0][‘vnode’][‘_owner’][‘vnode’][‘props’][‘path’](注:pages[0]泛指页面栈实例)。

  1. picker-view组件不支持h5端编译。可以使用picker或者第三方组件来代替。其中如果要使用picker组件来代替,样式需要通过css覆写来实现。然后picker组件的触发,业务中如果不是picker组件点击显示,兼容的办法是获取到picker组件下的子节点,将这个子节点的虚拟dom获取到,调用click,就可以触发了。对于picker的字节点,最好做css隐藏处理。

  2. h5端,navigateBack的delta不能设置超过已有的页面栈数量,设置数值过大,跳转会失败,且不会有任何提示信息。

  3. setState传入一个方法的时候,返回的对象不能是传入的prevState对象本身,即有的开发者会在prevState对象上修改属性,然后return,在h5端不会生效。

  4. $router的参数跟各小程序端的不一样,可以大致这样兼容,即小程序端的this.$router.params等价于h5端的this.$router。

  5. taro的绑定事件阻止冒泡,需要在第一个事件处理函数里处理,如果通过第一个事件处理函数传递event,在下一个函数中处理会不起作用。(实验结果taro版本v1.3.25,支付宝端)。

  6. image图片,在h5不支持mode属性,需要自己用background-size兼容实现。

  7. webview组件的使用,webview内的h5跟壳之间的通信兼容。webview组件编译到h5端,是使用iframe来实现webview的效果的,通信可以使用js原生的方法postMessage来做,在壳这一侧,没有支持组件属性onMessage来监听内嵌h5的数据传递,需要通过addEventListener对message事件进行监听,同时需要注意的是,message事件会默认触发,因此,在传递信息的时候需要通过一些自定义的字段,来过滤掉不相干的message事件的处理。

小结

taro处理的端很多,虽然具备了一定的成熟度,能够满足一些业务需求,但离完全成熟还有点距离,所以难免在使用过程中会遇到坑,踩坑之旅,需要多点耐心,多调试想办法,祝入坑的朋友,不掉发,斜眼笑:)。

发表评论

电子邮件地址不会被公开。 必填项已用*标注