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
In diesem Artikel wird die Verwendung von js- und...
In diesem Artikel wird der detaillierte Vorgang z...
Der erste Schritt besteht darin, eine Software zur...
Konvertierung des Zeitformats von Montag auf Sonn...
Lassen Sie mich kurz das Funktionsszenario erklär...
1. Installieren Sie MySQL. Führen Sie den folgend...
Inhaltsverzeichnis 1. Das Konzept der Schließung ...
Im Linux-Umfeld möchten Sie prüfen, ob eine besti...
Zweck: Verschachtelte Verwendung von MySQL-Aggreg...
Die eigene Quelle von Ubuntu stammt aus China, da...
1. Überprüfen Sie den Linux-Festplattenstatus df ...
Voraussetzung: Speichern Sie die .frm- und .ibd-D...
Vue kapselt die Breadcrumb-Komponente zu Ihrer In...
1. Langsames Abfrageprotokoll 1.1 MySQL-Protokoll...
Was ist ein Speicherleck? Ein Speicherleck bedeut...