支付宝小程序与微信小程序的不同点对比


支付宝小程序微信小程序有哪些不同的地方,怎么把微信小程序转为支付宝小程序?本文从代码全面为你揭晓。

概览

1.js命名空间,从wx(微信)改为 my(马云)

wx.navigateTo => my.navigateTo

2.绑定事件从bind改为on开头,并且采用驼峰形式,例如

bindchange="xx" => onChange="xx"

3.if 和 for语句写法不同

wx:if => a:if
wx:for => a:for
wx:key => a:key
wx:for-item => a:for-item
wx:for-index => a:for-index

另外支付宝还增加了一个key属性,key 是比 a:key 更通用的写法,里面可以填充任意表达式和字符串。在 for 中使用 key 来提高性能。注意 key 不能设置在 block 上

4.JS方法名调整

wx.request() => my.httpRequest()
wx.login() => my.getAuthCode()
wx.showModal() => my.confirm()
wx.getUserInfo() => my.getAuthUserInfo()
wx.requestPayment() => my.tradePay()
wx.saveImageToPhotosAlbum() => my.saveImage()
wx.setNavigationBarTitle() => my.setNavigationBar() #导航栏标题
wx.setNavigationBarColor() => my.setNavigationBar() #导航栏颜色
wx.getClipboardData() => my.getClipboard() #粘贴板
wx.setClipboardData() => my.setClipboard() #粘贴板
wx.canvasToTempFilePath() => my.toTempFilePath() #1.1.3 当前画布的内容导出生成图片
wx.scanCode() => my.scan()
wx.closeBLEConnection() => my.disconnectBLEDevice()

5.缓存

支付宝只有一种写法,而微信则有两种

setStorage()

微信:

wx.setStorage({
  key:"key",
  data:"value"
})


try {
  wx.setStorage('key', 'value')
} catch (e) { }

支付宝:

my.setStorage({
  key: 'key',
  data: 'value',
  success: function() {
    my.alert({content: '写入成功'});
  }
});

同样需要调整的还有:setStorageSyc() / getStorage() / getStorageSync() / removeStorage() / removeStorageSync()

6.文件类型不同

微信的是:js、wxml、wcss、JSON

支付宝的是:js、axml、acss、json

注意在样式中import时,如果从微信小程序调整到支付宝小程序,后缀要改过来

@import "/pages/public/css/component.wcss";

to

@import "/pages/public/css/component.acss";

7.page.json·

window对象设置

微信的:

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "微信接口功能演示",
    "enablePullDownRefresh":true,
    "disableScroll":true
  }

支付宝的:

//code from http://caibaojian.com/aliapp-wxapp.html
{
	titleBarColor: "#ffffff"
	defaultTitle: "页面标题",
	pullRefresh: true,
	allowsBounceVertical: 'YES'
}

tabBar
微信的:

"tabBar": {
        "color": "#999",
        "selectedColor": "#333",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "icons/1.png"
                "selectedIconPath": "icons/1_c.png",
            }
        ]
    },

支付宝的:

{
  "tabBar": {
    "textColor": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
        "icon":"icons/1.png",
        "activeIcon":"icons/1_c.png"
      }
    ]
  }
}

支付宝的配置文件比微信的少了很多参数,但基本都可以转

8.spliceData()

支付宝多了一个更高性能设置数据的方法:

this.$spliceData({
	'a.b':[1,0,4,5,6];
})

9.JS模块化

支付宝采用ES6语法

微信的:

const config = require('../../pc.config.js');
const util = require('../../common/util.js');

支付宝:

import config from '/config'; // 载入项目根路径文件
import util from '../../common/util'; // 载入相对路径

微信的:

var config = {

}
module.exports.config = config;

支付宝的:

var config = {

}

export default config;

支付宝支持引入社区上的第三反方NPM,微信则对引入的NPM有规定的格式。

10.API属性调整

以下格式:左边的是微信属性名--->右边的是支付宝对应的属性名

