Alipay ミニ プログラムと WeChat ミニ プログラム開発の違いを見てみましょう

Alipay ミニ プログラムの開発と WeChat ミニ プログラムの開発の違いに関する簡単な説明

1.app.json

#(1) ミニプログラム共通のステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色を設定します

#Alipay ミニ プログラム

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

WeChat ミニ プログラム

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

関連学習の推奨事項:

小プログラム開発チュートリアル(2) tabBar の設定

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

WeChat ミニ プログラム

"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. ページ数 (1 ) ファイル名が異なります

Alipay ミニ プログラム

##WeChat ミニ プログラム

WeChat ミニ プログラムと Alipay ミニ プログラムでそれぞれページを作成しました。違いは次のとおりです。

#1. Alipay ミニ プログラムの場合、ビュー レイヤー ページ ファイルの拡張子は「axml」、スタイル ファイルの拡張子は「acss」です; 2. ビュー レイヤー ページ ファイルの拡張子は、 WeChat アプレットは「wxml」、スタイル ファイルのサフィックスは「wxss」です。

(2) レイヤー ページの axml および wxml

1. バブル イベントと非バブル イベント

Alipay アプレット

onTap、catchTapOn イベント バインディングでは、バブリング イベントが上向きにバブリングするのを防ぐことはできませんが、Catch イベント バインディングでは、バブリング イベントが上向きにバブリングするのを防ぐことができます。

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

WeChat ミニ プログラム

bindtap、

catchtouchstart

bindイベント バインディングでは、バブリング イベントが上方へバブリングすることは防止されません。

catch

イベント バインディングは、バブリング イベントが上方へバブリングすることを防ぐことができます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;button class=&quot;weui-btn&quot; bindtap=&amp;#39;login&amp;#39; type=&quot;primary&quot;&gt;登录&lt;/button&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>2. リストのレンダリング<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Page({ data: { list: [{ Title: &amp;#39;支付宝&amp;#39;, }, { Title: &amp;#39;微信&amp;#39;, }] } })</pre><div class="contentsignin">ログイン後にコピー</div></div>

Alipay アプレット

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

WeChat アプレット

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

3. 条件付きレンダリング

Alipay アプレット

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

WeChat ミニ プログラム

#

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

#3.開発プロセスで一般的に使用される 2 つのミニ プログラムにおけるコンポーネントの異なる使用方法

(1) インタラクション1. メッセージ プロンプト ボックス

Alipay アプレット

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

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

WeChat ミニ プログラム

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

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

wx.hideToast() //隐藏

2. メッセージ プロンプト ボックスAlipay ミニ プログラム

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

my.hideLoading();

WeChat ミニ プログラム

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

wx.hideLoading()

3.http requestAlipay ミニ プログラム

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

WeChat ミニ プログラム

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

実際、WeChat ミニ プログラムと Alipay ミニ プログラムで提供される API メソッドは大まかに次のとおりです。同じ WeChat アプレットが「wx.」で始まり、Alipay アプレットが「my.」で始まることを除いて、同じです。残りは、API メソッドのフィールド「text、content、name、title」の名前が付けられているだけかもしれません。違う。

#(2) セレクター

1. 時間セレクター

Alipay アプレット

Alipay アプレットは API、my.datePicker(object) を提供します

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

WeChat アプレット

WeChat アプレットこれはピッカーを通じて実装されますコンポーネント

<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

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

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

2. 州および都市セレクター

Alipay アプレット

Alipay アプレット このプログラムは、API を提供します。 multiLevelSelect(Object)

カスケード選択関数は、主に州や都市の情報選択など、マルチレベルの関連データの選択に使用されます。 1.1. 省または市の json 形式ファイルを導入します http://blog.shzhaoqi.com/uploads/js/city_json.zip

1.2. このファイルを js で導入します

1.3. my.multiLevelSelect(Object) を使用する

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 ミニ プログラム

WeChat ミニ プログラムは引き続きピッカー コンポーネントを使用します。

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

Page({
  data: {
    region: ['广东省', '广州市', '海珠区'],
    customItem: '全部'
  },

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

(3) 支払いを促すミニ プログラム

Alipay ミニ プログラム

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

WeChat ミニプログラム

wx.requestPayment({
  timeStamp: '',//时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间
  nonceStr: '',//随机字符串，长度为32个字符以下
  package: '',//统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=***
  signType: 'MD5',//签名算法
  paySign: '',//签名
  success (res) { },
  fail (res) { }
})

(4) 電話番号

支付宝小程序

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

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

以上がAlipay ミニ プログラムと WeChat ミニ プログラム開発の違いを見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。