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.

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

WeChat Mini Program

bindtap、catchtouchstart

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

<button class="weui-btn" bindtap=&#39;login&#39; type="primary">登录</button>

2. List rendering

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

Alipay applet

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

WeChat applet

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

3. Conditional rendering

Alipay applet

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

WeChat Mini Program

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

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,
	});
  },
});

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view

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,
        })
      }
    });
  },
})

<view class="section">
  <view class="section__title">省市区选择器</view>
  <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}">
    <view class="picker">
      当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}
    </view>
  </picker>
</view>

//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!