Werfen wir einen Blick auf die Unterschiede zwischen der Entwicklung des Alipay-Miniprogramms und der Entwicklung des WeChat-Miniprogramms

Eine kurze Diskussion über den Unterschied zwischen der Entwicklung von Alipay-Miniprogrammen und WeChat-Miniprogrammen

1. app.json

(1) Legen Sie die Statusleiste, die Navigationsleiste und den Titel fest usw., die bei Miniprogrammen üblich sind

(2) TabBar festlegen Alipay Mini-Programm

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

WeChat Mini-Programm

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

2. Seiten

(1) Dateibenennung ist anders

Alipay Mini-Programm

WeChat Mini-Programm

Ich habe Seiten im WeChat Mini-Programm bzw. im Alipay Mini-Programm erstellt. Der Unterschied ist:

1 „axml“ und das Suffix der Stildatei sind „acss“; (2) Layer-Seite axml und wxml anzeigen

1. Bubbling-Ereignisse und nicht-bubbling-Ereignisse

Alipay-Applet

onTap, CatchTap

on-Ereignisbindung verhindert nicht, dass bubbling-Ereignisse steigen. Die Bindung von Fangereignissen kann verhindern, dass sprudelnde Ereignisse nach oben sprudeln.

"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-Applet

bindtap, catchtouchstart

bind Ereignisbindung verhindert nicht, dass sprudelnde Ereignisse nach oben steigen. Blase, Die Ereignisbindung catch kann verhindern, dass sprudelnde Ereignisse nach oben sprudeln. 2. Listenrendering Applet

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

WeChat-Programm

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

3.

Unterschiedliche Verwendung von Komponenten in zwei kleinen Programmen, die häufig im Entwicklungsprozess verwendet werden (1) Interaktion

1. Nachrichtenaufforderungsfeldbindtap、catchtouchstart

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

Alipay-Applet

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

rrree WeChat-Applet

Alipay Mini-Programm

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

WeChat Mini-Programm

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

Tatsächlich sind die vom WeChat Mini-Programm und vom Alipay Mini-Programm bereitgestellten API-Methoden ungefähr gleich, mit der Ausnahme, dass das WeChat Mini-Programm mit „wx.“ beginnt und das Alipay Mini-Programm gestartet wird mit „mein.“, der Rest kann nur eine unterschiedliche Benennung der Felder „Text, Inhalt, Name, Titel“ in der API-Methode sein. (2) Selektor Das WeChat-Applet wird durch die Auswahlkomponente implementiert

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

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

2. Provinz- und Stadtauswahl

Alipay-Applet

Das Alipay-Applet stellt eine API bereit, my.multiLevelSelect(Object)

Die Kaskadenauswahlfunktion wird hauptsächlich für Multi- Ebenenbezogene Datenauswahl, z. B. Auswahl von Provinz- und Stadtinformationen.

1.1. Führen Sie eine JSON-Formatdatei einer Provinz oder Stadt ein http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2. Führen Sie diese Datei in js ein1.3. Verwenden Sie my.multiLevelSelect(Object )

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

WeChat-Applet

Das WeChat-Applet wird weiterhin über die Auswahlkomponente implementiert

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

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

(3) Das Applet ruft die Zahlung

Alipay. applet

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

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

auf WeChat-Applet-Buchstabe kleines Programm

wx.hideToast() //隐藏

(4) Telefon

支付宝小程序

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都会给你熟悉的感觉！

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

Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf die Unterschiede zwischen der Entwicklung des Alipay-Miniprogramms und der Entwicklung des WeChat-Miniprogramms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!