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

问题概述

支付宝小程序做完后,开始转战微信小程序;网上搜了一下都是都是微信转支付宝,并且还有转换工具(实名羡慕。。),并没有找到支付宝转换微信小程序的前车之鉴。由于拿到的是一半的项目,因此准备将支付宝与微信的区别整理出来,然后在开发者工具或者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('用户点击取消') 
	  }
 });

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

热门文章

暂无图片
编程学习 ·

dom基础知识笔记

dom:Document Object Model个人认为dom是一种约定,开发者按这种形式写html,浏览器按这种形式解析html
暂无图片
编程学习 ·

ClassName(类名)命名

ClassName命名 ClassName的命名应该尽量精短、明确,必须以字母开头命名,且全部字母为小写,单词之间统一使用下划线 “_” 连接。 eg:.nav_top 注意事项 ad、banner、gg、guanggao 等有机会和广告挂勾的字眠不建议直接用来做ClassName,因为有些浏览器插件(Chrome的广告拦截…
暂无图片
编程学习 ·

浅析原型模式中的clone()

更多精彩文章请访问我的个人博客(zhuoerhuobi.cn)最近学习到设计模式中的原型模式,在学习过程中,产生了对clone()实现的原理和效率的兴趣。原型模式(Prototype Pattern)是用于创建重复的对象,同时又能保证性能。这种类型的设计模式属于创建型模式,它提供了一种创建对象的…
暂无图片
编程学习 ·

都说Python容易自学,那如何系统的学习Python

做Python开发十年,给大家详细分析一下这个问题 首先告诉你的是,零基础学习开始系统学习Python肯定难,Python的专业程度本身就不简单,学习这事本来就是一件非常煎熬的事情,人都不愿意学习,可是没办法,为了生存掌握一个技能,你必须学,如果你认真的对待,你就找不到高薪水…
暂无图片
编程学习 ·

Java使用poi将office文件转为html

一、前言 功能需求:上传office文档,并提供文件在线预览。 解决方案:使用Aspose.cells.jar包,将文档转换为pdf格式; 使用libreOffice,将文档转换为pdf格式; 使用poi将文档转换为html格式。方案一:通过Aspose的方式,该功能是付费版,需要破解,所以是能抛弃。 方案二,使…
暂无图片
编程学习 ·

Promethus(普罗米修斯)监控系统搭建与使用实践

1.目标 1.1 能够安装prometheus服务器 1.2 能够通过安装node_exporter监控远程linux 1.3 能够通过安装mysqld_exporter监控远程mysql数据库 1.4 能够安装grafana 1.5 能够在grafana添加prometheus数据源 1.6 能够在grafana添加监控cpu负载的图形 1.7 能够在grafana图形显示mysq…
暂无图片
编程学习 ·

Docker镜像管理透析

欢迎关注【无量测试之道】公众号,回复【领取资源】, Python编程学习资源干货、 Python+Appium框架APP的UI自动化、 Python+Selenium框架Web的UI自动化、 Python+Unittest框架API自动化、资源和代码 免费送啦~ 文章下方有公众号二维码,可直接微信扫一扫关注即可。1、docker,镜…
暂无图片
编程学习 ·

css border-radius的用法及自适应的椭圆

我们知道border-radius允许您为元素添加圆角边框! 而border-radius 属性是一个简写属性,用于设置四个 border-*-radius 属性。 如果省略 bottom-left,则与 top-right 相同。如果省略 bottom-right,则与 top-left 相同。如果省略 top-right,则与 top-left 相同。 先看个例子…
暂无图片
编程学习 ·

zabbix4版本被动模式切换到主动模式没有数据的问题解决

嘚!检查一下zabbix server和zabbix agent的时间是否同步,被动模式为zabbix server主动向agent发起数据请求,所以和时间不同步关系不大,但是主动模式是agent主动向server推送数据,这肯定会带上时间戳,server根据收到数据保存的时间进行数据保存和展示,所以数据无法实时显示…
暂无图片
编程学习 ·

jQuery 的实现原理

(function(window, undefined) {})(window); jQuery 利用 JS 函数作用域的特性,采用立即调用表达式包裹了自身,解决命名空间和变量污染问题 window.jQuery = window.$ = jQuery; 在闭包当中将 jQuery 和 $ 绑定到 window 上,从而将 jQuery 和 $ 暴露为全局变量
暂无图片
编程学习 ·

vc++ GDI+实现以鼠标为中心缩放图片(并且可以拖动)

按以下步骤操作,即可实现。1. 首先创建一个基于对话框的MFC程序,然后把下面两个文件分别保存为.h文件和 .cpp文件//InitGdiplus.h #pragma once#include <GdiPlus.h> using namespace Gdiplus;class CInitGdiplus { public:CInitGdiplus(void);~CInitGdiplus(void);pri…
暂无图片
编程学习 ·

牛客习题总结21

借助别人的图……如果序列有序或者基本有序,则直接插入或者冒泡最简单无向图的顶点个数为n,则该图最多有 n(n-1)/2 条边; 有相图的顶点个数为n,则该图最多有n(n-1)条边。
暂无图片
编程学习 ·

Git上传项目到GitHub

windows上传文件到github的方法 文章目录windows上传文件到github的方法一、创建github的账号:二、安装git:三、上传简单来说就是以下几个命令:Git常见错误与操作:error: src ref spec master does not match any以及failed to push some refs to 。。。解决办法,再来一遍…
暂无图片
编程学习 ·

百度百科创建好像成功不了,BBdoc文档搜索词条都四个版本了无法成功!

看来想创建成功百度百科几乎是不太可能,不知道啥原因?本来想通过百度百科让更多人了解到BBdoc文档搜索工具,可以早日使用上,但就是无法成功。BBdoc文档搜索官网:http://www.bbdoc.cn/版本1提示错误:版本2提示错误:版本3提示错误:版本4提示错误:不想有版本5了,快崩溃哪…
暂无图片
编程学习 ·

手把手撸一个轮播图

轮播图HTML和CSSJS HTML和CSS <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>轮播图</titl…
暂无图片
编程学习 ·

『互联网架构』软件架构-软件系统设计(一)

按照正常的互联网玩法,产品经理原型画好进行需求评审,评审完后,需要把需求丢给技术经理,或者技术负责人,进行一整套的概要设计,然后针对概要设计评审,概要评审后进行开发。这次咱们一起说说概要设计的体系结构。了解下套路。软件系统设计软件系统设计在很多人眼里就是写…
暂无图片
编程学习 ·

vue 插件大全

vue 插件大全 Vue是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件特别整理了常用的vue插件,来了个大汇总,方便查找使用,便于工作和学习。很全的vue插件汇总,赶紧收藏下吧! 一、UI组件及框架element …