Let’s take a look at the differences between Alipay mini program and WeChat mini program development

A brief discussion on the difference between the development of Alipay mini programs and WeChat mini programs

1. app.json

(1) Set the status bar, navigation bar, title, and window background color common to the mini program

Alipay mini program

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

WeChat Mini Program

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

Related learning recommendations:小programDevelopmentTutorial

(2) Set tabBar

Alipay Mini Program

"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": "我的" } ] }

WeChat Mini Program

"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. Pages

(1) File naming is different

Alipay Mini Program

##WeChat Mini Program

I created pages in the WeChat mini program and the Alipay mini program respectively. The difference is:

1. In the Alipay mini program The suffix of the view layer page file is "axml", and the suffix of the style file is "acss";

2. The suffix of the view layer page file in the WeChat applet is "wxml", and the suffix of the style file is "wxss".

(2) View layer page axml and wxml

1. Bubble events and non-bubble events

Alipay applet

onTap, catchTap

On event binding will not prevent bubbling events from bubbling upwards, while catch event binding can prevent bubbling events from bubbling upwards.

登录

WeChat Mini Program

bindtap、catchtouchstart

bindEvent binding will not prevent bubbling events from bubbling upwards.catchEvent binding can prevent bubbling events from bubbling upwards.

登录

2. List rendering

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

Alipay applet

 {{item.Title}} 

WeChat applet

 {{item.Title}} 

3. Conditional rendering

Alipay applet

 1   2   3 

WeChat Mini Program

 1   2   3 

3.Different usage of components in the two mini programs commonly used in the development process

(1) Interaction

1. Message prompt box

Alipay applet

my.showToast({ type: 'success',//默认 none，支持 success / fail / exception / none’。 content: '操作成功',//文字内容 duration: 3000,//显示时长，单位为 ms，默认 2000 success: () => { my.alert({ title: 'toast 消失了', }); }, });

my.hideToast()//隐藏弱提示。

WeChat Mini Program

wx.showToast({ title: '成功',//提示的内容 icon: 'success',//success 显示成功图标;loading 显示加载图标;none不显示图标 duration: 2000 }) //icon为“success”“loading”时 title 文本最多显示 7 个汉字长度

rrree

2. Message prompt box

Alipay Mini Program

wx.hideToast() //隐藏

my.showLoading({ content: '加载中...', delay: 1000, });

WeChat Mini Program

my.hideLoading();

wx.showLoading({ title: '加载中', })

3.http request

Alipay Mini Program

wx.hideLoading()

WeChat Mini Program

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) { my.hideLoading(); my.alert({content: 'complete'}); } });

In fact, the API methods provided by WeChat Mini Program and Alipay Mini Program are roughly the same The same, except that the WeChat applet starts with "wx." and the Alipay applet starts with "my.". The rest may be just that the fields "text, content, name, title" in the API method are named differently.

(2) Selector

1. Time selector

Alipay applet

The Alipay applet provides an API, my.datePicker(object)

wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })

WeChat applet

WeChat applet It is implemented through the picker component

my.datePicker({ format: 'yyyy-MM-dd',//返回的日期格式， currentDate: '2012-12-12',//初始选择的日期时间，默认当前时间 startDate: '2012-12-10',//最小日期时间 endDate: '2012-12-15',//最大日期时间 success: (res) => { my.alert({ content: res.date, }); }, });

 日期选择器   当前选择: {{date}}   
      
2. Province and city selector
      

      
Alipay applet
Alipay applet The program provides an API, my.multiLevelSelect(Object)
      
The cascade selection function is mainly used for multi-level associated data selection, such as province and city information selection.
      
1.1. Introduce a json format file of a province or city http://blog.shzhaoqi.com/uploads/js/city_json.zip
      
1.2. Introduce this file in js
      
1.3. Use my.multiLevelSelect(Object)
      

      
Page({ data: { date: '2016-09-01', }, bindDateChange: function(e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, })
      

      
WeChat Mini Program
WeChat Mini Program still uses the picker component Implemented
      

      
var citysJSON = require('../../utils/city.js'); Page({ data: { provinces: '陕西省', city: '西安市', area: '碑林区' }, chooseAddress: function () { my.multiLevelSelect({ title: '选择省市区',//级联选择标题 list: citysJSON.citys, success: (res) => { this.setData({ provinces: res.result[0].name, city: res.result[1].name, area: res.result[2].name, }) } }); }, })
      
 省市区选择器   当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}    //custom-item 可为每一列的顶部添加一个自定义的项,可为空
      
(3) Mini program evokes payment
      

      
Alipay mini program
      
Page({ data: { region: ['广东省', '广州市', '海珠区'], customItem: '全部' }, bindRegionChange: function (e) { console.log('picker发送选择改变，携带值为', e.detail.value) this.setData({ region: e.detail.value }) } })
      

      
WeChat Mini Program
      
my.tradePay({ tradeNO: '201711152100110410533667792', // 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号trade_no success: (res) => { my.alert({ content: JSON.stringify(res), }); }, fail: (res) => { my.alert({ content: JSON.stringify(res), }); } });
      
(4) Phone
      

      
支付宝小程序
      
my.makePhoneCall({ number: '400-8097-114' })
      
微信小程序
      
wx.makePhoneCall({ phoneNumber: '400-8097-114' })
      
（5）获取登录凭证（code）
      
支付宝小程序
      
my.getAuthCode({ success (res) { if (res.authCode) { console.log(res.authCode) } } })
      
微信小程序
      
wx.login({ success (res) { if (res.code) { console.log(res.code) } } })
      
支付宝小程序与微信小程序有很多相似之处，不论是组件还是api都会给你熟悉的感觉！
      

       
相关免费学习推荐：微信小程序开发
      
      
The above is the detailed content of Let’s take a look at the differences between Alipay mini program and WeChat mini program development. For more information, please follow other related articles on the PHP Chinese website!