Jetons un coup d'œil aux différences entre le développement du mini-programme Alipay et le développement du mini-programme WeChat.

Une brève discussion sur la différence entre le mini programme Alipay et le développement du mini programme WeChat

1. app.json

(1) Définissez la barre d'état, la barre de navigation, le titre et la couleur d'arrière-plan de la fenêtre communs au mini-programme

Mini programme Alipay

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

Mini programme WeChat

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

Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes

(2) Paramétrage de la barre d'onglets

Mini programme Alipay

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

Programme WeChat Mini

"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. ) Les noms de fichiers sont différents

Alipay Mini Program

WeChat Mini Program

J'ai créé des pages dans le mini programme WeChat et le mini programme Alipay respectivement. La différence est :

. 1. Dans le mini-programme Alipay, le suffixe du fichier de page de couche de vue est "axml" et le suffixe du fichier de style est "acss"

2. L'applet WeChat est « wxml » et le suffixe du fichier de style est « wxss ».

(2) Afficher la page des calques axml et wxml

1. Événements bouillonnants et événements non bouillonnants

Applet Alipay

onTap, catchTap

sur la liaison d'événement n'empêchera pas les événements bouillonnants de bouillonner, et la liaison d'événement catch peut empêcher les événements bouillonnants de bouillonner.

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

Applet WeChat

bindtap, la liaison d'événement catchtouchstart

bind ne bloquera pas les événements Bubbling bubble up. catchLa liaison d'événements peut empêcher les événements bouillonnants de se produire.

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

2. Rendu de liste

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

Applet Alipay

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

Applet WeChat

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

3. Rendu conditionnel

Applet Alipay

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

Mini programme WeChat

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

3. Utilisation différente des composants dans deux mini-programmes couramment utilisés dans le processus de développement

(1) Interaction

1. Boîte d'invite de message

Applet Alipay

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

rrree

Programme WeChat Mini

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

wx.showToast({
  title: '成功',//提示的内容
  icon: 'success',//success	显示成功图标;loading	显示加载图标;none不显示图标
  duration: 2000
})

//icon为“success”“loading”时 title 文本最多显示 7 个汉字长度

2. Boîte d'invite de message

Programme Alipay Mini

wx.hideToast() //隐藏

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

Applet WeChat

my.hideLoading();

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

3.requête http

Applet Alipay

wx.hideLoading()

Programme WeChat Mini

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

En fait, les méthodes API fournies par le mini programme WeChat et le mini programme Alipay sont à peu près les mêmes. pareil, sauf que l'applet WeChat commence par "wx" et l'applet Alipay commence par "my". Le reste peut simplement être dû au fait que les champs "texte, contenu, nom, titre" dans la méthode API sont nommés différemment.

(2) Sélecteur

1. Sélecteur d'heure

Applet Alipay

L'applet Alipay fournit une API, my.datePicker(object)

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

Applet WeChat

Applet WeChat Elle est implémentée via le sélecteur composant

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

rrree

2. Sélecteur de province et de ville

Applet Alipay

Applet Alipay Le programme fournit une API, mon. multiLevelSelect(Object)

. La fonction de sélection en cascade est principalement utilisée pour la sélection de données associées à plusieurs niveaux, telles que la sélection d'informations dans les provinces et les villes.

1.1. Introduire un fichier au format json d'une province ou d'une ville http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2 Introduire ce fichier en js<🎜. >

1.3. Utiliser my.multiLevelSelect(Object)

<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

Programme WeChat Mini

Le programme WeChat Mini utilise toujours le composant de sélection Implémenté

Page({
  data: {
    date: '2016-09-01',
  },

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

rrree

(3) Le mini programme évoque le paiement

Le mini programme Alipay

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

WeChat Mini Programme

<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   可为每一列的顶部添加一个自定义的项,可为空

(4) Télé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都会给你熟悉的感觉！

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!