广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

浅谈支付宝小程序与微信小程序开发的区别

一、app.json

（1）设置小程序通用的的状态栏、导航条、标题、窗口背景色

支付宝小程序

  "window": {    "defaultTitle": "病案到家",   //页面标题    "titleBarColor": "#1688FB"    //导航栏背景色  },

微信小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },

相关学习推荐：小程序开发教程

（2）设置tabBar

支付宝小程序

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }

微信小程序

"tabBar": {    "color": "#333333",    "selectedColor": "#1688FB",    "backgroundColor": "#ffffff",    "borderStyle": "#e5e5e5",    "list": [      {        "iconPath": "/images/indexGrey.png",        "selectedIconPath": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "text": "首页"      },      {        "iconPath": "/images/personGrey.png",        "selectedIconPath": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "text": "我的"      }    ]  }

二、pages

（1）文件命名不同

支付宝小程序

微信小程序

我分别在微信小程序和支付宝小程序建立了页面，区别在于：

1.支付宝小程序里面的视图层页面文件后缀是“axml”，样式文件后缀是“acss”；

2.微信小程序里面的视图层页面文件后缀是“wxml”，样式文件后缀是“wxss”。

（2）视图层页面axml以及wxml

1.冒泡事件和非冒泡事件

支付宝小程序

onTap, catchTap

on 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡。

<button class="weui-btn" onTap="login" type="primary">登录</button>

微信小程序

bindtap、catchtouchstart

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<button class="weui-btn" bindtap='login' type="primary">登录</button>

2.列表渲染

Page({  data: {    list: [{      Title: '支付宝',    }, {      Title: '微信',    }]  }})

支付宝小程序

<block a:for="{{list}}">  <view key="item-{{index}}" index="{{index}}">{{item.Title}}</view></block>

微信小程序

<block wx:for="{{list}}">  <view wx:key="this" wx:for-item="item">{{item.Title}}</view></block>

3.条件渲染

支付宝小程序

<view a:if="{{length > 5}}"> 1 </view><view a:elif="{{length > 2}}"> 2 </view><view a:else> 3 </view>

微信小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },0

三、开发过程中常用到的两个小程序中组件的不同用法

（1）交互

1.消息提示框

支付宝小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },1

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },2

微信小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },3

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },4

2.消息提示框

支付宝小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },5

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },6

微信小程序

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },7

  "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },8

3.http 请求

支付宝小程序

my.httpRequest({  url: 'http://httpbin.org/post',  method: 'POST',  data: {    from: '支付宝',    production: 'AlipayJSAPI',  },  headers:"",//默认 {'Content-Type': 'application/x-www-form-urlencoded'}  dataType: 'json',  success: function(res) {    my.alert({content: 'success'});  },  fail: function(res) {    my.alert({content: 'fail'});  },  complete: function(res) {      "window": {    "backgroundTextStyle": "light",//窗口的背景色    "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色    "navigationBarTitleText": "病案到家",//导航栏标题文字内容    "navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white  },6    my.alert({content: 'complete'});  }});

微信小程序

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }0

其实微信小程序和支付宝小程序提供的api方法大致相同，只是微信小程序是以“wx.”起头，支付宝小程序是以“my.”起头，其余可能只是api方法里面字段“text、content、name、title”等命名不同。

（2）选择器

1.时间选择器

支付宝小程序

支付宝小程序提供了一个api，my.datePicker(object)

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }1

微信小程序

微信小程序是通过picker组件来实现的

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }2

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }3

2.省市区选择器

支付宝小程序

支付宝小程序提供了一个api，my.multiLevelSelect(Object)

级联选择功能主要使用在于多级关联数据选择，比如说省市区的信息选择。

1.1、引入一个省市区的json格式文件http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2、在js中引入这个文件

1.3、使用my.multiLevelSelect(Object)

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }4

微信小程序

微信小程序依然是通过picker组件来实现的

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }5

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }6

（3）小程序唤起支付

支付宝小程序

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }7

微信小程序

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }8

（4）电话

支付宝小程序

"tabBar": {    "textColor": "#333333",//默认颜色    "selectedColor": "#1688FB",//选中颜色    "backgroundColor": "#ffffff",//背景色    "items": [      {        "icon": "/images/indexGrey.png",        "activeIcon": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "name": "首页"      },      {        "icon": "/images/personGrey.png",        "activeIcon": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "name": "我的"      }    ]  }9

微信小程序

"tabBar": {    "color": "#333333",    "selectedColor": "#1688FB",    "backgroundColor": "#ffffff",    "borderStyle": "#e5e5e5",    "list": [      {        "iconPath": "/images/indexGrey.png",        "selectedIconPath": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "text": "首页"      },      {        "iconPath": "/images/personGrey.png",        "selectedIconPath": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "text": "我的"      }    ]  }0

（5）获取登录凭证（code）

支付宝小程序

"tabBar": {    "color": "#333333",    "selectedColor": "#1688FB",    "backgroundColor": "#ffffff",    "borderStyle": "#e5e5e5",    "list": [      {        "iconPath": "/images/indexGrey.png",        "selectedIconPath": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "text": "首页"      },      {        "iconPath": "/images/personGrey.png",        "selectedIconPath": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "text": "我的"      }    ]  }1

微信小程序

"tabBar": {    "color": "#333333",    "selectedColor": "#1688FB",    "backgroundColor": "#ffffff",    "borderStyle": "#e5e5e5",    "list": [      {        "iconPath": "/images/indexGrey.png",        "selectedIconPath": "/images/indexWhite.png",        "pagePath": "pages/homeIndex/homeIndex",        "text": "首页"      },      {        "iconPath": "/images/personGrey.png",        "selectedIconPath": "/images/personWhite.png",        "pagePath": "pages/orderList/orderList",        "text": "我的"      }    ]  }2

支付宝小程序与微信小程序有很多相似之处，不论是组件还是api都会给你熟悉的感觉！

相关免费学习推荐：微信小程序开发

以上就是一起看看支付宝小程序与微信小程序开发的区别的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~