一、什么是支付宝小程序?
定义:支付宝小程序是手机应用嵌入支付宝客户端的一种方法
优点
- 1、基于 Web 技术,学习成本低
- 2、一套代码,同时支持 iOS 和 Android,接近原生体验
- 3、提供丰富的组件和 API(比如获取用户信息、本地存储、支付功能等)
开发教程
二、支付宝小程序和微信小程序对比
区别
- 支付宝小程序
- 支付宝小程序不支持个人申请、仅支持企业注册
- 支付宝小程序审核相对严格:比如你的小程序里的用户协议里的词语不规范,都不会过审核。
- 支付宝跟微信相比一个特色的模块就是信用市场
- 文档目录结构
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/shouye@2x.png", //未选中图标
"selectedIconPath": "/pages/images/fill@2x.png" //选中图标
},
]
}
复制代码
三、微信小程序转成支付宝小程序
方法一:wxmp2antmp
wxmp2antmp 是一个微信小程序转支付宝小程序的命令行工具
- 安装
npm i -g wxmp2antmp
复制代码
- 使用
w2a 微信小程序目录 支付宝小程序目录
复制代码
-
使用时注意事项
-
路径问题:支付宝小程序中的路径解析和微信小程序中的路径解析是不同的
路径必须为相对路径
-
js 中的 wx 变量会被赋值为 my
-
微信小程序和支付宝小程序的 api 存在差异
-
-
实践结果
- 只能转变文件夹后缀名,以及所定义的变量,需要手动更改支付宝和微信小程序API不同的地方,例如底部tabBar,再比如登陆,比如缓存信息,弹出框,都需要自己手动改变,效率很低,但是可以根据文档仔细对比进行改正。
方法二:wx2ali
npm i wx2ali -g
如果是旧版本请命令行中输入npm update wx2ali -g进行更新 以获得更好的服务
复制微信小程序的源码一份;
wx2ali --getConfig获取配置文件路径 按照需要修改配置并保存
wx2ali --start
等待处理完成。
或者可以通过 wx2ali --path path路径 开始转换
复制代码
-
实践结果
- 转化过后堪称完美解决微信小程序转成支付宝小程序,几乎不需要手动更改任何东西,直接将所有的微信小程序的东西转成了支付宝小程序。
- 不过该转换方法只能转化微信小程序和支付宝小程序公共有的部分。
- 缺点:操作步骤比较复杂。针对于window系统和mac系统有不同操作的方式
- 该转化方法是直接在微信小程序上进行修改的,所以需要单独备份。
方法三:wxToAlipay
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上面所受关注度不是很高,所以存在一定的转化风险。