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

So beheben Sie den Fehler beim MySQL-Transaktionsvorgang

So beheben Sie den Fehler beim MySQL-Transaktions...

So verwenden Sie die asynchrone Anforderungs-API von Axios in Vue

Inhaltsverzeichnis Einrichten einer einfachen HTT...

Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7

Es gibt viele Unterschiede zwischen IE6 und IE7 in...

CentOS7 64-Bit-Installation MySQL Grafik-Tutorial

Voraussetzungen für die Installation von MySQL: I...

Eine kurze Erläuterung des zugrunde liegenden Prinzips von MySQL Join

Inhaltsverzeichnis Join-Algorithmus Der Unterschi...

Alibaba Cloud Ubuntu 16.04 baut IPSec-Dienst auf

Einführung in IPSec IPSec (Internet Protocol Secu...

Detaillierte Erklärung der Docker Compose-Verwendung

Inhaltsverzeichnis Docker Compose-Nutzungsszenari...

Zusammenfassung der MySQL-Sperrwissenspunkte

Das Konzept des Schlosses ①. Im wirklichen Leben ...

Anfänger lernen einige HTML-Tags (3)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

Zusammenfassung der Erfahrungen mit der Web-Frontend-Entwicklung

XML-Dateien sollten so weit wie möglich in UTF-8 ...

Hinweise zur Speicherverwaltung von Linux-Kernel-Gerätetreibern

/********************** * Linux-Speicherverwaltun...