Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung

Zusammenfassung der allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung

Hier habe ich hauptsächlich einige häufig verwendete Funktionspunkte im Entwicklungsprozess kleiner Programme herausgearbeitet, die sehr praktisch sind. Schauen wir sie uns einmal an.

1. Höhe und Breite ermitteln

var windowHeight = wx.getSystemInfoSync().windowHeight
var Fensterbreite = wx.getSystemInfoSync().Fensterbreite

2. Dynamischer Bindungsstil und Klasse

Klasse = "operBtn {{select==1?'activeClass':''}}"
Stil="Anzeige:{{displayPhoto}}"

3. wx:wenn

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{Länge > 2}}"> 2 </view>
<Ansicht wx:else> 3 </Ansicht>

4. Klicken Sie auf Ereignis

<van-tag plain style="margin-left:10px;" bindtap="toggle">Alles auswählen</van-tag>
//Bubbling-Event-Catchtap für Klick-Event<van-button class="shop-but" size="mini" icon="like-o" catchtap="getWish" data-pro_id='{{item.product_id}}'></van-button>

//Klickdaten abrufen let id = e.currentTarget.dataset.id

5. wx: für

//Verwenden Sie das Steuerattribut wx:for der Komponente, um ein Array zu binden. Anschließend können Sie die Daten jedes Elements im Array verwenden, um die Komponente wiederholt zu rendern.
//Der Standard-Indexvariablenname des aktuellen Elements im Array ist Index, und der Standardvariablenname des aktuellen Elements im Array ist Element
<Ansicht wx:für="{{array}}">
  {{index}}: {{item.message}}
</Ansicht>

//Oder//Verwenden Sie wx:for-item, um den Variablennamen des aktuellen Elements des Arrays anzugeben.
//Verwenden Sie wx:for-index, um den Variablennamen des aktuellen Index des Arrays anzugeben:
<Ansicht wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</Ansicht>

6. Daten in Daten

//Speicher this.setData({
        Ergebnis: event.detail
      });
 //Verwenden Sie this.data.result

7. Ändern Sie die Seitenkonfiguration. Sie können zum Aktualisieren nach unten ziehen. Ändern Sie den Seitentitel

"enablePullDownRefresh": wahr,
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTitleText": "Meine Rechnung",
"navigationBarTextStyle": "weiß"

8. Seitentitel dynamisch ändern

wx.setNavigationBarTitle({
     Titel: this.data.info.name
})

9. Horizontale Linie

<van-divider custom-style="margin:10px 0;" />

10. WXS (WeiXin Script) ist eine Skriptsprache für kleine Programme. In Kombination mit WXML kann sie die Struktur der Seite erstellen.

//Zeitformat <wxs module="format">
    var format = funktion(datum) {
        var Datum = getDate(Datum)
        var Jahr = Datum.getFullYear()
        var Monat = date.getMonth() + 1
        var Tag = Datum.getDate()
        var WocheTag = Datum.getDay()
        var Woche = ''
        Schalter(Wochentag){ 
            Fall 0: 
                Woche = 'Sonntag'
                brechen; 
            Fall 1:
                Woche = "Montag"
                brechen; 
            Fall 2: 
                Woche = 'Dienstag'
                brechen; 
            Fall 3: 
                Woche = 'Mittwoch'
                brechen; 
            Fall 4: 
                Woche = 'Donnerstag'
                brechen; 
            Fall 5: 
                Woche = 'Freitag'
                brechen; 
            Fall 6: 
                Woche = 'Samstag'
                brechen; 
        }
        gibt Monat + '月' + Tag + '日' + ' ' + Woche zurück;
    }
modul.exports.format = Format;
</wxs>


//Sternchen auf mobile Mailbox setzen<wxs module="phone">
var toHide = Funktion(Array) {
  var mphone = array.substring(0, 3) + '****' + array.substring(7);
  Handy zurückgeben;
}
module.exports.toHide = ausblenden;
</wxs>

11. Video, Attributverwendung

<Video 
      id="meinVideo" 
      Quelle="{{url}}" 
      binderror="videoErrorCallback" 
      show-center-play-btn='{{false}}' 
      anzeigen-abspielen-btn="{{true}}"
      Bedienelemente
      Titel="Kurs"
      Objekt-Fit = "Füllen"
      Automatische Rotation aktivieren = "true"
      bindtimeupdate="Bindezeitupdate"
    ></video>
//

 let videoCtx = wx.createVideoContext('meinVideo', dieses)
videoCtx.pause()


//bindtimeupdate Fortschrittszeit abrufen, Wiedergabevorgang zeitabhängig begrenzen bindtimeupdate:function(res){//Wiedergabefunktion, aktuelle Wiedergabezeit prüfen usw. let video_status = this.data.video_status
        lass das = dies
        wenn (res.detail.currentTime > 10) {
            wenn (video_status === '0') {
                wx.showModal({
                    Titel: 'Anmelden',
                    content: 'Der Schnupperkurs ist beendet. Wenn Sie weiterschauen möchten, melden Sie sich bitte zuerst an',confirmText:'Bestätigen',
                    Erfolg (res) {
                      wenn (res.bestätigen) {
                        wx.switchTab({
                            URL: '/Seiten/Benutzer/Benutzer'
                        })
                      } sonst wenn (res.abbrechen) {
                        wx.navigateZurück({
                          Delta: 1,
                        })
                      }
                    }
                })
            } sonst wenn (video_status === '2'){
                let videoCtx = wx.createVideoContext('meinVideo', dieses)
                videoCtx.pause()
                wx.showModal({
                    Titel: 'Kurs kaufen',
                    content: 'Der Probekurs ist beendet. Wenn Sie weiterschauen möchten, kaufen Sie bitte zuerst', confirmText: 'Jetzt bezahlen',
                    Erfolg (res) {
                    wenn (res.bestätigen) {
                        das.onClickButton()
                    } sonst wenn (res.abbrechen) {
                        wx.navigateZurück({
                        Delta: 1,
                        })
                    }
                    }
                })
            }
            
        } anders {
            
        }
    },

