前言:

本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档。

网络请求:

对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段改成了status。

用户授权登录:

1. 登录:

wx.login   ====   my.getAuthCode
wx.checkSession  ====  无(需后端接口验证)

缓存:

以常用的 wx.getStorageSync() 为例,先看微信的代码:

wx.setStorageSync("id", "1315151")
var id = wx.getStorageSync("id")
console.log("id", id)//输出 id 1315151

但是同样的代码在支付宝小程序中返回的确是不同的结果:

可见支付宝小程序中wx.getStorageSync()的使用与微信不同了,结合支付宝小程序开发文档及实例验证,支付宝小程序同步获取缓存的示例代码如下:

my.setStorageSync({ key: "id", data: "1315151" })
var res= my.getStorageSync({ key: 'id' })
console.log("id", res)//输出 res{success:true,key:"id",data:"1315151"}  

可见支付宝小程序中同步缓存获取的参数一定是要传入对象了,这用起来就有点不太习惯了。如果要做微信小程序的移植,那么就只有搜索所有 getStorageSync ,然后进行相应的修改了。

当然也可以直接在utils.js中封装一个公共函数,用来将支付宝小程序同步缓存获取方式直接转化成微信小程序的调用方式。具体代码如下:

//app.js
const getStorageSync = function(key) {  
return my.getStorageSync({
key: key
}).data || null
} App({
...    setStorageSync: function(key, data) {      
return my.setStorageSync({
key:key,
       data:data
})    
},
getStorageSync: function(key) {      
return getStorageSync(key)    
}, ...
}); //index.js
const app = getApp()
Page({
...
my.setStorageSync("id", "1315151")
var id = app.getStorageSync('id')
console.log("id", id) //输出 id 1315151
...
})

只需要保证每个需要获取同步缓存是脚本中获取应用实例app,那么直接全局搜索 “my.getStorageSync" 替换为 "app.getStorageSync" ,这样之前微信小程序复用过来的这块儿代码改动就很小了。

PS:

1.js中参数对象中如果也有获取同步缓存的代码,那么并不能直接引用上边封装的函数,只能用原生的方法去写,或者把封装的函数放到App外边,如:

