背景
我们有一个项目，刚开始只是做支付宝小程序，但是到了后期，需求方说，需要将这个项目，同步上线到微信小程序中。刚好我们项目是用uni-app开发，想着移植到微信小程序中，应该没有太大的问题，只需要将npm run build:mp-alipay修改npm run build:mp-weixin。可能存在些许样式问题，或者部分属性，方法不兼容。工作量应该不大，但是实际做下来，发现问题还是比我们预想的多了一些，所以想记录下来，分享给大家，也作为自己处理这些兼容性的记录，方便下次遇到同样的问题，能快速解决。
问题1：页面链接参数encodeURIComponent
当我们进入某个页面的时候，页面链接上的参数存在encodeURIComponent，支付宝小程序会在onLoad的获取参数的时候，会在获取参数之前自动帮我进行decodeURIComponent出来，而微信小程序则不会，是什么样子，就是什么样子。看个例子：
// 跳转某个页面逻辑
const searchWord = "test test"
const jumpUrl = `pages/test/index?keyword=${encodeURIComponent(this.searchWord)}`
// 我们对searchWord进行了encodeURIComponent处理。
// 当我们进行pages/test/index页面的时候，onLoad获取的参数，两者出现了不一致
// 以下为伪代码
onLoad (option) {
console.log('微信小程序>>>>>>>>', option.keyword)
// 输出为 test%20test
console.log('支付宝小程序>>>>>>>>', option.keyword)
// 输出为 test test
}
如何解决这个问题呢，其实很简单，只需要在onLoad的获取option参数的时候，再次decodeURIComponent(option)。这个涉及的修改还是比较少的，只需要修改encodeURIComponent
参数的页面即可。
问题2：模板解析差异
看个下面这个例子：
const keyword = '关键字'
<text>"{{keyword}}"</text>
// 支付宝就正常展示为："关键字"
// 微信展示为：“"关键字"”
这个问题应该是两边模板解析导致不一致导致的，处理方式就是渲染内容放到变量里面即可。
<text>{{ searchText }}</text>
computed: {
searchText() {
return `"${this.keyword}"`
}
}
问题3：发票接口
支付宝需要在小程序拿到dynamicCode调服务端接口，才会拿到发票抬头信息。
抬头应用 - 支付宝文档中心 (alipay.com)
my.chooseInvoiceTitle({
success: (res) => {
const { dynamicCode } = res
// 这里可以拿到 dynamicCode
// 将 dynamicCode 传给服务端，服务端再调用openapi 获取真实的发票抬头
},
});
微信的话，直接在小程序中，调chooseInvoiceTitle接口，就可以拿到发票抬头信息。比支付宝少了一步。
wx.chooseInvoiceTitle(Object object) | 微信开放文档 (qq.com)
两者返回的字段名有些许差异，大家可以统一做一下映射。在此就不再赘述。
问题4：请求参数问题
这个问题，可以戳我的另一篇文章，有详细的解释：你一定不会注意到的get请求参数问题
问题5：平台本身的差异性
- 订阅消息
支付宝需要按照my.getAuthCode - 支付宝文档中心 (alipay.com)，而微信需要按照需要按照uni.requestSubscribeMessage(Object object) | uni-app官网 (dcloud.net.cn)
- CSS变量或者样式在不同平台解析的结果不一致时
padding-bottom: calc(24rpx + var(--safe-area-inset-bottom)); // 微信
padding-bottom: calc(24rpx + env(safe-area-inset-bottom)); // 支付宝
- header能否自定义
微信可以自定义header, 支付宝的是不允许自定义header, 如果你的项目，针对不同的平台，有不同的表现形式的话，需要注意注意兼容处理。
类似这种平台本身的语法，api都不一致的，就直接使用条件编译即可。 跨端兼容
- 支付
支付宝文档tradePay - 支付宝文档中心 (alipay.com)
my.tradePay({
tradeNO, // 支付宝交易号。
success() {
resolve({ error: false })
},
fail(error) {
console.log('tradePay error: ', error)
resolve({ error: true })
}
})
微信的话，直接采用wx.requestPayment(Object object) | 微信开放文档 (qq.com)方法即可。
结尾
由于这个项目时间也比较久了，能记起来的就只有这么多了，后面想到了，再补充上去。希望上述的分享能对大家开发过程中有所帮助。如果大家也有这方面的经验，也可以分享在评论区，以便相互交流学习。
如有错误，恳请指正。
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情
