支付宝小程序转微信小程序?

问题概述

支付宝小程序做完后,开始转战微信小程序;网上搜了一下都是都是微信转支付宝,并且还有转换工具(实名羡慕。。),并没有找到支付宝转换微信小程序的前车之鉴。由于拿到的是一半的项目,因此准备将支付宝与微信的区别整理出来,然后在开发者工具或者vscode进行全局替换,也能熟悉一下之前的代码。在做的过程中,进度还是很快的,三个工作日左右就能把语法、组件、API之类的改完,逻辑基本是不变的,在此整理一下两者的区别,方便大家在转换的时候能有些参考价值。

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

语法、文件名区别

类别 支付宝小程序 微信小程序
文件后缀 .acss、.axml .wxss、.wxml
方法前缀 my.、a: wx.、wx:
操作事件等(注意大小写) onTap、onInput、 catchTap、onChange、 onSubmit、onFocus、formType等 bindtap、bindinput、catchtouchstart、bindchange、catchsubmit、bindfocus、form-type等

API区别

类别 支付宝小程序 微信小程序
同步设置、获取缓存 设置:my.setStorageSync({ key: ‘test’, data:‘test0’});获取:my.getStorageSync({ key: ‘test’ }).data 设置:wx.setStorageSync({ ‘test’, ‘test0’});获取:wx.getStorageSync( ‘test’ )
获取登录凭证 方法:my.getAuthCode、返回code:res.authCode 方法: wx.login、返回code:res.code
多列选择器 my.multiLevelSelect picker组件
显示操作菜单 my.showActionSheet({ items: [‘A’, ‘B’, ‘C’], cancelButtonText: ‘取消’,success: (res) => { console.log(res.index) }}); wx.showActionSheet({ itemList:[‘A’, ‘B’, ‘C’],success (res) { console.log(res.tapIndex) }});
调用扫一扫 my.scan wx.scanCode
消息提示框 my.showToast({ type: ‘success’, content: ‘test’,duration: 2000,success: () => { console.log(“test1”) }}); wx.showToast({title: ‘成功’, icon: ‘success’, duration: 2000})
网络请求 wx.request 返回的状态值:res.statusCode、请求头传参:header my.request 返回的状态值:res.status、请求头传参:headers
消息提示框 my.showLoading({content: ‘加载中…’,delay: 1000}) my.hideLoading wx.showLoading({ title: ‘加载中…’}) wx.hideLoading
  • 获取手机号:
    支付宝小程序:
<button a:if="{{canIUseAuthButton}}" open-type="getAuthorize"  onGetAuthorize="onGetAuthorize" onError="onAuthError" scope='phoneNumber'>授权手机号</button>
my.getPhoneNumber({
  success: (res) => {
    let encryptedData = res.response;
    my.request({
        url: '你的后端服务端',
        data: encryptedData,
    });
  },
  fail: (res) => {
    console.log(res);
    console.log('getPhoneNumber_fail');
  },
});

微信小程序:

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)
    console.log(e.detail.encryptedData)
  }
  • 唤起支付:
    支付宝小程序:
my.tradePay({
  orderStr: 'myOrderStr', //完整的支付参数拼接成的字符串,从服务端获取
  success: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  },
  fail: (res) => {
    my.alert({
	  content: JSON.stringify(res),
	});
  }
});

微信小程序:

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

配置区别

  • 设置window
    支付宝小程序:
"window": {
    "defaultTitle": "测试", //页面标题文字
    "titleBarColor": "#ffffff", //导航栏背景颜色
  }

微信小程序:

"window": {
    "navigationBarBackgroundColor": "#ffffff", //导航栏背景颜色
    "navigationBarTextStyle": "black", //导航标题颜色
    "navigationBarTitleText": "测试",  //导航标题文字
    "backgroundColor": "#eeeeee", //页面背景颜色
    "backgroundTextStyle": "light" //窗口背景颜色
  }
  • 设置tabbar
    支付宝小程序:
"tabBar": {
	"textColor": "#333333", //默认颜色
	"selectedColor": "#009ffe", //选中颜色
	"backgroundColor": "#efefef", //背景色
	"items":[{
		"icon": "/images/pic1.png",
		"activeIcon": "/images/pic2.png",
		"pagePath": "pages/index/index",
		"name": "首页"
	}]
}

微信小程序:

"tabbar": {
	"color": "#333333", //默认颜色
	"selsetedColor": "#009ffe",//选中颜色
	"backgroundColor": "#ffffff",//背景色
	"borderStyle": "#e7e7e7",
	"list":[{
		"iconPath": "/images/pic1.png",
		"selectedIconPath": "/images/pic2.png",
		"pagePath": "pages/index/index",
		"text": "首页"
	}]
}