12. Datenspeicherung

//speichern versuchen {
          wx.setStorageSync('Auto', Info)
        fangen (e) { }
//Versuchen Sie es {
      Var-Wert = wx.getStorageSync('Auto')
      wenn (Wert) {
        dies.setData({
          ApplyContent:Wert
        })
      }
    } fangen (e) {
    }

13. Kartennutzung

//Offizielle Website const QQMapWX = require('../../assets/js/qqmap-wx-jssdk')
const qqmapsdk = neues QQMapWX({
    Schlüssel: „XSTBZ-G74CJ-7BVFQ-KC2JD-ONRK5-ZABGU“
})

getAddressLocation(){
        lass das = dies
        wx.getLocation({
        Typ: 'gcj02',
        Erfolg (res) {
            const latitude = res.latitude
            Konstante Länge = res. Länge
            that.getAddress(Breitengrad, Längengrad)
            
        }
        })
    },
    getAddress(Breitengrad, Längengrad) {
        lass das = dies
        qqmapsdk.reverseGeocoder({
            Standort: {Breitengrad,Längengrad},
            Erfolg(res) {
                konsole.log(res);
                var mks = []
                mks.push({ // Das zurückgegebene Ergebnis abrufen und in das mks-Array einfügen title: res.result.address,
                    ID: 1,
                    Breitengrad: Breitengrad,
                    Längengrad: Längengrad,
                    iconPath: "../../img/mk.png", //Symbolpfadbreite: 20,
                    Höhe: 20
                })
                dass.setData({
                    Adresse:res.result.address,
                    Markierungen: mks,
                    Breitengrad: Breitengrad,
                    Längengrad: Längengrad,
                })
            }
        })
    },

14. Klicken Sie auf Kopieren

copyBtn: Funktion (e) {
        var currentidx = e.currentTarget.dataset.num;
        Konsole.log(aktuelleIDX); 
        wx.setClipboardData({
        Daten: currentidx,
        Erfolg: Funktion (res) {
            wx.showToast({
            Titel: 'Kopieren erfolgreich',
            });
        }
        });
    },

Zusammenfassen

Dies ist das Ende dieses Artikels über die allgemeinen Funktionen und Verwendungsmethoden der WeChat-Applet-Entwicklung. Weitere relevante Inhalte zu den allgemeinen Funktionen der WeChat-Applet-Entwicklung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • Zusammenfassung der Tastenkombinationen für das WeChat-Applet-Entwicklungstool
  • Detaillierte Erläuterung der WeChat-Applet-Entwicklung (Projekt von Grund auf)
  • Zusammenfassung von 40 technischen Tipps zur WeChat-Applet-Entwicklung (empfohlen)
  • Entwicklung eines WeChat-Miniprogramms - Tutorial für die ersten Schritte
  • Detailliertes Tutorial zur WeChat Mini-Programm-Cloud-Entwicklung
  • Verwenden von WeChat-Miniprogrammen zur Front-End-Entwicklung [Schnellstart]
  • Zusammenfassung der Erfahrungen mit der Entwicklung von WeChat-Applets (empfohlen)
  • Grundlegendes Tutorial zur Entwicklung von WeChat Mini-Programmen

<<:  HTML-Sprachenzyklopädie

>>:  Aktivieren Sie den SSHD-Vorgang im Docker

Artikel empfehlen

Wie füge ich ein Website-Symbol hinzu?

Der erste Schritt besteht darin, eine Software zur...

Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js

Konvertierung des Zeitformats von Montag auf Sonn...

Einige Hinweise zur MySQL-Self-Join-Deduplizierung

Lassen Sie mich kurz das Funktionsszenario erklär...

Erweiterte Closures in JavaScript erklärt

Inhaltsverzeichnis 1. Das Konzept der Schließung ...

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Im Linux-Umfeld möchten Sie prüfen, ob eine besti...

Verschachtelte Verwendungsoperation für MySQL-Aggregatfunktionen

Zweck: Verschachtelte Verwendung von MySQL-Aggreg...

Beispiel zum Ändern der inländischen Quelle in Ubuntu 18.04

Die eigene Quelle von Ubuntu stammt aus China, da...

Einführung in die Stammverzeichniserweiterung unter Linux

1. Überprüfen Sie den Linux-Festplattenstatus df ...

InnoDB-Typ MySql stellt Tabellenstruktur und Daten wieder her

Voraussetzung: Speichern Sie die .frm- und .ibd-D...

Kapselungsmethode der Vue-Breadcrumbs-Komponente

Vue kapselt die Breadcrumb-Komponente zu Ihrer In...

Detaillierte Erklärung zur Verwendung verschiedener MySQL-Indizes

1. Langsames Abfrageprotokoll 1.1 MySQL-Protokoll...

Vue: Detaillierte Erklärung von Speicherlecks

Was ist ein Speicherleck? Ein Speicherleck bedeut...