微信支付宝小程序对比

Posted on | In

微信和小程序大同小异, 这里通过对比两者的不同点帮助知识迁移.

基础

名称 微信 支付宝
命名空间 wx my
文件类型 js, wxml, wxss, json js, axml, acss, json
绑定事件从bind改为on开头，并且采用驼峰形式 bindchange=”xx” onChange=”xx
if 和 for语句写法不同 wx:if wx:for a:if a:for

框架

配置

window对象设置

微信

1
2
3
4
5
6
{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "微信接口功能演示",
    "enablePullDownRefresh":true,
    "disableScroll":true
  }

支付宝

1
2
3
4
5
6
{
	"titleBarColor: "#ffffff",
	"defaultTitle": "页面标题",
	"pullRefresh": true,
	"allowsBounceVertical": "YES"
}

tabBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
"tabBar": {
        "color": "#999",
        "selectedColor": "#333",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "icons/1.png"
                "selectedIconPath": "icons/1_c.png",
            }
        ]
    }
}

支付宝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "tabBar": {
    "textColor": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
        "icon":"icons/1.png",
        "activeIcon":"icons/1_c.png"
      }
    ]
  }
}

逻辑层

JS模块化, 支付宝支持 ES6 语法

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

微信

1
2
3
const foo = require('foo');
...
module.exports.bar = bar;

支付宝

1
2
3
import foo from 'foo'
...
export default bar;

视图层

if for

支付宝条件循环和列表循环和微信不同的地方是修改了命名空间, 如 wx:if->a:if

数据绑定

支付宝支持对象扩展符...

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

自定义脚本

微信中使用wxs, 支付宝中使用sjs

自定义组件

支付宝

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// /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 改变内部属性
    }, 
  },
})

1
2
3
4
5
6
7
8
<!-- // /components/customer/index.axml -->
<view>
  <view>x: {{x}}</view>
  <button onTap="handleTap">plusOne</button>
  <slot>
    <view>default slot & default value</view>
  </slot>
</view>

使用

1
2
3
4
5
6
// /pages/index/index.json
{
  "usingComponents": {
    "customer": "/components/customer/index"
  }
}
1
2
3
4
<!-- /pages/index/index.axml -->
<view>
  <customer />
</view>

组件

支付宝多了很多微信没有的扩展组件, 非常有参考价值

mini-antui

api

常用api对比

说明 微信 支付宝
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()
#1.1.3 当前画布的内容导出生成图片 wx.canvasToTempFilePath() my.toTempFilePath()
wx.scanCode() my.scan()
wx.closeBLEConnection() my.disconnectBLEDevice()

参考链接

微信小程序官方文档

支付宝小程序官方文档

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