其他

  • 支付宝未提供的组件
    movable-view、cover-view、rich-text、open-data、contact-button 组件
  • 支付宝相关组件不能实现的功能
    1、 input、textarea 组件无法:设置 placeholder 样式,指定光标与键盘的距离,设置键盘右下角按钮文字,设置键盘右下角按钮时是否保持键盘不收起
    2、textarea 组件无法监听输入框行数变化
    3、radio、checkbox、switch 组件无法设置颜色(经测试微信小程序的 switch 组件设置 color属性在开发工具里并未生效)
    4、picker 组件没有提供 multiSelector(多列)、region(省市区)选择器
    5、form 组件无 report-submit 属性,微信小程序里该属性用来发送模板消息
    6、button 组件未提供开放能力
  • 微信相关组件不能实现的功能
    slider 组件不能设置轨道线条高度、滑块大小、滑块填充色
  • 支付宝小程序:cover-view和cover-image暂时不支持嵌套
  • 微信小程序中没有但可代替支付宝小程序中
    支付宝小程序:
 my.confirm({ 
	title: '提示', 
	content: '您确定***吗', 
	confirmButtonText: '确定', 
	cancelButtonText: '取消', 
	success: (result) => { 
		if (result.confirm == true) {
			console.log('用户点击确定')
		} else if (result.cancel == true) { 
			console.log('用户点击取消') 
		}
 });

微信小程序:

 wx.showModal({
    title: '提示',
    content: '您确定***吗',
    success (res) {
      if (res.confirm) { 
    	  console.log('用户点击确定')
	  } else if (res.cancel) { 
		  console.log('用户点击取消') 
	  }
 });

注:
在做微信小程序过程中,也参考了网上一些大佬整理的区别,以及自己在做的过程中发现的一些差异。发现微信小程序中很多比支付宝的用起来要更简洁顺手,个别的支付宝用起来更好些,不过支付宝小程序的开发文档更加详细,也适合新手开发理解。当然这里只是针对我的项目来总结的区别,还有些没有整理到,后续若再次开发小程序,会再来更新。总之希望能对大家有些帮助,有问题欢迎评论。。

热门文章

暂无图片
编程学习 ·

springcloud config 配置访问

springcloud http请求地址和资源文件映射如下: / { 应用名 } / { 环境名 } [ / { 分支名 } ] / { 应用名 } - { 环境名 }.yml / { 应用名 } - { 环境名 }.properties / { 分支名 } / { 应用名 } - { 环境名 }.yml / { 分支名 } / { 应用名 } - { 环境名 }.properties label 分支…
暂无图片
编程学习 ·

Centos7下为Open-falcon部署OpenTsdb

一边安装一边写,写得略乱安装OpenTsdb需要HBase,HBase需要Zookeeper和HDFS这一串都是apache家的,安装java是必须的yum install -y java一、安装Zookeeper在五个节点上部署zk下载tar包https://mirrors.tuna.tsinghua.edu.cn/apache/zookeeper/zookeeper-3.6.1/apache-zookeep…
暂无图片
编程学习 ·

【数据结构】-排序-快速排序

~快速排序在平均情况下是效果最好的排序算法~每趟子表的排序都是从两头向中间交替逼近,接下来举一个例子类别排序方法最好时间最坏时间平均时间空间复杂度稳定性序列特征适用于插入排序直接插入排序n(顺序)n2(逆序)n21稳定有序序列+待排序元素+无序序列基本有序/n很小折半插…
暂无图片
编程学习 ·

react-native 使用react-native-image-crop-picker上传图片、视频到服务端

博主主要卡在了上传数据这一步情景是这样的:每一次只允许选择一张图片,每次从相册中选择一图片点击右上角确定后,立即发送请求,上传该图片,并且下次再点击时,重复这个动作。(1)点击下图的上传资料(2)点击红框内的按钮(3)选择图片(4)选择完毕的同时,上传图片到服…
暂无图片
编程学习 ·

最流行的两种vue打包成apk框架,简述

最流行的两种vue打包成apk框架 1、使用Dcloud-HbuilderX打包app基础打包(可忽略)配置manifest.json文件 在HbuilderX中找到:发行—>原生app打包(云打包) 注意HbulderX一个账号只打包5次。 等待一段时间打包成功,查询打包状态,返回一个网站,打开下载即可。Vue项目打包ap…
暂无图片
编程学习 ·

单词学习2020

1. mindset: 心态;观念模式,思维倾向(1)This old mindset has not changed这个旧的思想意识还未转变(2)Enhancing leadership commitment and proactive mindset.增强领导力承诺和积极进取的心态(3)He faces all challenges by aggressive mindset他以积极的心态面对所…
暂无图片
编程学习 ·

动态任务

1.任务句柄 /* LED任务句柄 */ static TaskHandle_t LED_Task_Handle; 2.任务创建函数 BaseType_t xTaskCreate( TaskFunction_t pxTaskCode, //任务函数const char * const pcName, //任务名称const uint16_t usStackDepth, //堆栈大小void * const pvParamet…
暂无图片
编程学习 ·

机器视觉打光技巧

光源专家的8个打光技巧 机器视觉系统中的照明系统是极其重要的一部分,它的好坏直接影响着后面的图像处理。在听了一位日本光源专家的讲座之前,我其实对照明并不太了解,不就是将图像照亮以至于相机能够拍到图像吗?但事实并非如此,照明远非增强图像亮度这样简单,好的照明系…
暂无图片
编程学习 ·

线程池

目录概念优点架构线程池三种常用创建方式newFixedThreadPoolnewSingleThreadExecutornewCachedThreadPool线程池底层原理线程池工作流程线程池的拒绝策略自定义线程池 概念 线程池主要是控制运行线程的数量,将待处理任务放到等待队列,然后创建线程执行这些任务。如果超过了最…
暂无图片
编程学习 ·

手动连接线上presto

命令如下: java -jar presto-cli-0.237-executable.jar --server https://presto.ludp.lenovo.com:30070 --catalog hive --truststore-path /opt/jdk1.8.0_25/jre/lib/security/keystore.jks --truststore-password changeit在之前可以先测试一下网络 ping presto.ludp.lenov…
暂无图片
编程学习 ·

json从立地到成佛

文章目录诞生于JavaScript,json的前世今生json含义json诞生搞清json兄弟姐妹,看清区别json VS xml小小翻译官,json的应用前端ajax+json异步传输:跨平台webservice:非关系数据库存储(Nosql)拒绝四不像,json语法有要求json语法规则json名称/值json对象json数组JavaScript对象…
暂无图片
编程学习 ·

比较数组,vector对象和array对象

要了解数组,vector对象及array对象的相似与不同之处,结合以下示例分析: #include <iostream> #include <vector> #include <array>int main() {using namespace std;double a1[4] = {1.2,2.4,3.6,4.8};vector<double> a2(4);a2[0] = 1.0/3.0;a2[1] …
暂无图片
编程学习 ·

开启阿里云对象存储OSS防误删新功能,保护您珍贵的数据。

一、背景阿里云对象存储 OSS 是保存海量数据的平台,支持丰富的应用。在使用过程中难免会遇到误操作、程序 Bug、覆盖写等导致数据被删除的场景,对于数据的丢失会非常着急,后果也非常严重,甚至某些情况下还会影响你的职业生涯。OSS 每年都会遇到多起客户误删除数据的事件,为…
暂无图片
编程学习 ·

JavaScript从入门到精通复习资料大全(基础知识篇)

JavaScript从入门到精通复习一、JavaScript中的常量和变量1、常量:就是程序运行过程中,保持不变的数据。2、变量:是程序中一个已经命名的存储单元。3、 变量的赋值二:JavaScript中的运算符1、算术运算符2、比较运算符3、赋值运算符4、字符串运算符5、 逻辑运算符6、条件运…
暂无图片
编程学习 ·

Java数据结构--顺序栈

一、简介 1.1 概念栈:又称为堆栈,是限制在表的一端进行插入和删除的线性表。其限制是仅允许在表的一端进行插入和删除操作,不允许在其他任何位置进行插入、查找、删除等操作。 表中进行插入、删除操作的一端称为栈顶、栈顶保存的元素称为栈顶元素。相对的,表的另一端称为栈底…
暂无图片
编程学习 ·

Filebeat7.3基础运用

导言 项目主要是通过Filebeat读取日志文件,传输到Kafka上,Logstash获取Kafka的消息,过滤日志信息,传输到ElasticSearch上。实现数据的实时统计。楼主也是刚接触了ElasticSearch,有什么错误的,或者更好的操作,可以提供下,一起讨论。 1. 下载Filebeat的基础文件(根据自己…
暂无图片
编程学习 ·

node.js实现爬虫项目展示大作业

一、项目要求二、实现 1、用户可注册登录网站,非注册用户不可登录查看数据 登录页、注册页 <!DOCTYPE html> <html ng-app="login"> <head><meta charset="utf-8" /><title>Login</title><link rel="stylesh…