Alipay 미니 프로그램과 WeChat 미니 프로그램 개발의 차이점을 살펴 보겠습니다.
- coldplay.xixi앞으로
- 2021-04-14 10:23:533497검색
Alipay 미니 프로그램과 WeChat 미니 프로그램 개발의 차이점에 대한 간략한 토론
1. app.json
(1) 상태 표시줄, 탐색 표시줄, 제목 설정 , 등 미니 프로그램에 공통적입니다.
(2) tabBar 설정Alipay 미니 프로그램
"window": {
"defaultTitle": "病案到家", //页面标题
"titleBarColor": "#1688FB" //导航栏背景色
},WeChat 미니 프로그램
"window": {
"backgroundTextStyle": "light",//窗口的背景色
"navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色
"navigationBarTitleText": "病案到家",//导航栏标题文字内容
"navigationBarTextStyle": "white"//导航栏标题颜色，仅支持 black/white
}, 2. Pages (1) 파일 이름이 다릅니다 알리페이 미니 프로그램
WeChat 미니 프로그램
저는 각각 WeChat 미니 프로그램과 Alipay 미니 프로그램에서 페이지를 만들었습니다. 차이점은
1입니다. "axml" 및 스타일 파일 접미사는 "acss"입니다. 2. WeChat 애플릿의 뷰 레이어 페이지 파일 접미사는 "wxml"이고 스타일 파일 접미사는 "wxss"입니다.
(2) 뷰 레이어 페이지 axml 및 wxml
1. 버블링 이벤트 및 비버블링 이벤트
Alipay 애플릿
onTap, catchTap
"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 이벤트 바인딩은 버블링 이벤트가 위로 올라가는 것을 막지 못합니다. catch 이벤트 바인딩은 버블링 이벤트가 위로 버블링되는 것을 방지할 수 있습니다. "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. 목록 렌더링<button class="weui-btn" onTap="login" type="primary">登录</button>Alipay 애플릿
<button class="weui-btn" bindtap='login' type="primary">登录</button>WeChat 애플릿
Page({
data: {
list: [{
Title: '支付宝',
}, {
Title: '微信',
}]
}
})3. 조건부 렌더링
bindtap、catchtouchstart
bind事件绑定不会阻止冒泡事件向上冒泡，catchAlipay 애플릿
<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. 개발 과정에서 일반적으로 사용되는 두 개의 작은 프로그램에서 구성 요소의 다른 사용법
(1) 상호 작용1. 메시지 프롬프트 상자
Alipay 애플릿 <view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view><view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
WeChat 애플릿my.showToast({
type: 'success',//默认 none，支持 success / fail / exception / none’。
content: '操作成功',//文字内容
duration: 3000,//显示时长，单位为 ms，默认 2000
success: () => {
my.alert({
title: 'toast 消失了',
});
},
});my.hideToast()//隐藏弱提示。
2. 메시지 프롬프트 상자
Alipay 애플릿
wx.showToast({
title: '成功',//提示的内容
icon: 'success',//success 显示成功图标;loading 显示加载图标;none不显示图标
duration: 2000
})
//icon为“success”“loading”时 title 文本最多显示 7 个汉字长度wx.hideToast() //隐藏
WeChat 애플릿
my.showLoading({
content: '加载中...',
delay: 1000,
});rrree3.http 요청 알리페이 미니 프로그램
my.hideLoading();
위챗 미니 프로그램
wx.showLoading({
title: '加载中',
})사실 위챗 미니 프로그램과 알리페이 미니 프로그램에서 제공하는 API 방식은 위챗 미니 프로그램이 "wx."로 시작하고, 알리페이 미니 프로그램이 시작된다는 점만 빼면 거의 동일합니다. "my."를 사용하면 나머지는 API 메서드에서 "텍스트, 콘텐츠, 이름, 제목" 필드의 이름이 다를 수 있습니다.
(2) 선택기
1. 시간 선택기Alipay 애플릿
Alipay 애플릿은 my.datePicker(객체)wx.hideLoading()
WeChat 애플릿 을 제공합니다. WeChat 애플릿 선택기 구성요소를 통해 구현됩니다
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'});
}
});wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
})2. 지방 및 도시 선택기
Alipay 애플릿Alipay 애플릿은 my.multiLevelSelect(Object)
API를 제공합니다. 지방, 도시 정보 선택 등 레벨 관련 데이터 선택.
1.1. 지방이나 도시의 json 형식 파일을 소개합니다. http://blog.shzhaoqi.com/uploads/js/city_json.zip1.2. 이 파일을 js1.3에 소개하세요. )
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
})
},
}) (3) 애플릿은 결제를 불러옵니다
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 애플릿 레터 소규모 프로그램
支付宝小程序 微信小程序 （5）获取登录凭证（code） 支付宝小程序 微信小程序 支付宝小程序与微信小程序有很多相似之处，不论是组件还是api都会给你熟悉的感觉！ 相关免费学习推荐：微信小程序开发<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) 전화 my.makePhoneCall({
number: '400-8097-114'
})wx.makePhoneCall({
phoneNumber: '400-8097-114'
})my.getAuthCode({
success (res) {
if (res.authCode) {
console.log(res.authCode)
}
}
})wx.login({
success (res) {
if (res.code) {
console.log(res.code)
}
}
})
위 내용은 Alipay 미니 프로그램과 WeChat 미니 프로그램 개발의 차이점을 살펴 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!