Das Miniprogramm ist für Anfänger einfach zu bedienen, wenn Sie mehr offizielle Dokumente lesen, gerade weil es einfach zu starten ist und die Funktionen einfach zu implementieren sind. Miniprogramme erfreuen sich immer größerer Beliebtheit. In diesem Artikel zeigen wir Ihnen eine WeChat-Applet-Nachahmung von Hema Xiansheng.
Vorläufige Ansicht des Projekts
Hema Fresh ist Alibabas neues Einzelhandelsformat, das Offline-Supermärkte komplett neu aufgebaut hat und sich großer Beliebtheit erfreut.
Projektfunktion
* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
Nach dem Login kopieren
Nach dem Login kopieren
Mini-Programm-Designprozess
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.
1. Projekttools und -dokumente
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.
2. Projektentwicklung
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. .
3. Projektfreigabe
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
Teilfunktionsanalyse
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" //购物车
],
Nach dem Login kopieren
Nach dem Login kopieren
1 >Es gibt verschiedene Arten von Karussellformen, z. B. die übliche horizontale Anzeige von Posterbildern sowie die horizontale und vertikale Anzeige von Produktlisten und die Drehung des Überschriften-Informationsfelds.
Die Siwper-Komponente implementiert die horizontale Anzeige von Posterbildern sehr gut, z. B.
Horizontales Gleiten Sie müssen jedoch auf einige andere Details achten
<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>Nach dem Login kopieren
Nach dem Login kopieren
Fügen Sie zunächst scroll-x-="true" zur Swiper-Komponente hinzu
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>Nach dem Login kopieren
Nach dem Login kopieren
Übergeben Sie zunächst die onLoad-Lebenszyklusfunktion an der Indexschnittstelle,
Rufen Sie die Hintergrunddaten über easy-moc ab und senden Sie die erforderlichen Informationen an die globalen globalen Daten
Für die Datenverarbeitung müssen Sie klären, welche Informationen globale und welche lokale Informationen sind.
Zum Beispiel müssen alle Produktinformationen, einschließlich der Produkte im Warenkorb, in der globalen Ansicht platziert werden, wie z Der Status der aktuellen Schnittstelle wird im Allgemeinen in den Daten der aktuellen Schnittstelle gespeichert.
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})Nach dem Login kopieren
Nach dem Login kopieren
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
3. Warenkorb-Vorgänge
Die Vorgänge im Warenkorb sind nichts anderes als Addieren, Addieren, Subtrahieren, und Sie müssen ständig debuggen, um herauszufinden, was falsch ist
Produkt ändern Informationen und Verarbeitung des Warenkorbstatus durch Vorgänge wie Anzeigen und Tippen auf Schaltflächen
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,
})
},Nach dem Login kopieren
Nach dem Login kopieren
Das im globalen CSS-Stil hinzugefügte CSS wird an alle Seiten angepasst, was sehr praktisch ist, um einige Schnittstellen zu erstellen
Zusammenfassung
@import './styles/weui.wxss';
Nach dem Login kopieren
Nach dem Login kopieren
Die Komponenten des WeChat-Applets und der API sind sehr leistungsfähig und erfordern ständige Erkundung, kontinuierliches Lernen und das Lesen weiterer Dokumente
-
Seien Sie gut im Umgang mit effektiven Ressourcen, wie z B. Iconfont, Esay-Moc Weui usw.
-
Seien Sie beim Seitenschneiden vorsichtig und beherrschen Sie flexible Layouts und andere Layoutmethoden. Das rpx von Miniprogrammen ist wirklich einfach zu verwenden
-
Schreiben Sie nicht alle Codes auf einmal. Wenn Funktionen wiederverwendbar sind, sollten sie abstrahiert und gekapselt werden, damit der Code leicht zu warten und zu lesen ist
-
Projektadresse:
https://github.com/fishman17/... Enthält detaillierte Notizen
Persönliches Profil
Github: https://github. com /fishman17
E-Mail: 734583898@qq.com
Wenn Ihnen dieses Projekt gefällt, geben Sie ihm bitte einen Stern. Vielen Dank!
Vorläufige Ansicht des Projekts
Nachahmung von Hema Xiansheng und Realisierung einiger Funktionen.
Hema Fresh ist ein neues Einzelhandelsformat, das Alibaba für Offline-Supermärkte komplett umgestaltet hat. Es erfreut sich großer Beliebtheit
Projektfunktion
* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面
Nach dem Login kopieren
Nach dem Login kopieren
Miniprogramm-Designprozess
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.
1. Projekttools und -dokumente
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.
2. Projektentwicklung
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. .
3. Projektfreigabe
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
Teilfunktionsanalyse
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" //购物车
],
Nach dem Login kopieren
Nach dem Login kopieren
1 >Es gibt verschiedene Arten von Karussellformen, z. B. die übliche horizontale Anzeige von Posterbildern sowie die horizontale und vertikale Anzeige von Produktlisten und die Drehung des Überschriften-Informationsfelds.
Die Siwper-Komponente implementiert die horizontale Anzeige von Posterbildern sehr gut, z. B.
Horizontales Gleiten Sie müssen jedoch auf einige andere Details achten
<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>Nach dem Login kopieren
Nach dem Login kopieren
Fügen Sie zunächst scroll-x-="true" zur Swiper-Komponente hinzu
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>Nach dem Login kopieren
Nach dem Login kopieren
Übergeben Sie zunächst die onLoad-Lebenszyklusfunktion an der Indexschnittstelle,
Rufen Sie die Hintergrunddaten über easy-moc ab und senden Sie die erforderlichen Informationen an die globalen globalen Daten
Für die Datenverarbeitung müssen Sie klären, welche Informationen globale und welche lokale Informationen sind.
Zum Beispiel müssen alle Produktinformationen, einschließlich der Produkte im Warenkorb, in der globalen Ansicht platziert werden, wie z Der Status der aktuellen Schnittstelle wird im Allgemeinen in den Daten der aktuellen Schnittstelle gespeichert.
wx.request({
url: 'http://www.easy-mock.com/mock/5a1ffb42583969285ab22bb7/orderOnline/orderOnline',
complete: res => {
this.globalData.classifyList = res.data;
},
})Nach dem Login kopieren
Nach dem Login kopieren
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
3. Warenkorb-Vorgänge
Die Vorgänge im Warenkorb sind nichts anderes als Addieren, Addieren, Subtrahieren, und Sie müssen ständig debuggen, um herauszufinden, was falsch ist
Produkt ändern Informationen und Verarbeitung des Warenkorbstatus durch Vorgänge wie Anzeigen und Tippen auf Schaltflächen
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,
})
},Nach dem Login kopieren
Nach dem Login kopieren
Das im globalen CSS-Stil hinzugefügte CSS wird an alle Seiten angepasst, was sehr praktisch ist, um einige Schnittstellen zu erstellen
Zusammenfassung
@import './styles/weui.wxss';
Nach dem Login kopieren
Nach dem Login kopieren
Die Komponenten des WeChat-Applets und der API sind sehr leistungsfähig und erfordern ständige Erkundung, kontinuierliches Lernen und das Lesen weiterer Dokumente
-
Seien Sie gut im Umgang mit effektiven Ressourcen, wie z B. Iconfont, Esay-Moc Weui usw.
-
Seien Sie beim Seitenschneiden vorsichtig und beherrschen Sie flexible Layouts und andere Layoutmethoden. Das rpx von Miniprogrammen ist wirklich einfach zu verwenden
-
Schreiben Sie nicht alle Codes auf einmal. Wenn Funktionen wiederverwendbar sind, sollten sie abstrahiert und gekapselt werden, damit der Code leicht zu warten und zu lesen ist.
-
Der obige Inhalt ist eine Nachahmung des Hema WeChat-Applets. Ich hoffe, dass es allen helfen kann.
Verwandte Empfehlungen:
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!
