Die WeChat-Applet-Entwicklung realisiert die Aktivitätsleitfunktion für Popup-Fenster auf der Startseite

Die WeChat-Applet-Entwicklung realisiert die Aktivitätsleitfunktion für Popup-Fenster auf der Startseite

1. Nachfrage

Die Eventzeit kann im Hintergrund konfiguriert werden. Während des Events wird das Eventbild automatisch in einem Popup-Fenster auf der Startseite des Miniprogramms angezeigt. Benutzer können die Anzeige aktiver Bilder ausschalten.

1. Im Verwaltungs-Backend können Sie Aktivitätszeiträume hinzufügen, festlegen, ob Popup-Fenster und Popup-Fensterbilder angezeigt werden sollen und ob Aktivitäten aktiviert werden sollen.

2. Wenn Sie das Miniprogramm aufrufen, fragen Sie ab, ob im Hintergrund eine Popup-Fensteraktivität vorhanden ist. Wenn ja, wird in einem Popup-Fenster das Aktivitätsbild angezeigt.

2. Datenbankdesign

Da die Popup-Aktivität des Miniprogramms ein Element in der Systemkonfiguration ist, wird die öffentliche Systemkonfiguration direkt zum Speichern der Popup-Aktivitätskonfiguration verwendet.

Die Struktur der öffentlichen Systemkonfigurationstabelle ist wie folgt:

