Hema Fresh ist Alibabas neues Einzelhandelsformat, das Offline-Supermärkte komplett neu aufgebaut hat und sich großer Beliebtheit erfreut.
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
Mini-Programm ist ein einfacher Einstieg. Für Anfänger können Sie weitere offizielle Dokumente lesen, um ein vollständigeres vorläufiges Mini zu erstellen Programme erfreuen sich gerade aufgrund ihrer einfachen Bedienung und einfachen Implementierung immer größerer Beliebtheit und auch ihr kommerzieller Wert steigt.
WeChat-Webentwicklertools: Offizielle Website des WeChat Mini-Programms Dies ist ein relativ einfach zu verwendender Editor, der sehr praktisch ist Bearbeiten von Miniprogrammen.
Entwicklungsdokumente: Sammlung und Geheimnisse des WeChat Mini-Programms Verwenden Sie diese Option, um APIs, Komponenten, Frameworks usw. von WeChat Mini-Programmen zu finden.
Symbolbibliothek: Iconfont-Alibaba Vector Icon Library Sie können fast alle kleinen Symbole finden, die Sie benötigen, was sehr praktisch ist.
Easy Mork: Easy-Mock wird für die Hintergrundsimulation verwendet, um JSON-Daten zu erhalten.
Weui-Framework wird eingeführt, z. B. eine Schnittstelle für persönliche Informationen Die Verwendung von Weui kann schnell und bequem erfolgen.
Die WeChat-Applet-Entwicklung unterscheidet sich immer noch etwas von der herkömmlichen H5-Entwicklung und ist leicht zu erlernen Problem.
Das Applet ist ein auf MVVM basierendes Framework. Es ist sehr wichtig, die Datenbindung sinnvoll zu nutzen, um die Schnittstelle zu aktualisieren.
Schreiben Sie nicht alles auf einmal Dokumentation. Sie werden feststellen, dass Sie versehentlich eine Komponente geschrieben haben. .
Betreten Sie die Entwicklungsplattform, registrieren Sie Projektinformationen –>Laden Sie die Version im Editor hoch->Wählen Sie „Zur Überprüfung in der Entwicklungsversion senden“->Überprüfung bestehen- > Das Projekt ist online
Werfen wir zuerst einen Blick auf mein Projektverzeichnis
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>Dann stellen Sie display: inline-block; Leerzeichen: nowrap;
Die Konvertierung des Überschriftsinformationsfelds erfolgt durch Auf- und Abwärtsdrehung und wird mithilfe eines verschachtelten Wischers in der Bildlaufansicht abgeschlossen
2. Klassifiziertes Produktmanagement
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>
Für die Datenverarbeitung müssen Sie klären, welche Informationen globale und welche lokale Informationen sind.
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
}) Und einige persönliche Informationen, wie z. B. das Geburtsdatum, und die Kontoinformationen können über wx.setStorage und wx.getStorage im lokalen Speicher abgelegt werden
Reduzieren Sie beispielsweise die Anzahl der Produkte im Warenkorb
4. Einführung des Weui-Frameworks
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
},Zusammenfassung
@import './styles/weui.wxss';
Projektadresse:
Wenn Ihnen dieses Projekt gefällt, geben Sie ihm bitte einen Stern. Vielen Dank!
Vorläufige Ansicht des Projekts
Hema Fresh ist ein neues Einzelhandelsformat, das Alibaba für Offline-Supermärkte komplett umgestaltet hat. Es erfreut sich großer Beliebtheit
* 用户信息注册 * 首页几个轮播和界面交互 * 分类商品管理购买 * 购物车界面交互及其操作 * 个人信息界面
Miniprogramm ist eine einfache Sache Wenn Sie als Anfänger mehr offizielle Dokumente lesen, können Sie zunächst ein relativ vollständiges Miniprogramm erstellen. Gerade weil der Einstieg einfach ist und die Funktionen einfach zu implementieren sind, erfreuen sich Miniprogramme immer größerer Beliebtheit und werden kommerziell genutzt Auch der Wert steigt.
WeChat-Webentwicklertools: Offizielle Website des WeChat Mini-Programms Dies ist ein relativ einfach zu verwendender Editor, der sehr praktisch ist Bearbeiten von Miniprogrammen.
Entwicklungsdokumente: Sammlung und Geheimnisse des WeChat Mini-Programms Verwenden Sie diese Option, um APIs, Komponenten, Frameworks usw. von WeChat Mini-Programmen zu finden.
Symbolbibliothek: Iconfont-Alibaba Vector Icon Library Sie können fast alle kleinen Symbole finden, die Sie benötigen, was sehr praktisch ist.
Easy Mork: Easy-Mock wird für die Hintergrundsimulation verwendet, um JSON-Daten zu erhalten.
Weui-Framework wird eingeführt, z. B. eine Schnittstelle für persönliche Informationen Die Verwendung von Weui kann schnell und bequem erfolgen.
Die WeChat-Applet-Entwicklung unterscheidet sich immer noch etwas von der herkömmlichen H5-Entwicklung und ist leicht zu erlernen Problem.
Das Applet ist ein auf MVVM basierendes Framework. Es ist sehr wichtig, die Datenbindung sinnvoll zu nutzen, um die Schnittstelle zu aktualisieren.
Schreiben Sie nicht alles auf einmal Dokumentation. Sie werden feststellen, dass Sie versehentlich eine Komponente geschrieben haben. .
Betreten Sie die Entwicklungsplattform, registrieren Sie Projektinformationen –>Laden Sie die Version im Editor hoch->Wählen Sie „Zur Überprüfung in der Entwicklungsversion senden“->Überprüfung bestehen- > Das Projekt ist online
Werfen wir zuerst einen Blick auf mein Projektverzeichnis
"pages": [ "pages/index/index", //主界面 "pages/person/person", //个人界面 "pages/classify/classify", //分类商品界面 "pages/class/myFruits/myFruits", //水果商店 "pages/class/myMeat/myMeat", //肉类食品商店 "pages/myCart/myCart" //购物车 ],
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" />
</swiper-item>
</block>
</swiper>Dann stellen Sie display: inline-block; Leerzeichen: nowrap;
Die Konvertierung des Überschriftsinformationsfelds erfolgt durch Auf- und Abwärtsdrehung und wird mithilfe eines verschachtelten Wischers in der Bildlaufansicht abgeschlossen
2. Klassifiziertes Produktmanagement
<scroll-view scroll-y-="true" >
<swiper autoplay="{{autoplay}}" interval="{{interval1}}" duration="{{duration}}" vertical="true">
<block wx:for="{{something}}" wx:key="index">
//内容
</block>
</swiper>
</scroll-view>
Für die Datenverarbeitung müssen Sie klären, welche Informationen globale und welche lokale Informationen sind.
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
}) Und einige persönliche Informationen, wie z. B. das Geburtsdatum, und die Kontoinformationen können über wx.setStorage und wx.getStorage im lokalen Speicher abgelegt werden
Reduzieren Sie beispielsweise die Anzahl der Produkte im Warenkorb
4. Einführung des Weui-Frameworks
reduceItems: function (e) {
let carts = app.globalData.carts; //获取购物车的信息
let classifyList = app.globalData.classifyList; //获取商品的信息
for (let key of carts) { //遍历购物车数组
if (key.id === e.target.dataset.id) { //通过WXML中 view里面的bind-id传过来的参数进行查找
key.cartSelected = true;
if (key.num === 1) { //如果数量为1还要减
key.num--;
key.cartSelected = false; //购物车不选中
key.selected = false; //商品中不选中
app.globalData.carts = carts.filter((item) => { //进行购物车中商品剔除
return item.id != e.target.dataset.id;
})
} else {
key.num--;
}
}
}
let num = 0; //实时更新购物车小计界面显示
let totalPrice = 0;
for (let key of carts) {
if (key.cartSelected) {
num += key.num;
totalPrice += key.num * key.price;
}
}
this.setData({ //通过setData进行当前页面Data数据管理
cart: app.globalData.carts,
cartTotal: num,
cartTotalPrice: totalPrice,
})
},Zusammenfassung
@import './styles/weui.wxss';
Einführungsbeispiele für die WeChat-Miniprogrammentwicklung
Detaillierte Erläuterung der Video-, Musik- und Bildkomponenten des WeChat-Miniprogramms
Eine Fallstudie darüber, wie das WeChat-Applet WeChat-Übungsschritte erhalten kann (Bild)
Das obige ist der detaillierte Inhalt vonWeChat Mini-Programm – Nachahmung von Hema Fresh Food. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
