ホームページ > 記事 > WeChat アプレット > Alipay ミニ プログラムと WeChat ミニ プログラム開発の違いを見てみましょう
Alipay ミニ プログラムと WeChat ミニ プログラム開発の違いを見てみましょう
- coldplay.xixi転載
- 2021-04-14 10:23:533267ブラウズ
Alipay ミニ プログラムの開発と WeChat ミニ プログラムの開発の違いに関する簡単な説明
1.app.json
#(1) ミニプログラム共通のステータスバー、ナビゲーションバー、タイトル、ウィンドウの背景色を設定します#Alipay ミニ プログラム "window": {
"defaultTitle": "病案到家", //页面标题
"titleBarColor": "#1688FB" //导航栏背景色
},
WeChat ミニ プログラム "window": {
"backgroundTextStyle": "light",//窗口的背景色
"navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色
"navigationBarTitleText": "病案到家",//导航栏标题文字内容
"navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white
},
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 ミニ プログラムと 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、
catchtouchstartbindイベント バインディングでは、バブリング イベントが上方へバブリングすることは防止されません。
イベント バインディングは、バブリング イベントが上方へバブリングすることを防ぐことができます。 <pre class="brush:php;toolbar:false;"><button class="weui-btn" bindtap=&#39;login&#39; type="primary">登录</button></pre>2. リストのレンダリング<pre class="brush:php;toolbar:false;">Page({
data: {
list: [{
Title: &#39;支付宝&#39;,
}, {
Title: &#39;微信&#39;,
}]
}
})</pre>
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>
</viewPage({
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 サイトの他の関連記事を参照してください。