微信小程序快速移植支付宝小程序

移植背景：

1. 支付宝小程序开发文档只了解了大致框架，跑了demo，具体Api、组件没太多了解；

2. 已有微信小程序，移植支付宝小程序做预研（主要针对授权登录、支付等功能）。

3. 移植的微信小程序属小型项目，页面8个，组件两个。首页功能性较强，集成了主要的业务处理逻辑，涉及登录、获取用户手机号码、获取定位信息、下单、支付、查看卡券等功能。

移植用时：

大致2小时，基本完成前端移植（控制台无报错，接口正常调用，用户登录授权需等后端接口改造，具体页面和流程需待后端相关接口改造后再行调试验证）

移植过程：

1. 创建支付宝小程序：

最好是基于todo模板创建一个demo项目，这样方便移植的时候对比修改。

2. 公共项目配置文件复用：

app.json文件中，支付宝小程序window配置项与微信小程序不同，需要单独修改。

app.js文件中，支付宝小程序默认没有全局变量的，我们需要自行将微信小程序中定义的全局变量复用过来。

app.wxss==>app.acss公共样式：完全复用就好了。

3. 模板复制：

将微信小程序主目录下的pages/components/imgs及utils目录复制到支付宝小程序主目录下进行合并。

4. 接口请求的改造：

res.statusCode==>res.status

5. 模板文件名后缀修改：

所有页面和组件中的模板文件和样式文件后缀都需要修改，页面比较多的可以编写批处理修改。

• wxml==>axml
• wxss==>acss

6. 模板文件中需要替换的地方：

模板文件axml中，需要替换的主要有这些：

• bindTap-==>onTap
• wx:==>a:

脚本文件js中，需要替换的主要有：

• wx.==>my.

小程序开发工具中一键替换方法如下：

7. 不同的API的处理：

经过上边的改造，基本上对于框架类的东西都已经更换了，剩下的就是API方面的不同需要修改了。

对于小程序API，大部分都是相同的，可以说需要调整的API并不是很多。但基于各自内部不同的生态，所以在授权登录、支付这些方面自然会有所不同。对于这部分API的移植，就没有前边的一键替换那么方便了，你也不可能一个个把所有用到的API都去搜索下去做调整。最好的方法就是直接在小程序的运行中进行调试，通过调试来发现并调整需要更改的API。

对于这块儿的改造，就得好好利用console.log()了，如下图输出的是my.getAuthCode接口获取用户code值的返回数据，不同于微信小程序的code,支付宝的是authCode，所以才会有下边的报错，调整对应的代码就好了。

后端接口改造：

对于用户授权登录、支付等API的参数是需要后端返回的，因此这方面的代码就需要等后端相关接口改造完成之后才能正常调试了。