const getStorageSync=function(key) {
return my.getStorageSync({ key: key }).data || null
}
App({
...
getStorageSync:function(key){
return getStorageSync(key)
},
globalData: {
userInfo: null,
globalShareInfo: {
...
path: '/pages/index/index?goods_id=' + getStorageSync("goods_id"),
...
}
});

这样在app内部都可以调用封装的getStorageSync函数了,但是这个函数还是要放在app内部开发出去给页面使用的。

2. 其他公共脚本,如utils.js,不建议因这一个功能引入整个app.js,建议直接使用原生代码,如果用的地方多,也可以在utils.js内部封装:

my.getStorageSync({ key: "token" }).data || ""

小程序唤起支付:

微信:

wx.requestPayment({
timeStamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success (res) { },
fail (res) { }
})

支付宝:

my.tradePay({
tradeNO: '201711152100110410533667792', // 调用统一收单交易创建接口(alipay.trade.create),获得返回字段支付宝交易号trade_no
success: (res) => {
my.alert({
content: JSON.stringify(res),
});
},
fail: (res) => {
my.alert({
content: JSON.stringify(res),
});
}
});

交互反馈:

my.showToast()

//微信小程序
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
//支付宝小程序
my.showToast({
type: 'success',
content: '操作成功',
duration: 3000,
success: () => {
my.alert({
title: 'toast 消失了',
});
},
});

微信到支付宝的移植:

先对比下两者之间参数的差别:

如上,蓝色为相同参数,可以不用修改,品红色为功能相同字段名不同的参数,其他没标出来的就是支付宝小程序中不支持的参数了。

一般在小程序中用的比较多的也就是纯文字的,时间未默认显示时长的toast提示,如:

wx.showToast({
title: '成功',
icon: 'none'
})

如果是这样,使用其他参数较少,那么仍可以通过封装公共方法来做转换的,具体方法详见同步缓存的快速移植

当然,这种参数差别比较大的在替换之后也要全局搜索进行核对下,对极个别使用了不常用的参数的代码进行处理。

支付宝小程序开发之与微信小程序不同的地方的更多相关文章

  1. 应用程序开发 WebApp NativeApp 微信小程序

    Web    Native App  微信小程序 WebApp是指基于Web的系统和应用,其作用是向广大的最终用户发布一组复杂的内容和功能.webapp 框架是一种简单的与WSGI兼容的网络应用程序框 ...

  2. 【小程序开发总结】微信小程序开发常用技术方法总结

    1.获取input的值 <input bindinput="bindKeyInput" placeholder="输入同步到view中"/>   b ...

  3. 小程序开发-iView Weapp微信小程序UI组件库入门使用

    iView Weapp UI组件库 今天来试试iView Weapp 这个微信小程序组件库,看看好不好用~~ 官网地址: http://inmap.talkingdata.com/wx/index_p ...

  4. 微信答题小程序 微信小程序 答题 demo 头脑王者这样的答题小程序开发 答题的微信小程序开发经验 微信答题比赛小程序

    最近随着王思聪的我撒币,我快乐,直播答题非常火.同时知乎的答题小程序头脑王者也非常火爆.大家在微信和微信群里玩的不亦乐乎. 好吧,快乐总是属于你们,我却只能埋头写代码... 公司要求赶紧开发一个这样的 ...

  5. 微信小程序开发公测,小程序账号申请办法攻略

    11月3号晚上 10 点,微信公众平台发布公告,宣布微信小程序正式开放公测.此次小程序公测允许开发者将产品提交至微信公众平台审核,但是暂时不支持发布,也就是说普通消费者若想体验小程序,还需要等待一段时 ...

  6. 移动开发之【微信小程序】的原理与权限问题以及相关的简易教程

    这几天圈子里到处都在传播着这样一个东西,微信公众平台提供了一种新的开放能力,开发者可以快速开发一个小程序,取名曰:微信公众平台-小程序 据说取代移动开发安卓和苹果,那这个东东究竟是干吗用的?但很多人觉 ...

  7. 微信小程序的开发:通过微信小程序看前端

    前言 2016年9月22日凌晨,微信官方通过"微信公开课"公众号发布了关于微信小程序(微信应用号)的内测通知.整个朋友圈瞬间便像炸开了锅似的,各种揣测.介绍性文章在一夜里诞生.而真 ...

  8. 零基础开发一款微信小程序商城

    零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...

  9. 微信小程序开发教程 #043 - 在小程序开发中使用 npm

    本文介绍了如何在微信小程序开发中使用 npm 中包的功能,大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频版更新. 微信小程序在发布之初没有对 npm 的支持功能,这也是目前很多前端开发 ...

随机推荐

  1. centos-yum离线源

    配置离线源 在个别开发环境中,我们可能有限制不能连外网. 这个情况可以通过用一台同内网的机器配置离线源,然后通过vsftp公用. 安装ftp rpm命令详解 $ rpm -ivh apache-1.3 ...

  2. PLSQLDeveloper_免安装自带client

    PLSQLDeveloper_解压版 免安装并且自带有client客户端. 要安装解压附带的readme.txt进行配置. 一. 目录结构 D:\install\PLSQL |-- instantcl ...

  3. linux 3.10的list_del

    最近看到一个page的数据比较奇怪: crash> page ffffea002c239c58 struct page { flags = , _count = { counter = 34-- ...

  4. 为什么虚拟DOM更优胜一筹

    注意: 虚拟DOM只是实现MVVM的一种方案,或者说是视图更新的一种策略.没有虚拟DOM比MVVM更好一说. 我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自 ...

  5. 【deep learning】斯坦福CS231n—深度学习与计算机视觉(资料汇总)

    官网 链接:CS231n: Convolutional Neural Networks for Visual Recognition Notes: 链接:http://cs231n.github.io ...

  6. java axis2 webservice

    http://clq9761.iteye.com/blog/976029/ 这篇文章写的是最全的,也是最好的.无须下一步下一步操作来操作去,写类直接调试,非常好!

  7. C# 图像处理:Bitmap 与 Image 之间的转换

    Image img = this.pictureBox1.Image; Bitmap map = new Bitmap(img); Image img = Bitmap; Image和Bitmap类概 ...

  8. Oracle Error

    1. TNS:listener does not currently know of service requested in connect descriptor 数据库连接出错

  9. 历届试题 大臣的旅费-(树的直径+dfs)

    问题描述 很久以前,T王国空前繁荣.为了更好地管理国家,王国修建了大量的快速路,用于连接首都和王国内的各大城市. 为节省经费,T国的大臣们经过思考,制定了一套优秀的修建方案,使得任何一个大城市都能从首 ...

  10. python基础学习 Day19 面向对象的三大特性之多态、封装 property的用法(1)

    一.课前内容回顾 继承作用:提高代码的重用性(要继承父类的子类都实现相同的方法:抽象类.接口) 继承解释:当你开始编写两个类的时候,出现了重复的代码,通过继承来简化代码,把重复的代码放在父类中. 单继 ...