微信小程序跟支付宝小程序差异

1,866 阅读3分钟

文件名后缀区别

  • 支付宝:axml、acss
  • 微信:wxml、wxss

指令区别

  • 支付宝:a:if a:elif a:else a:for等

  • 微信:wx:if wx:elif wx:else wx:for等

    注:大体的指令只有前缀有不同、循环的时候变量要用{{}}包起来、使用wx:for循环的时候要使用wx:key添加key 不然会报警告

绑定事件的不同

  • 支付宝:onTap等
  • 微信:bindtap等

配置文件不同

设置页面标题

  • 支付宝:defaultTitle:xxx
  • 微信:navigationBarTitleText:xxx

api不同

本地存储

  • 支付宝:
my.setStorageSync({key:xxx,data:{}})
my.getStorageSync({key:’xxx’}).data
my.removeStorageSync({key:’xxx’})
  • 微信
wx.setStorageSync(‘xxx’,{})
wx.getStorageSync(’xxx’)
wx.removeStorageSync(’xxx’)

注:微信本地存储的时候要字符化 JSON.stringify(),获取的时候要JSON.parse()

授权

  • 支付宝:my.getAuthCode
  • 微信:wx.authorize

请求

  • 支付宝:my.httpRequest
  • 微信:wx.request

界面交互

  • 支付宝:有my.alert、my.confirm、my.prompt等
  • 微信:把上面支付宝的API整合到了一个API wx.showModal 可以进行配置是否显示取消按钮(showCancel: false)等等
  • showToast/showLoading参数名不同 支付宝:content 微信:title

动态设置当前页面的标题

  • 支付宝:my.setNavigationBar
  • 微信:wx.setNavigationBarTitle

拨打电话

  • 支付宝:my.makePhoneCall({number:'xxx'})
  • 微信:wx.makePhoneCall({phoneNumber:'xxx'})

css样式的不同

背景图片的使用

  • 支付宝:可以正常使用本地图片路径
  • 微信:使用网络图片或者base64 或者使用image标签

如何取消navigator的点击态?

  • 支付宝:默认点击态就是none 不需要做处理
  • 微信:在navigator组件添加hover-class='none'

如何去掉小程序button组件的边框?

button::after{
    border: none;
}

page中js的不同

点击事件传参数 如何获取参数?

页面组件差异

  • 微信不支持在页面双向绑定的时候使用toFixed(2)函数 只能在js中进行处理 处理完页面判断也要处理 wx:if=“xxxx!='0.00'” 支付宝支持
  • 微信不支持text里面套用text的布局 要使用view套text
  • 微信text中间的文字不能有空格 不然布局会有留白
  • 两个text标签之前会有间隔 把text标签display:block
  • 微信picker下拉选择跟支付宝不同 微信:picker / 支付宝:picker-view
  • 微信小程序flex布局下的button按钮不能居中 在button外部包一层view标签
  • 微信小程序text下面不能包含navigator标签
  • 生成二维码插件的不同:微信 weapp.qrcode.min(设置了大小之后全部充满) / qrcode(设置了大小之后中间有留白)
  • 微信生成二维码插件在开发者第二次点击展开弹窗的时候显示不出二维码 但是在真机可以
  • 微信小程序page跟最外层元素设置100%就可以充满 支付宝小程序不行

自定义组件的差异

prop定义不一样

  • 支付宝:props:{}
  • 微信:properties:{}

获取prop值的方式不同

生命周期也不同

  • 注:微信小程序app.wxss的样式在自定义组件不生效 在自定义组件的js文件中添加
// 开启全局样式使用
options: {
  addGlobalClass: true
} 

兼容性

  • Image组件为什么样式一样显示情况却不一样???

    支付宝小程序使用背景图片的样式引入image的 微信小程序就跟原生使用img一样

  • 支付宝小程序跟微信小程序样式一样为什么展示有区别???

    微信小程序跟支付宝默认的字体大小不一样 微信的有18.79px 支付宝的14px

    图片image间距不一样 微信的间距大

  • absolute定位位置不同?

    微信小程序跟支付宝小程序一样的手机page大小不同 微信小程序page大小减去了电池的工具栏 具体真机样式按照微信来