支付宝小程序对比微信小程序

一、什么是支付宝小程序？

定义：支付宝小程序是手机应用嵌入支付宝客户端的一种方法

优点

• 1、基于 Web 技术，学习成本低
• 2、一套代码，同时支持 iOS 和 Android，接近原生体验
• 3、提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)

开发教程

docs.alipay.com/mini/develo…

二、支付宝小程序和微信小程序对比

区别

• 支付宝小程序
  • 支付宝小程序不支持个人申请、仅支持企业注册
  • 支付宝小程序审核相对严格：比如你的小程序里的用户协议里的词语不规范，都不会过审核。
  • 支付宝跟微信相比一个特色的模块就是信用市场
• 文档目录结构

    xx.axml    xx.acss   xx.json   xx.js
复制代码

• api调用对象 my
• 网络请求接口 my.httpRequest
• 获取缓存数据 my.getStorage({‘key’:”})
• 点击事件 onXXX
• xml模板里面{{}}可以进行++ –运算

"window": {
    "defaultTitle": "支付宝",            //页面标题
    "titleBarColor": "#d05021",         //导航栏背景色
    "pullRefresh":true,                 //是否允许下拉刷新 默认false
    "allowsBounceVertical": yes,       //页面是否支持纵向拽拉超出实际内容。   
 },
 "tabBar": {
    "textColor":"#000",                //未选中字体颜色
    "selectedColor":"#d81e06",         //选中的字体颜色
    "backgroundColor":"#fff",          //背景色
    "items": [{
      "pagePath": "pages/index/index" ,   //页面路径
      "name": "首页",                     //页面标题
      "icon": "pages/icon/index.png",    //为选中图标
      "activeIcon": "pages/icon/index_1.png" //选中图标
    }]
}
复制代码

• 微信小程序
  • 微信小程序大家都可以申请注册。
  • 微信小程序跟支付宝小程序相比的优点是微信流量大、人群活跃度高。
• 目录结构

    xx.wxml  xx.wcss   xx.json   xx.js
复制代码

• api调用对象 wx
• 网络请求接口 wx.request
• 获取缓存数据 wx.getStorage()
• 点击事件 bindXXX onTap bindtap
• xml模板里面{{}}微信小程序不能进行javaScript计算

"window": {
    "backgroundTextStyle": "light",             //下拉背景字体
    "navigationBarBackgroundColor": "#d0501f",  //导航栏背景颜色
    "navigationBarTitleText": "",              //导航栏标题文字内容
    "navigationBarTextStyle": "white",         //导航栏标题文字样式
    "enablePullDownRefresh": true,             //是否开启下拉刷新
    "onReachBottomDistance": 50        //页面上拉触底事件触发时距页面底部距离，单位为px。
},
"tabBar": {
    "selectedColor": "#d0501f",      //选中字体颜色
    "backgroundColor": "#fff",       //背景颜色
    "color": "#333",                 //未选中字体颜色
    "list": [
       {
        "pagePath": "/pages/home/home",  //页面路径
        "text": "首页",                  //页面标题
        "iconPath": "/pages/images/[email protected]", //未选中图标
        "selectedIconPath": "/pages/images/[email protected]"  //选中图标
        },
    ]
}
复制代码

三、微信小程序转成支付宝小程序

方法一：wxmp2antmp

wxmp2antmp 是一个微信小程序转支付宝小程序的命令行工具

github.com/aOrz/wxmp2a…

• 安装

npm i -g wxmp2antmp 
复制代码

• 使用

w2a 微信小程序目录 支付宝小程序目录 
复制代码

• 使用时注意事项

  • 路径问题：支付宝小程序中的路径解析和微信小程序中的路径解析是不同的

    路径必须为相对路径

  • js 中的 wx 变量会被赋值为 my

  • 微信小程序和支付宝小程序的 api 存在差异

• 实践结果

  • 只能转变文件夹后缀名，以及所定义的变量，需要手动更改支付宝和微信小程序API不同的地方，例如底部tabBar,再比如登陆，比如缓存信息，弹出框，都需要自己手动改变，效率很低，但是可以根据文档仔细对比进行改正。

方法二：wx2ali

github.com/foxitdog/wx…

npm i wx2ali -g

如果是旧版本请命令行中输入npm update wx2ali -g进行更新 以获得更好的服务

复制微信小程序的源码一份；
wx2ali --getConfig获取配置文件路径 按照需要修改配置并保存
wx2ali --start
等待处理完成。
或者可以通过 wx2ali --path path路径 开始转换
复制代码

• 实践结果

  • 转化过后堪称完美解决微信小程序转成支付宝小程序，几乎不需要手动更改任何东西，直接将所有的微信小程序的东西转成了支付宝小程序。
  • 不过该转换方法只能转化微信小程序和支付宝小程序公共有的部分。
  • 缺点：操作步骤比较复杂。针对于window系统和mac系统有不同操作的方式
  • 该转化方法是直接在微信小程序上进行修改的，所以需要单独备份。

方法三：wxToAlipay

github.com/douzi8/wxTo…

npm install wx-alipay -g

wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}}

// 排除部分资源
wxToalipay --src=/weixin/min --filter="!lizard/package/*,!lizard/Gruntfile.js"

// 定制回调, 在框架处理好后，在对每个文件进行处理
wxToalipay --src=/weixin/min --callback="wxToAlipay.js"
复制代码

• 实践结果

  • 操作难易度适中
  • 转化程度适中
  • 转化形式较为复杂

四、微信小程序转支付宝小程序表格对比

对比方法	wxmp2antmp	wx2ali	wxToAlipay
gitHub支持度	star 93 watch 6 fork 24	star 51 watch 10 fork 13	star 47 watch 3 fork 9
安装	npm i -g wxmp2antmp	npm i wx2ali -g	npm install wx-alipay -g
使用过程	w2a 微信小程序目录 支付宝小程序目录	复杂	wxToalipay --src={{小程序源码目录}} --dest={{支付宝小程序目录,可缺省}}
操作复杂程度	简单	复杂	适中
转化内容	1、文件后缀名转化 2、变量名转化，3、绑定事件名转化	1、除外部形式转化以外，对微信小程序和支付宝小程序共同的API也同时转化 2、且转化的代码也很贴合支付宝小程序形式	1、除外部形式转化以外，对微信小程序和支付宝小程序共同的API也同时转化；2、但是转化的代码并不能贴合支付宝小程序形式
转化代码截图
转化结果	转化程度低	转化程度高	转化程度适中
转化文件是否需要备份	无需备份	需要备份	无需备份

五、微信小程序转支付宝小程序方法选择

• 转化的可能性：根据三种方法的实践以及对比，我认为微信小程序是能够合理的转化成支付宝小程序的，根据综合对比，我认为选择wx2ali是最合理的转化方法。
• 转化风险：因为实践项目很小，暂时没有碰到很大的转化问题，而这三种方法都没有大项目做支撑，且gitHub上面所受关注度不是很高，所以存在一定的转化风险。