微信小程序与支付宝小程序差异之组件与api

微信小程序与支付宝小程序大部分人都基本相同，只是在部分的时间名称，少部分api返回的数据结构上存在差异，在这里我总结了部分比较常见的差异。继续往下看！

组件差异——image

在微信小程序中，image组件中，可以嵌套组件，用绝对定位可以展示出来，也可以放cover-view。

在支付宝小程序中，image中不管嵌套什么组件都显示不出来。期望官方后面会支持。

 

组件差异——cover-view，cover-image

微信小程序中，cover-view被强制overflow：hidden;，设置也无效。

支付宝小程序中，除了上面的，另外cover-view和cover-image暂时不支持嵌套。这点开发体验贼差，贼差贼差。

 

组件差异——事件名

绑定事件微信小程序中用bind，支付宝小程序用on

所有bind事件，都改成on事件，例如：bindtap => onTap， bindchange => onChange， bindinput => onInput， bindfocus => onFocus， bindscroll => onScroll， 等等。

 

api差异——缓存

支付宝小程序的缓存相关接口：

my.setStorage({
  key: 'keyName',
  data: {},
  success: ()=>{}
})
my.setStorageSync({
  key: 'keyName',
  data: {}
})

my.getStorage({
  key: 'keyName',
  success: ()=>{}
})
//返回数据格式
// {key: '', data: ''}

my.getStorageSync({
  key: 'keyName'
})
//返回数据格式
// {key: '', data: ''}

my.removeStorage({
  key: 'keyName',
  success: ()=>{}
})
my.removeStorageSync({
  key: 'keyName'
})

微信小程序缓存相关接口，就简洁很多，用着比较畅快。如下：

wx.setStorage({
  key: 'keyName',
  data: 'value',
  success: ()=>{}
})
wx.setStorageSync('keyName','value')

wx.getStorage({
  key: 'keyName',
  success: ()=>{}
})
//直接返回data

wx.getStorageSync('keyName')
//直接返回data

wx.removeStorage({
  key: 'keyName',
  success: ()=>{}
})
wx.removeStorageSync('keyName')

差异主要体现在同步缓存相关接口，微信的接口用起来就相对畅快许多是吧！

 

框架关键词差异

微信小程序在.wxml中用wx:，例如：wx:for, wx:if等。在.js中接口调用使用wx.，例如：wx.getLocation

微信小程序在.axml中用a:，例如：a:for, a:if等。在.js中接口调用使用my.，例如：my.getLocation

微信小程序对应支付宝小程序： wx: => a:， wx. => my.

 

app.js中参数名差异

app.js中的window，tabBar中的参数名不同，如下图：

 

ps：在微信小程序中，js的data中能直接获取到getApp()的值，但是在支付宝小程序不支持，获取不到此值。例如：

var app = getApp()
Page({
    data:{
        name ：app.globalData.name // 在微信小程序中可以获取到app的值，在支付宝小程序中不能
    }
})