最近公司的微信小程序需要做支付宝的兼容，想着taro反正也能编译支付宝小程序，以为问题不会很大。没想到呀，这兼容做起来简直令人头秃
（这是第一次尝试些自己的开发总结，第一次描述，如果有什么不恰当的地方，请帮忙指出，万分感谢！）
记录一下这艰辛的填坑过程：
-
一开始如果没有好好看taro官方文档的话，直接编译npm run build:alipay -- --watch，那就直接一个报错。因为taro初始化的项目是不会生成支付宝小程序配置文件mini.project.json的！具体配置根据支付宝小程序官网opendocs.alipay.com/mini/framew… 配置就可以啦
-
进入小程序后，可能会出现GET接口报错参数json格式错误，而微信那边一切都是正常的。这里呢，两者的Get数据传参是存在差异的，比如同样一个query接口传参:
{status: ['1', '2'],sort: {id: asc}}在微信小程序没啥问题，但是在支付宝小程序需要做json转化{status: JSON.stringify(['1', '2']),sort: JSON.stringify({id: asc})}这就迎接了一波大量的代码修改，所以在开发小程序的时候，如果是有做支付宝兼容的，一定要提前做好这方面的工作，不然就得后期一个一个修改。 -
两者的确认弹窗也是不同的：微信的方法是showModal，然而小程序的是confirm。这个问题在开始开发的时候问题不大，但是一个原本可能没打算兼容支付宝的微信小程序，是不用考虑，但是以后突然要做兼容的话，难道要我去每个地方加上环境判断吗，当时直接上头
一开始我是这样做的，哇，这很自闭，后来我想了一个办法，在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) } }
- 还有一个问题就是两者的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) })
- 两者的swiper组件样式问题，我在做兼容的时候发现了原本在微信小程序中显示正常的滑块，在支付宝中会出现错位，间距消失等一系列样式的问题，仔细排查样式，发现每个item的宽高看起来都没有问题，但就是滑动以后的位置都会偏移中心。以下是我项目中的问题分析：
- 在设置swiperItem的样式的时候，设置了width固定值，例如
width: 300px;，所以在支付宝中手机的容器宽度是100%大于每个item的300px宽度的，但是在支付宝小程序中每次划过的滑块宽度都是按照容器的宽度，也就是100%来滑动的，这就导致了每次划过的宽度过大，导致滑动的越多，item的偏移量越大。解决办法就是在swiperItem里嵌套一个<View></View>，将自定义的宽高放在这里即可。
-
还有一个问题，就是richText的问题，支付宝和微信是不一样的，支付宝必须是nodes 数组类型，而微信是数字和字符串都可，那一般在开发微信小程序的时候都不会注意到这个点。这就会导致编译成支付宝小程序后的所有富文本内容都是一片空白。此处附上官网的解决办法： opendocs.alipay.com/mini/compon…
-
最后一点是全局样式的问题，我的项目编译成支付宝小程序后，会出想不同文件下同名的样式冲突，这个应该是原本项目的样式module没有处理好，导致全局样式的冲突。
完毕！