Tabelle „sys_config“ erstellen (
  `id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'Primärschlüssel',
  `configName` varchar(255) DEFAULT NULL COMMENT 'Konfigurationsname',
  `configInfo` Langtext KOMMENTAR 'Konfigurationsinformationen',
  PRIMÄRSCHLÜSSEL (`id`)
)ENGINE=MyISAM STANDARD-CHARSET=utf8;

3. Implementierung der Java-Hintergrundkonfiguration

öffentliche Klasse SysConfig erweitert CommonBean {
 
    public static String NAME_SECKILL="config_seckill"; //Seckill-Konfiguration private Long id;
    private String configName; // Konfigurationsname private String configInfo; // Konfigurationsinformationen public Long getId() {
        Rückgabe-ID;
    }
 
    öffentliche void setId(Lange ID) {
        diese.id = ID;
    }
 
    öffentliche Zeichenfolge getConfigName() {
        Konfigurationsname zurückgeben;
    }
 
    public void setConfigName(String configName) {
        this.configName = Konfigurationsname;
    }
 
    öffentliche Zeichenfolge getConfigInfo() {
        Konfigurationsinfo zurückgeben;
    }
 
    öffentliche void setConfigInfo(String configInfo) {
        diese.configInfo = Konfigurationsinfo;
    }
}
@Service("sysConfigService")
öffentliche Klasse SysConfigServiceImpl<T> implementiert SysConfigService<T> {
 
    @Autowired
    privates SysConfigDao sysConfigDao;
    // Konfiguration aktualisieren public int update(SysConfig sysConfig){
        gibt sysConfigDao.update(sysConfig) zurück;
    }
 
    // Konfigurationsinformationen basierend auf dem Konfigurationsnamen abrufen @Override
    public T getConfigByName(Klasse t, String configname) {
        SysConfig sysConfig = sysConfigDao.getConfigByName(Konfigurationsname);
        wenn (sysConfig == null) {
            gibt null zurück;
        }
        T Ergebnis = (T) neues Gson().fromJson(sysConfig.getConfigInfo(), t);
        Ergebnis zurückgeben;
    }
 
    // Konfiguration speichern public int saveConfig(T t, String configname) {
        SysConfig sysConfig = neue SysConfig();
        sysConfig.setConfigName(Konfigurationsname);
        Gson gson = neuer GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss").erstellen();
        Zeichenfolge json = gson.toJson(t);
        sysConfig.setConfigInfo(json);
        // Feststellen, ob es hinzugefügt wurde. Wenn ja, aktualisieren. Wenn nein, hinzufügen, if (sysConfigDao.getConfigByName(configname) == null) {
            int Ergebnis = sysConfigDao.add(sysConfig);
            Ergebnis zurückgeben;
        } anders {
            int Ergebnis = sysConfigDao.update(sysConfig);
            Ergebnis zurückgeben;
        }
    }
 
}

Der Effekt nach der Implementierung ist:

4. WeChat-Applet-Frontend-Implementierung

Mini-Programm JS-Implementierung

             getSysConfigSecKill() {
               app.$post(app.API_SysConfigSecKill, {}, (res) => {
                 wenn (res.statusCode == 0) {
                   lass Daten = res.data;
                   wenn (data.openIndexPopWindow) {
                     dies.setData({
                       seckillispopwindow: wahr,
                       seckillurl: data.popWindowPic
                     })
                   }
                 }
               })

             },

Mini-Programmstil

/*Aktivitäts-Popup-Fenster*/
.seckill{Position: fest;Breite:325px;Höhe:164px;oben:100px;rechts: 20px;}
.seckill-close{Position: fest;Breite:32px;Höhe:32px;oben:250px;rechts:160px;}

Frontend-Anzeige

<!--Aktivitäts-Popup-Fenster-->
<view wx:if="{{seckillispopwindow}}">
  <Ansicht>
    <image bindtap='seckill_go' class="seckill" src="{{seckillurl}}"></image>
    <image bindtap='seckill_close' class="seckill-close" src="../../images/close.png"></image>
  </Ansicht>
</Ansicht>

Zusammenfassen

Damit ist dieser Artikel über die Entwicklung von WeChat-Miniprogrammen zur Implementierung der Aktivitätsleitfadenfunktion für Popup-Fenster auf der Homepage abgeschlossen. Weitere relevante Inhalte zum Aktivitätsleitfaden für Popup-Fenster von WeChat-Miniprogrammen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass alle 123WORDPRESS.COM in Zukunft unterstützen werden!

Das könnte Sie auch interessieren:
  • Detaillierte Erklärung der 3 häufigsten Popup-Eingabeaufforderungen, die in WeChat-Applets verwendet werden
  • WeChat Mini-Programm-Übung: Benutzerdefiniertes modales Popup-Fenster (8)
  • So implementieren Sie eine benutzerdefinierte modale Popup-Fensterkapselung im WeChat-Applet
  • Das WeChat-Applet implementiert benutzerdefinierte Picker-Selector-Popup-Inhalte
  • WeChat-Applet erzielt schönen Popup-Effekt
  • Detaillierte Erläuterung der Implementierung benutzerdefinierter Popup-Fenster des WeChat-Applets (universell)
  • So implementieren Sie die Popup-Komponente des WeChat-Applets
  • Benutzerdefinierter Beispielcode für das Popup-Fenster des WeChat-Applets
  • Beispiel für ein WeChat-Applet-Formular-Popup
  • Detaillierte Erläuterung der benutzerdefinierten modalen Popup-Komponente des WeChat-Applets

<<:  Zusammenfassung der Linux Logical Volume Management (LVM)-Nutzung

>>:  Detaillierte Erläuterung der Wissenspunkte zur Verwendung von TEXT/BLOB-Typen in MySQL

Artikel empfehlen

CSS Polarkoordinaten Beispielcode

Vorwort Das Projekt stellt Anforderungen an Karte...

Flexibles Boxmodell von CSS und CSS3 zur Anpassung der Elementbreite (-höhe)

1. CSS realisiert eine feste Breite links und ein...

Detaillierte Erklärung des Linux-Texteditors Vim

Vim ist ein leistungsstarker Vollbild-Texteditor ...

Der Vue.js-Cloud-Speicher realisiert die Bild-Upload-Funktion

Vorwort Tipp: Das Folgende ist der Hauptinhalt di...

Beim Website-Design sollte auf die Farbhierarchie geachtet werden

Ich habe kürzlich gesagt, dass Design ein Gefühl d...

mysql erhält statistische Daten innerhalb eines bestimmten Zeitraums

mysql erhält statistische Daten innerhalb eines b...

jQuery erzielt den Shutter-Effekt (mithilfe der Li-Positionierung)

In diesem Artikel wird der spezifische Code von j...

So führen Sie Linux-Befehle im Hintergrund aus

Wenn Sie einen Befehl im Terminal ausführen, müss...

Codebeispiel für die Linux-SSH-Serverkonfiguration

Verwenden Sie den folgenden Terminalbefehl, um de...

Einige Tipps zur Beschleunigung der Entwicklung von WeChat-Miniprogrammen

1. Erstellen Sie eine Seite mit app.json Gemäß un...