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:
|
>>: Aktivieren Sie den SSHD-Vorgang im Docker
So beheben Sie den Fehler beim MySQL-Transaktions...
Inhaltsverzeichnis Einrichten einer einfachen HTT...
Es gibt viele Unterschiede zwischen IE6 und IE7 in...
Erstellen Sie einen MySQL-Benutzer und autorisier...
Voraussetzungen für die Installation von MySQL: I...
Inhaltsverzeichnis Join-Algorithmus Der Unterschi...
Einführung in IPSec IPSec (Internet Protocol Secu...
Inhaltsverzeichnis Docker Compose-Nutzungsszenari...
Das Konzept des Schlosses ①. Im wirklichen Leben ...
Verwandte Artikel: Anfänger lernen einige HTML-Ta...
Vorwort Um den Unterschied zwischen dem Hinzufüge...
Inhaltsverzeichnis 1. Konfigurieren Sie zunächst ...
XML-Dateien sollten so weit wie möglich in UTF-8 ...
/********************** * Linux-Speicherverwaltun...
In diesem Artikel werden hauptsächlich die Konfig...