Einführung in die WeChat Mini-Programmentwicklung

1. Was ist das WeChat Mini-Programm:

Um auf das Thema zurückzukommen: Was ist das Wesentliche des WeChat Mini-Programms? Persönlich verstehe ich, dass das Wesentliche von WeChat-Miniprogrammen immer noch eine Reihe von Front-End-Frameworks ist. Basierend auf der ursprünglichen h5-Seite eines Drittanbieters kann das WeChat-Team h5 nur verwenden, um Funktionen zu implementieren, die nativ in WeChat implementiert werden können B. das Hochladen von Bildern usw. Anschließend übernehmen wir den offenen Teil der API von jsbridge, um Entwicklern die Arbeit zu erleichtern. Als großer Hersteller wird WeChat jedoch definitiv nicht nur einen Teil der jsbridge-API öffnen. Übrigens hat WeChat ein eigenes MVVM-Framework wie Vue und React implementiert, das das aktuelle WeChat-Applet darstellt. Das offizielle Dokument beschreibt dies: Das Framework stellt seine eigene Ansichtsschicht-Beschreibungssprache WXML und WXSS sowie ein JavaScript-basiertes Logikschicht-Framework bereit und stellt Datenübertragungs- und Ereignissysteme zwischen der Ansichtsschicht und der Logik bereit Ebene, sodass sich Entwickler problemlos auf Daten und Logik konzentrieren können.

Im Wesentlichen handelt es sich immer noch um ein Front-End-Framework. Der Code wird schließlich in ein JavaScript gepackt und ausgeführt, wenn das Miniprogramm gestartet wird, bis das Miniprogramm zerstört wird. Die Vorlagensyntax ähnelt Vue und ähnelt nativen benutzerdefinierten Tags. Datenbindung und Rendering haben eine ähnliche Syntax wie vue, beginnen jedoch mit wx: (vue verwendet v: als Bezeichner). Das Ereignissystem definiert sein eigenes Ereignissystem wie „React“.

2. WeChat-Betriebsumgebung:

WeChat-Applet läuft auf drei Terminals: iOS, Android und Entwicklertools zum Debuggen

Auf iOS ist der Javascript-Code des Miniprogramm läuft in JavaScriptCore

Auf Android wird der Javascript-Code des Miniprogramms durch den X5-Kernel geparst

Auf dem Entwicklungstool wird das Miniprogramm Der Javascript-Code wird in nwjs (Chrome-Kernel) ausgeführt

Die Skriptlogik der Seite wird in JsCore ausgeführt. JsCore ist eine Umgebung ohne Fensterobjekte, sodass BOM-Objekte wie Fenster nicht in Skripten verwendet werden können. Daher können Bibliotheken wie jquery und zepto, die DOM-Objekte über Fenster oder Dokumente abrufen, nicht verwendet werden.

3. Verzeichnisstruktur:

Das Applet enthält eine App, die das Gesamtprogramm beschreibt, und mehrere Seiten, die die jeweiligen Seiten beschreiben.

Der Hauptteil eines kleinen Programms besteht aus drei Dateien, die wie folgt im Stammverzeichnis des Projekts abgelegt werden müssen:

logischer Teil von app.js , also globale Variablen oder Methoden

öffentliche Konfiguration von app.json, einschließlich Seitenkonfiguration usw., Einstellungen der oberen und unteren Registerkarte, Hintergrundfarbe usw.

Das öffentliche Stylesheet app.wxss kann durch bestimmte Seitenstile überschrieben werden.

app.js-Code (Code aus der offiziellen WeChat-Demo) und Kommentare lauten wie folgt:

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" && cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

Spezifisch Seiten enthalten im Allgemeinen die folgenden Dateien (ähnlich wie globale Dateien, jedoch nur für Funktionen auf dieser Seite):

.js Die Seitenlogik unterscheidet sich nicht von js

.wxml Die Seite Struktur entspricht HTML, es werden jedoch viele benutzerdefinierte Tags angewendet.

.wxss-Seiten-Stylesheet entspricht CSS-Datei, Priorität ist höher als appapp.wxss, CSS-Schreibmethode wird nicht vollständig unterstützt

