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

VMware ESXI-Servervirtualisierungscluster

Inhaltsverzeichnis Zusammenfassung Umgebung und W...

HTML+CSS-Beispielcode für zusammengeführte Tabellenränder

Wenn wir Tabellen- und td-Tags Rahmen hinzufügen,...

Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Inhaltsverzeichnis Benutzerdefinierte Vite-Plugin...

Probleme und Erfahrungen bei der Webentwicklung

<br />Nachfolgend sind die Probleme aufgefüh...

Berechtigungen für Cross-Origin-Image-Ressourcen (CORS-fähiges Image)

Das HTML-Spezifikationsdokument führt das Crossor...

Eine kurze Analyse der parallelen WriteSet-Replikation von MySQL

【Historischer Hintergrund】 Ich arbeite seit drei ...

MySQL-Code zur Implementierung der Sequenzfunktion

MySQL implementiert Sequenzfunktion 1. Erstellen ...

Vue implementiert die Bildfrequenzwiedergabe des Karussells

In diesem Artikelbeispiel wird der spezifische Co...