公司业务需要,要把本来的微信小程序移植到支付宝小程序,网上搜了一下,也没有很成熟的方案,用的最多的就是用 wx2ali 这个工具。 这个工具也只能把微信小程序文件的后缀名替换成支付宝小程序文件的后缀名,还有把绝大部分原生API的名称替换了一下,有很多细节还是要自己去改的。下面我就来讲一下项目从0到上线亲自踩过的坑。
ps:我用的是 wx2ali@1.1.7 这个版本
踩坑
1. <scroll-view> 组件滚动到底部触发的事件 onscrolltolower 要改成 onScrollToLower。
2. 微信小程序的响应头字段是 res.header,而支付宝小程序的响应头是 res.headers。
3. 支付宝小程序的 app.json 里没有 networkTimeout 的配置项,要把请求超时时间配置在 my.request API 里。
4. xx.wxs 的后缀名要改成 xx.sjs,引入的方式要更改
- 微信
在wxml文件中是这样<wxs src="../../xx.wxs" module="xx" />引入的。
- 支付宝
在axml文件中需要改为<import-sjs name="xx" from="../../xx.sjs"/>
5. statusCode需要替换为status
项目中有可能使用statusCode判断了接口返回的状态,在支付宝中需要替换为status
6. xx.sjs页面中使用,如果数据出问题,可能导致整个页面不加载,也不报错
自定义组件
1. 自定义组件不能使用驼峰命名,只能以小写字母短横线连接。
2. 父组件通过 props 向自定义组件内部传递数据,props 的使用形式类似于 React 的 props。
3. 定义在自定义组件上的方法要用 “on + 方法名” 的形式,方法名第一个字母必须大写。
<get-user-phone-modal onCloseGetUserPhoneModal="closeGetUserPhoneModal"></get-user-phone-modal>
4. 自定义组件设置默认值的 properties 属性要改成 props。
5. 子组件通过 props 触发父组件的函数时,不需要用 e.detail 的形式去获取参数。
API接口
1. my.getStorageSync 接口返回的数据格式跟微信不一致。
2. my.getSystemInfo 获得的 windowHeight 比微信小程序获得的要高 14px。
3. getScreenBrightness 的返回值对象里屏幕亮度的字段,微信是 value,支付宝是 brightness。
设置屏幕亮度时字段也要更改。
4. wx.showModal 会被转换成 my.confirm。
5. 支付问题
- 微信:wx.requestPayment
- 支付宝:my.tradePay
它们两个的区别是,参数多少,以及对成功的判定,微信是没支付就不会走sucess的方法,支付宝是
只要不是异常都会走sucess,但是会在sucess的返回值里做区分。
支付宝小程序开发工具
1. 有些 js 报错控制台不会提示,巨坑。