.json-Seitenkonfiguration gibt den Titel und andere Elemente einer bestimmten Seite an

Um Entwicklern die Reduzierung von Konfigurationselementen zu erleichtern, ist festgelegt, dass die vier Dateien, die die Seite beschreiben, dasselbe haben müssen Pfad und Dateiname.

Mit anderen Worten, wir müssen nicht die js- oder wxss-Datei angeben, die einer bestimmten Seite entspricht, wir müssen nur den Pfad und den Dateinamen beibehalten.

4. Vorlagensprache und Ereignissystem

1): Die Vorlagensyntax ähnelt Vue und ähnelt nativen benutzerdefinierten Tags. Datenbindung und -rendering ähneln der Syntax von vue, beginnen jedoch mit wx: (vue verwendet v: als Bezeichner) ​​

/**
* 类似vue的条件渲染语法，熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

2): Ereignissystem

Das Ereignissystem reagiert ähnlich: Definiert ein eigenes Ereignissystem. Enthält eine Reihe gängiger Ereignistypen:

touchstart Die Fingerberührungsaktion wird gestartet.

touchmove Der Finger bewegt sich nach der Berührung.

touchcancel Die Fingerberührungsaktion wird unterbrochen, z. B. wenn sie eingeht Anruferinnerung, Popup-Fenster

Touchend Die Fingerberührungsaktion endet

Tippen Sie sofort nach der Fingerberührung auf „Verlassen“

Langes Tippen Nach der Fingerberührung verlassen Sie den Vorgang nach mehr als 350 ms

Bindungsmethode: Ereignisbindung Die Schreibmethode ist dieselbe wie das Attribut der Komponente in Form von Schlüssel + Wert:

beginnt mit bind oder Catch und folgt dann dem Ereignistyp , wie z. B. bindtap Catchtouchstart,

value ist eine Zeichenfolge und muss eine Funktion mit demselben Namen auf der entsprechenden Seite definieren. Andernfalls wird beim Auslösen des Ereignisses ein Fehler gemeldet.

Die Bindung von Bindungsereignissen verhindert nicht, dass sprudelnde Ereignisse nach oben sprudeln, und die Bindung von Fangereignissen kann verhindern, dass sprudelnde Ereignisse nach oben sprudeln. Zum Beispiel:

/**
*bind/catch +事件类型，两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

3): Ereignisobjekt: einschließlich Basisereignisobjekt BaseEvent, benutzerdefiniertes Ereignisobjekt CustomEvent, Berührungsereignisobjekt TouchEvent usw.

5. Vor- und Nachteile:

1): Vorteile

1. Bereitstellung entsprechender jsbridge-ähnlicher Unterstützung, wodurch bestimmte Funktionen komfortabler werden

2. Es handelt sich im Wesentlichen um das Front-End-Framework von mvvm, das den Betrieb vereinfacht.

3. Bietet eine relativ ausgereifte Komponentenbibliothek, die bequemer zu erstellen ist

4. Basierend auf der WeChat-App werden die Entwicklungskosten reduziert

5. Unterstützung Modularisierung

2): Nachteile

1. Da das Framework nicht im Browser läuft, können js-bezogene Stücklistenmethoden nicht verwendet werden. Wie Dokument, Fenster usw. Sie können jedoch das DOM-Objekt abrufen, das dem aktuellen Ereignis entspricht. Im Vergleich zu React wird die Verwendung von Dom-, JQ-, Zepto- und anderen Tool-Bibliotheken immer noch nicht empfohlen.

2 Es verfügt über eine eigene Syntax, die jedoch Lernzeit erfordert Die Lernkurve ist nicht steil

3. Die direkte Einführung von node_modules wird derzeit nicht unterstützt. Wenn Entwickler node_modules verwenden müssen, wird empfohlen, den entsprechenden Code in das Verzeichnis des Miniprogramms zu kopieren ist einschränkender und erfordert viel manuelle Arbeit

Das obige ist der detaillierte Inhalt vonEinführung in die WeChat Mini-Programmentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!