showToast 

	title--->content
	icon--->type


showLoading #显示加载框

	title--->content

confirm #显示提示框

	confirmText--->confirmButtonText
	cancelText--->cancelButtonText

showActionSheet

	itemList--->items

setTextAlign

	align--->textAlign

previewImage

	current--->current=string->number

getLocation #获取位置

	type--->type=string->number

saveImage

	filePath--->url

httpRequest

	header--->headers

uploadFile

	name--->fileName

connectSocket
 
	header--->headers

setClipboard

	data--->text

makePhoneCall

	phoneNumber--->number

下面的内容是我对照着支付宝文档和微信的区别抄的笔记。有点重复,权当记录。

文件类型

js、axml、acss、json

开发者写的所有代码最终将会打包成一份 JavaScript 脚本,在小程序启动的时候运行,在小程序结束运行时销毁。

逻辑结构

小程序的核心是一个响应式的数据绑定系统,逻辑上分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会相应的更新。

支持ES6

import util from './util'; // 载入相对路径
import absolute from '/absolute'; // 载入项目根路径文件

支持第三方NPM模块

npm install lodash
import lodash from 'lodash'; // 载入第三方 npm 模块

app.json配置差异

"window": {
    "defaultTitle": "Demo"
  }

跟微信不同的地方:

defaultTitle:页面标题
pullRefresh:是否允许下拉刷新。默认 false
allowsBounceVertical:页面是否支持纵向拽拉超出实际内容。默认 YES
titleBarColor:导航栏背景色

tabBar写法

{
  "tabBar": {
    "textColor": "#dddddd",
    "selectedColor": "#49a9ee",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "name": "日志"
      }
    ]
  }
}

事件绑定

写法:on/catch[事件名驼峰]="回调名"

<button onTap="changeText">change Text</button>

Page()的方法属性

Page()方法的属性多了

onTitleClick():点击标题触发
onOptionMenuClick:点击格外导航栏图标触发(1.3+)
onPageScroll:页面滚动时触发

高效的列表处理方法(新增)

Page.prototype.$spliceData()

对象的键名key可以非常灵活,以数据路径的形式给出,如 array[2].message、a.b.c.d,并且不需要在this.data中预先定义。
对象的value为一个数组(格式:[start, deleteCount, ...items]),数组的第一个元素为操作的起始位置,第二个元素为删除的元素的个数,剩余的元素均为插入的数据。对应es5中数组的splice方法

每一个页面的page.json

多了一个方法,onOptionMenuClick:配置导航图标,点击后触发

{
  "optionMenu": {
    "icon": "https://img.alicdn.com/tps/i3/T1OjaVFl4dXXa.JOZB-114-114.png"
  }
}

视图层指令

条件循环

<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view a:elif="{{view == 'APP'}}"> APP </view>
<view a:else> alipay </view>

列表循环

<view a:for="{{items}}"> {{item}} </view>

以上可以看出wx:换成,a:

数据绑定

对象扩展符:...来将一个对象展开

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}。


列表循环

增加了一个key属性

key 是比 a:key 更通用的写法,里面可以填充任意表达式和字符串。

在 for 中使用 key 来提高性能。

注意 key 不能设置在 block 上

样式

支持rpx

css3 保持一致,注意点:

.a-, .am- 开头的类选择器为系统组件占用,请不要使用

不支持属性选择器

自定义脚本

微信中使用wxs

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

支付宝中使用sjs

// /pages/xx.sjs
const message = 'hello alipay'
const getMsg = x => x;

export default {
  message,
  getMsg,
};
// /pages/index/index.axml
<!--axml-->
<import-sjs name="m1" from="../xx.sjs"/>

<view>{{m1.message}}</view>
<view>{{m1.getMsg(msg)}}</view>

.sjs文件中引用其他.sjs文件

// /pages/message.sjs
import hello from './hello.sjs';

var getMsg = function getMsg(){
  return hello + ' message';
}

