没有灵魂的微信小程序代码转支付宝小程序代码

没有灵魂的微信小程序代码转支付宝小程序代码

微信小程序与支付宝小程序

作为一个微信小程序的半新手,支付宝小程序的全新手! 在公司安排的这次任务中,需要把已经上线的支付宝小程序更新为和微信小程序一样的版本。就只有打开微信和支付宝的开发者对比两个版本的差异然后改改改了。如果是完全生成一个支付宝小程序项目,可参考:https://jingyan.baidu.com/article/a948d651c3ae330a2ccd2e77.html

以下仅为个人要修改项目中所遇到的总结,如果没有你想知道的就还是去对比文档吧。这是本人第一次写博客,有错误的或者要添加的请大家多多指点

微信小程序开发文档地址:https://developers.weixin.qq.com/miniprogram/dev/
支付宝小程序开发者文档地址:https://docs.alipay.com/mini/developer/getting-started

直面代码的替换内容

两个小程序大体都是一样的,要修改的不过于有引用的组件名称,页面渲染的指令,点击事件的名称,调用的API等。如果是版本更新,只修改部分页面。一定要记得检查新增的页面,图片等。是否有的没有添加。

  1. 引用文件的名字 :把页面中的wxml改为axml;wxss改为acss

  2. AXML中的修改:选中所有的wx:替换为a:
    (1)在axml搜索bind;将bindTap替换为onTap,catchtap替换为catchTap。
    (2)一些常用组件的事件名称或属性如:scroll-view的bindscrolltolower替换为onScrollToLower,bindscrolltolower替换为onScrollToUpper。picker的bindchange替换为onChanges。checkbox的bindchange替换为onChange。form表单的bindsubmit,bindreset,form-type改为onSubmit,onReset,formType 。
    (3)常见规律是把bind替换为on,然后是以驼峰式命名。可以搜索bind进行查看。别的组件我没有一一列出来。项目有用到的话可以对照文档进行修改。

  3. js的修改:js中所有的wx.替换为my.
    (1) API名称或属性:showToast弱提示框,内容属性title替换成content。makePhoneCall拨打电话的参数phoneNumber替换成number。微信小程序设置导航栏API分别对应有wx.setNavigationBarTitle,wx.setNavigationBar,wx.setNavigationBarColor等,支付宝是在一个API中my.setNavigationBar通过入参进行修改。
    (2)图片的API:在选择图片chooseImage成功后返回的参数由tempFilePaths替换成apFilePaths。对图片进行压缩compressImage中。
    微信的对应的参数为:在这里插入图片描述
    支付宝对应参数为:在这里插入图片描述
    (3)支付的API:在验证支付是否成功时。
    微信对应返回:在这里插入图片描述 官方文档地址:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=5
    支付宝对应返回:**加粗样式**
    官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/wx.requestPayment.html
    发起支付的api名称和参数时完全不同的,详情见连接。
    (4)内置地图选择地理位置的chooseLocation:调用这个api肯定是需要用户先授权的。(如果用户未接受或拒绝过此权限,会弹窗询问用户,用户点击同意后方可调用接口;如果用户已授权,可以直接调用接口;如果已经拒绝授权的话就需要调用wx.openSetting 引导开启授权)
    对于支付宝来说,我也不知为何是可以直接调用的,不用重新引导授权之类的。它也不像微信,在一次申请用户授权后就需要调用openSetting 重新授权。官方文档中也没找到openSetting 这个API。有一个权限引导的my.showAuthGuide。但是里面对应不同设备权限不同。这个有大神知道的希望指点一二。在这里插入图片描述
    值得注意的是,在手机微信小程序中获取位置时有一个常用位置。选择这条地理位置返回的信息与别的位置返回数据是不同的(可能没有省市区)。需要用经纬度重新获取详细地址。在这里插入图片描述 支付宝小程序的位置选择在开发者工具中返回参数是文档所写那样,但是在手机上参数是如此返回的。在这里插入图片描述
    因此,最好用手机打开调试器,输出看一下。并且尤为重要的是Ios和Androidos常用位置返回参数信息是不同的。

以上是在个人项目中所遇到的总结,大家可以先替换文件内容,直到页面不报错。在查看页面功能,有问题再对应文档进行比较。只是支付宝的文档着实差一点。等熟悉文档大致内容后和真机一起调试就不会再那么迷惑啦。

功能快捷键

选中所有匹配项:Ctrl+shift + L
选中下一个匹配项:Ctrl + D
查询:Ctrl + F

  • 9
    点赞
  • 36
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值