WeChat Mini-Programm – Nachahmung von Hema Fresh Food

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

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

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

1. WeChat-Webentwicklertools: Offizielle Website des WeChat Mini-Programms Dies ist ein relativ einfach zu verwendender Editor, der sehr praktisch ist Bearbeiten von Miniprogrammen.

2. Entwicklungsdokumente: Sammlung und Geheimnisse des WeChat Mini-Programms Verwenden Sie diese Option, um APIs, Komponenten, Frameworks usw. von WeChat Mini-Programmen zu finden.

3. Symbolbibliothek: Iconfont-Alibaba Vector Icon Library Sie können fast alle kleinen Symbole finden, die Sie benötigen, was sehr praktisch ist.

4. Easy Mork: Easy-Mock wird für die Hintergrundsimulation verwendet, um JSON-Daten zu erhalten.

5. 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"    //购物车
     ],

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>

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>

Ü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;
      },
    })

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,
    })
  },

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';

Die Komponenten des WeChat-Applets und der API sind sehr leistungsfähig und erfordern ständige Erkundung, kontinuierliches Lernen und das Lesen weiterer Dokumente

1. Seien Sie gut im Umgang mit effektiven Ressourcen, wie z B. Iconfont, Esay-Moc Weui usw.

2. Seien Sie beim Seitenschneiden vorsichtig und beherrschen Sie flexible Layouts und andere Layoutmethoden. Das rpx von Miniprogrammen ist wirklich einfach zu verwenden

3. 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

4. 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

* 用户信息注册
* 首页几个轮播和界面交互
* 分类商品管理购买
* 购物车界面交互及其操作
* 个人信息界面

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

1. WeChat-Webentwicklertools: Offizielle Website des WeChat Mini-Programms Dies ist ein relativ einfach zu verwendender Editor, der sehr praktisch ist Bearbeiten von Miniprogrammen.

2. Entwicklungsdokumente: Sammlung und Geheimnisse des WeChat Mini-Programms Verwenden Sie diese Option, um APIs, Komponenten, Frameworks usw. von WeChat Mini-Programmen zu finden.

3. Symbolbibliothek: Iconfont-Alibaba Vector Icon Library Sie können fast alle kleinen Symbole finden, die Sie benötigen, was sehr praktisch ist.

4. Easy Mork: Easy-Mock wird für die Hintergrundsimulation verwendet, um JSON-Daten zu erhalten.

5. 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"    //购物车
     ],

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>

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>

Ü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;
      },
    })

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,
    })
  },

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';

Die Komponenten des WeChat-Applets und der API sind sehr leistungsfähig und erfordern ständige Erkundung, kontinuierliches Lernen und das Lesen weiterer Dokumente

1. Seien Sie gut im Umgang mit effektiven Ressourcen, wie z B. Iconfont, Esay-Moc Weui usw.

2. Seien Sie beim Seitenschneiden vorsichtig und beherrschen Sie flexible Layouts und andere Layoutmethoden. Das rpx von Miniprogrammen ist wirklich einfach zu verwenden

3. 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.

4. 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!