export default {
  getMsg: getMsg
};

注意点

  1. sjs 只能定义在.sjs文件中。然后在axml中使用import-sjs引入。
  2. sjs 可以调用其他 sjs 文件中定义的函数。
  3. sjs 是 javascript 语言的子集,不要将其等同于javascript。
  4. sjs的运行环境和其他javascript代码是隔离的,sjs中不能调用其他javascript文件中定义的函数,也不能调用小程序提供的API。
  5. sjs函数不能作为组件的事件回调。
  6. sjs不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。

自定义组件

和页面一样,自定义组件也由4个部分组成:axml、js、json、acss。

示例:

// /components/customer/index.json
{
  "component": true
}

// /components/customer/index.js
Component({
  mixins: [], // minxin 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(){},
  didUnmount(){},
  methods: { // 自定义事件
    handleTap() {
  	  this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

<!-- // /components/customer/index.axml -->
<view>
  <view>x: {{x}}</view>
  <button onTap="handleTap">plusOne</button>
  <slot>
    <view>default slot & default value</view>
  </slot>
</view>

使用:

// /pages/index/index.json
{
  "usingComponents": {
    "customer": "/components/customer/index"
  }
}

<!-- /pages/index/index.axml -->
<view>
  <customer />
</view>

组件

列出与微信对比没有的组件:

基础内容:

rich-text

导航:

functional-page-navigator

媒体:

audio、video、camera、live-player、live-pusher

开放组件:

open-data

扩展组件

多了很多微信没有的扩展组件

布局导航

List 列表、Tabs 选项卡、VTabs 纵向选项卡、Card 卡片、Grid 宫格、Steps 步骤条、Footer 页脚

操作浮层

Popover 气泡、Filter 筛选、Modal 对话框、Popup 弹出菜单

结果类

PageResult 异常页、Message 结果页

提示引导

Tips 引导、Notice 通告栏、Badge 徽标

表单类

InputItem 文本输入、AmountInput 金额输入、SearchBar 搜索框、AMCheckBox 复选框

手势类

SwipeAction 可滑动单元格

其他

Calendar 日历、Stepper 步进器

API

命名空间为:my.

交互反馈增加了

my.alert()、my.confirm()、my.prompt()

交互反馈没有

showModal

增加了联系人

my.choosePhoneContact()

增加了选择城市

my.chooseCity()

增加了选择日期

my.datePicker(object)

···
差别太多了,不一一列举了。


参考:   原文链接:http://caibaojian.com/aliapp-wxapp.html  
来源:前端开发博客  

与本文有关的文章

express/ multer 上传图片文件 html图片延迟加载 一段奇葩Javascript代码引发的思考 JavaScript两个变量交换值(不使用临时变量) ES6中Math对象的部分扩展 JavaScript中为什么string可以拥有方法? 前端js中经常出现的算法总结 canvas粒子瀑布 canvas纺纱飘带 JavaScript求最长公共子串 JavaScript中的__proto__ JS判断访问设备或型号 js获取url?后的参数 js键盘keyCode对照表 页面鼠标滚动事件 对象克隆或拷贝不是赋值 URL参数含有中文出现乱码 es6常用的的语法大集合 js中的this关键字 js中实现 a*寻路算法 js中用 '==' 还是 '===' web性能优化 reflow(回流)与repaint(重绘) 7年前端大神总结出的js经验 scroll事件常用到的场景,以及判断 js中深度拷贝与浅拷贝 requirejs基础知识 判断参数是什么类型?array?object? 有趣的js基础选择题 js中哪些值能作为if的条件,if使用小技巧 js中键盘按下事件keydown js中的!function到底是什么意思? AMD与CMD的区别到底在哪? Array与Math属性 方法一览 js中的栈与堆 jquery为动态添加生成的元素添加绑定事件 delegate 自己常用的正则(regexp)整理 57秒读完《10 分钟学会 JavaScript 的 Async/Await》 最简单的数组去重 js中数字调用方法 jq或者原生js动态加载js文件方法 sublime设置小程序自动补齐代码(附带下载文件) 微信小程序笔记(wxml)篇 微信小程序笔记(wxs)篇 小程序页面带参数传递 小程序简便版弹出层(modal) 个人常用封装的js插件 select默认选中某个option 微信小程序遍历对象数据 正则表达式提取cookie 原生ajax写法 js倒计时方法 js 时间戳相关操作方法 小程序最简单的弹出层 以及解决滚动穿透问题 html关于页面跳转url带参数 indexOf,charAt,subString的简要区别 JS页面返回带参数或者保持原有位置 js中的钩子机制(hook) vue中的addClass removeClass 小程序下拉刷新 上拉加载 微信小程序动态修改页面标题 小程序的post请求 request转译字符 小程序滑动tab置顶 以及监听scroll事件 小程序评论仿照今日头条 腾讯新闻小程序以及处理软键盘问题 小程序滑动删除的坑!!@!!!!!!!@!@ 获取小程序源码方法 &#x(unicode编码后的汉字)JS转译方法-nodejs爬虫转译乱码 es6/7 js数组深拷贝和数组合并方法 小程序底部滑出层DEMO 【html5】原生JS控制video的播放和暂停切换 前端 fetch 前端 PWA? js处理手机号|身份证中间替换成 * 号 sublime设置微信小程序wxml 默认为html js时间戳转换为本地时间 timestamp>localtime 小程序setData修改data里面的数组 微信小程序picker传参 es6中 数组位置对换 js 数组对象循环各种方法以及性能对比 微信小程序客服消息相关(客服按钮修改) js实用黑科技之生产随机数 微信小程序遮罩层 禁止滚动效果 js加密之AES es6遍历对象方法 小程序点击按钮切换到评论位置 类似今日头条 腾讯新闻 js删除字符串的的方法 JS中的Array长度最大可以设置为多少? html img加载失败的话替换成默认图片 小程序 web-view h5页面跳回小程序的一个小坑 图片压缩插件 lrz.bundle.js js手机号中间四位变成*号 javascript 到底要不要加分号 酷炫烟雾效果的前端js插件 waterpipe.js 微信小程序文字上下滚动 -滚动消息通知的实例代码 js稀奇古怪问题之指向 小程序文字滚动 跑马灯效果 现代浏览器和触摸设备上重新排序拖放列表 - Sortable.min.js 一个监听键盘的js库 - hotkeys.js 小程序文字左右滚动demo 在微信小程序wxml中设置保留小数位数 canvas操作图片合成 或文字叠加 并导出base64 字符转换-unicode <=> ASCII js删除某一个指定元素 微信小程序插件wxParse 禁止 百度ueditor过滤script link js正则效验金额最多两位小数 原生js获取元素offsetTop值不准确? 浏览器控制台跳过debugger 打乱数组顺序的两种方法 js 中的 bind介绍 原生js移除元素 document.removeElementById ?? js string进制互转 input 点击选择全部文本 点击全选 js点击复制input的值 JS/JQ获取各种屏幕的高度和宽度 闭包之[[Scopes]]属性 JS操纵html5 audio 播放以及暂停 原生js 给dom添加 onmouseenter ontouchstart 事件 Js charCodeAt fromCharCode parseInt js位操作教程 js byte[] 和string 相互转换 UTF-8 data URI 转 image data 原生JS实现 addClass removeClass hasClass JS实现为动态添加的元素增加事件 js查找页面中alert弹窗位置 JS实现Jquery的addClass,removeClass,changeClass,toggleClass HTML5 Blob与ArrayBuffer、TypeArray和字符串String之间转换 JavaScript如何转换二进制数据显示成图片 Uint8Array转成可用的imgurl es6数组快速删除指定元素 支付宝小程序与微信小程序的不同点对比 JS数组按数字的大小排序 js对象数组按照对象属性排序
回到顶部