阅读 293
Taro微信小程序做支付宝小程序兼容时出现的问题

Taro微信小程序做支付宝小程序兼容时出现的问题

最近公司的微信小程序需要做支付宝的兼容,想着taro反正也能编译支付宝小程序,以为问题不会很大。没想到呀,这兼容做起来简直令人头秃

(这是第一次尝试些自己的开发总结,第一次描述,如果有什么不恰当的地方,请帮忙指出,万分感谢!)

a83ba16de63110b26309f38a3ed28925.jpeg

记录一下这艰辛的填坑过程:
  1. 一开始如果没有好好看taro官方文档的话,直接编译npm run build:alipay -- --watch,那就直接一个报错。因为taro初始化的项目是不会生成支付宝小程序配置文件mini.project.json的!具体配置根据支付宝小程序官网opendocs.alipay.com/mini/framew… 配置就可以啦

  2. 进入小程序后,可能会出现GET接口报错参数json格式错误,而微信那边一切都是正常的。这里呢,两者的Get数据传参是存在差异的,比如同样一个query接口传参:{status: ['1', '2'],sort: {id: asc}}在微信小程序没啥问题,但是在支付宝小程序需要做json转化{status: JSON.stringify(['1', '2']),sort: JSON.stringify({id: asc})}这就迎接了一波大量的代码修改,所以在开发小程序的时候,如果是有做支付宝兼容的,一定要提前做好这方面的工作,不然就得后期一个一个修改。

  3. 两者的确认弹窗也是不同的:微信的方法是showModal,然而小程序的是confirm。这个问题在开始开发的时候问题不大,但是一个原本可能没打算兼容支付宝的微信小程序,是不用考虑,但是以后突然要做兼容的话,难道要我去每个地方加上环境判断吗,当时直接上头

725057533544712d5338781958e94fe2.jpeg一开始我是这样做的,哇,这很自闭,后来我想了一个办法,在app.js中做一个该方法的环境判断,其他类似的api问题不同,都可以使用这个方法来做兼容 Taro.showModal = (option) => { if(process.env.TARO_ENV === 'weapp'){ return Taro.showModal(option) } else if(process.env.TARO_ENV === 'alipay') { return my.confirm(option) } }

  1. 还有一个问题就是两者的createSelectorQuery的用法也是不同的,我们在使用scoll组件的时候,时常需要获取页面中一些元素的高度来计算scoll滑动内容的总高,来适配不同型号的手机。这时候通常会用到createSelectorQuery方法
  • 微信里可能会用这种方式来获取元素的高度等数值:

Taro.createSelectorQuery().select(id).fields({ dataset: true, size: true, scrollOffset: true, properties: ['scrollX', 'scrollY'], computedStyle: ['margin', 'backgroundColor', 'width', 'height'] }, function (res) { response(res) }).exec()

  • 在支付宝根据其官方文档的描述,采用以下的方式

my.createSelectorQuery().select(id).boundingClientRect().exec((ret) => { response(ret) })

  1. 两者的swiper组件样式问题,我在做兼容的时候发现了原本在微信小程序中显示正常的滑块,在支付宝中会出现错位,间距消失等一系列样式的问题,仔细排查样式,发现每个item的宽高看起来都没有问题,但就是滑动以后的位置都会偏移中心。以下是我项目中的问题分析:
  • 在设置swiperItem的样式的时候,设置了width固定值,例如width: 300px;,所以在支付宝中手机的容器宽度是100% 大于每个item的300px宽度的,但是在支付宝小程序中每次划过的滑块宽度都是按照容器的宽度,也就是100%来滑动的,这就导致了每次划过的宽度过大,导致滑动的越多,item的偏移量越大。解决办法就是在swiperItem里嵌套一个<View></View>,将自定义的宽高放在这里即可。
  1. 还有一个问题,就是richText的问题,支付宝和微信是不一样的,支付宝必须是nodes 数组类型,而微信是数字和字符串都可,那一般在开发微信小程序的时候都不会注意到这个点。这就会导致编译成支付宝小程序后的所有富文本内容都是一片空白。此处附上官网的解决办法: opendocs.alipay.com/mini/compon…

  2. 最后一点是全局样式的问题,我的项目编译成支付宝小程序后,会出想不同文件下同名的样式冲突,这个应该是原本项目的样式module没有处理好,导致全局样式的冲突。

完毕!

6747172f37b236120dd90c6b78829398.jpeg

文章分类
前端
文章标签