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

So gehen Sie nach der MySQL-Tabellenpartitionierung problemlos online

Inhaltsverzeichnis Zweck der Tabelle Zum Beispiel...

JavaScript zur Implementierung eines einfachen Einkaufsformulars

In diesem Artikel wird der spezifische JavaScript...

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder

Das im Projekt aufgetretene Layoutproblem unregel...

So fügen Sie einem Benutzer in einer Linux-Umgebung Sudo-Berechtigungen hinzu

sudo-Konfigurationsdatei Die Standardkonfiguratio...

Installations-Tutorial für die Zip-Version von MySQL 5.7.18

Die MySQL 5.7.18 Zip-Version von MySQL ist nicht ...

JavaScript implementiert Konstellationsabfragefunktion mit detailliertem Code

Inhaltsverzeichnis 1. Titel 2. Code 3. Ergebnisse...

Lösung des Konflikts zwischen Linux-Kernel- und SVN-Versionen

Phänomen Das System konnte den Linux-Systemkernel...

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Inhaltsverzeichnis 1. Einleitung 2. Grundkonzepte...

Implementieren einer benutzerdefinierten Bildlaufleiste mit nativem JS

In diesem Artikelbeispiel wird der spezifische JS...