Maison > Article > Applet WeChat > 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" //导航栏背景色 },
Mini programme WeChat
"window": { "backgroundTextStyle": "light",//窗口的背景色 "navigationBarBackgroundColor": "#1688FB",//导航栏背景颜色 "navigationBarTitleText": "病案到家",//导航栏标题文字内容 "navigationBarTextStyle": "white"//导航栏标题颜色,仅支持 black/white },
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": "我的" } ] }
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": "我的" } ] }
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>
Applet WeChat
bindtap
, la liaison d'événement catchtouchstart
bind
ne bloquera pas les événements Bubbling bubble up. catch
La liaison d'événements peut empêcher les événements bouillonnants de se produire.
<button class="weui-btn" bindtap='login' type="primary">登录</button>
2. Rendu de liste
Page({ data: { list: [{ Title: '支付宝', }, { Title: '微信', }] } })
Applet Alipay
<block a:for="{{list}}"> <view key="item-{{index}}" index="{{index}}">{{item.Title}}</view> </block>
Applet WeChat
<block wx:for="{{list}}"> <view wx:key="this" wx:for-item="item">{{item.Title}}</view> </block>
3. Rendu conditionnel
Applet Alipay
<view a:if="{{length > 5}}"> 1 </view> <view a:elif="{{length > 2}}"> 2 </view> <view a:else> 3 </view>
Mini programme WeChat
<view wx:if="{{length > 5}}"> 1 </view> <view wx:elif="{{length > 2}}"> 2 </view> <view wx:else> 3 </view>
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: 'success',//默认 none,支持 success / fail / exception / none’。 content: '操作成功',//文字内容 duration: 3000,//显示时长,单位为 ms,默认 2000 success: () => { my.alert({ title: 'toast 消失了', }); }, });rrree
Programme WeChat Mini
my.hideToast()//隐藏弱提示。
wx.showToast({ title: '成功',//提示的内容 icon: 'success',//success 显示成功图标;loading 显示加载图标;none不显示图标 duration: 2000 }) //icon为“success”“loading”时 title 文本最多显示 7 个汉字长度
2. Boîte d'invite de message
Programme Alipay Mini
wx.hideToast() //隐藏
my.showLoading({ content: '加载中...', delay: 1000, });
Applet WeChat
my.hideLoading();
wx.showLoading({ title: '加载中', })
3.requête http
Applet Alipay
wx.hideLoading()
Programme WeChat Mini
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'}); } });
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: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) } })
Applet WeChat
Applet WeChat Elle est implémentée via le sélecteur composant
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, }); }, });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
Programme WeChat Mini
Le programme WeChat Mini utilise toujours le composant de sélection ImplémentéPage({ data: { date: '2016-09-01', }, bindDateChange: function(e) { console.log('picker发送选择改变,携带值为', e.detail.value) this.setData({ date: e.detail.value }) }, })rrree (3) Le mini programme évoque le paiement
Le mini programme 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 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 可为每一列的顶部添加一个自定义的项,可为空(4) Téléphone
支付宝小程序
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都会给你熟悉的感觉!
相关免费学习推荐:微信小程序开发
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!