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

coldplay.xixi
Libérer: 2021-04-14 10:25:45
avant
3454 Les gens l'ont consulté

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"    //导航栏背景色
  },
Copier après la connexion

Mini programme WeChat

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

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": "我的"
      }
    ]
  }
Copier après la connexion

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": "我的"
      }
    ]
  }
Copier après la connexion

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>
Copier après la connexion

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>
Copier après la connexion

2. Rendu de liste

Page({
  data: {
    list: [{
      Title: &#39;支付宝&#39;,
    }, {
      Title: &#39;微信&#39;,
    }]
  }
})
Copier après la connexion

Applet Alipay

<block a:for="{{list}}">
  <view key="item-{{index}}" index="{{index}}">{{item.Title}}</view>
</block>
Copier après la connexion

Applet WeChat

<block wx:for="{{list}}">
  <view wx:key="this" wx:for-item="item">{{item.Title}}</view>
</block>
Copier après la connexion

3. Rendu conditionnel

Applet Alipay

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>
Copier après la connexion

Mini programme WeChat

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
Copier après la connexion

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: &#39;success&#39;,//默认 none,支持 success / fail / exception / none’。
  content: &#39;操作成功&#39;,//文字内容
  duration: 3000,//显示时长,单位为 ms,默认 2000
  success: () => {
    my.alert({
      title: &#39;toast 消失了&#39;,
    });
  },
});
Copier après la connexion
rrree

Programme WeChat Mini

my.hideToast()//隐藏弱提示。
Copier après la connexion
wx.showToast({
  title: &#39;成功&#39;,//提示的内容
  icon: &#39;success&#39;,//success	显示成功图标;loading	显示加载图标;none不显示图标
  duration: 2000
})

//icon为“success”“loading”时 title 文本最多显示 7 个汉字长度
Copier après la connexion

2. Boîte d'invite de message

Programme Alipay Mini

wx.hideToast() //隐藏
Copier après la connexion
my.showLoading({
  content: &#39;加载中...&#39;,
  delay: 1000,
});
Copier après la connexion

Applet WeChat

my.hideLoading();
Copier après la connexion
wx.showLoading({
  title: &#39;加载中&#39;,
})
Copier après la connexion

3.requête http

Applet Alipay

wx.hideLoading()
Copier après la connexion

Programme WeChat Mini

my.httpRequest({
  url: &#39;http://httpbin.org/post&#39;,
  method: &#39;POST&#39;,
  data: {
    from: &#39;支付宝&#39;,
    production: &#39;AlipayJSAPI&#39;,
  },
  headers:"",//默认 {&#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;}
  dataType: &#39;json&#39;,
  success: function(res) {
    my.alert({content: &#39;success&#39;});
  },
  fail: function(res) {
    my.alert({content: &#39;fail&#39;});
  },
  complete: function(res) {
    my.hideLoading();
    my.alert({content: &#39;complete&#39;});
  }
});
Copier après la connexion

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: &#39;test.php&#39;, //仅为示例,并非真实的接口地址
  data: {
    x: &#39;&#39;,
    y: &#39;&#39;
  },
  header: {
    &#39;content-type&#39;: &#39;application/json&#39; // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})
Copier après la connexion

Applet WeChat

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

my.datePicker({
  format: &#39;yyyy-MM-dd&#39;,//返回的日期格式,
  currentDate: &#39;2012-12-12&#39;,//初始选择的日期时间,默认当前时间
  startDate: &#39;2012-12-10&#39;,//最小日期时间
  endDate: &#39;2012-12-15&#39;,//最大日期时间
  success: (res) => {
    my.alert({
	  content: res.date,
	});
  },
});
Copier après la connexion
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
Copier après la connexion

Programme WeChat Mini

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

Page({
  data: {
    date: &#39;2016-09-01&#39;,
  },

  bindDateChange: function(e) {
    console.log(&#39;picker发送选择改变,携带值为&#39;, e.detail.value)
    this.setData({
      date: e.detail.value
    })
  },
})
Copier après la connexion
rrree

(3) Le mini programme évoque le paiement

Le mini programme Alipay

var citysJSON = require(&#39;../../utils/city.js&#39;);
Page({
  data: {
    provinces: &#39;陕西省&#39;,
    city: &#39;西安市&#39;,
    area: &#39;碑林区&#39;
  },
  chooseAddress: function () {
    my.multiLevelSelect({
      title: &#39;选择省市区&#39;,//级联选择标题
      list: citysJSON.citys,
      success: (res) => {
        this.setData({
          provinces: res.result[0].name,
          city: res.result[1].name,
          area: res.result[2].name,
        })
      }
    });
  },
})
Copier après la connexion

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

(4) Téléphone

支付宝小程序

my.makePhoneCall({
	number: &#39;400-8097-114&#39;
})
Copier après la connexion

微信小程序

wx.makePhoneCall({
  phoneNumber: &#39;400-8097-114&#39;
})
Copier après la connexion

(5)获取登录凭证(code)

支付宝小程序

my.getAuthCode({
  success (res) {
    if (res.authCode) {
      console.log(res.authCode)
    } 
  }
})
Copier après la connexion

微信小程序

wx.login({
  success (res) {
    if (res.code) {
      console.log(res.code)
    } 
  }
})
Copier après la connexion

支付宝小程序与微信小程序有很多相似之处,不论是组件还是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!

Étiquettes associées:
source:csdn.net
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!