Ausführliche Erläuterung einfacher Beispiele für die Entwicklung kleiner Programme

In diesem Artikel werden hauptsächlich relevante Informationen zur einfachen Beispielanwendung des WeChat-Applets (Anwendungskonto) vorgestellt. Freunde, die es benötigen, können sich auf die

Demo-Vorschau

beziehen

Demovideo (Verkehrswarnung 2,64 MB)

GitHub Repo-Adresse

Lageradresse: github.com / zce/weapp-demo

Verwenden Sie die Schritte

, um das Repository lokal zu klonen:

bash $ git clone https://github.com/zce/weapp-demo.git weapp-douban -- Depth 1 $ cd weapp-douban

Öffnen Sie das WeChat Web Opener-Tool (Hinweis: muss 0.9 sein. 092300-Version)

muss die Version 0.9.092300 sein.

Es besteht keine Notwendigkeit für das sogenannte Cracken Das Internet gilt nur für die vorherige Version 0.9. Die neue offizielle Version muss nicht geknackt werden, muss nicht geknackt werden, muss nicht geknackt werden!

Download-Link (offizielle Version, mit Vertrauen herunterladen): https://pan.baidu.com/s/1qYld6Vi

wechat_web_devtools_0.9.092300_x64.exe (Windows 64 Bit)
wechat_web_devtools_0.9.092300_ia32.exe (Windows 32-bit)
wechat_web_devtools_0.9.092300.dmg (macOS)

1. Wählen Sie, ob Sie ein Element hinzufügen, ausfüllen oder auswählen möchten die entsprechenden Informationen

AppID: Klicken Sie unten rechts auf Keine AppID (ich bin nicht qualifiziert, es heißt, dass die 200 Orte dieses Mal von Xiaolong handverlesen wurden)
Projektname: Geben Sie ein, was Sie möchten, da es keine Bereitstellung erfordert, also spielt es keine Rolle
Projektverzeichnis: Wählen Sie den Ordner aus, den Sie gerade geklont haben
Klicken Sie, um ein Projekt hinzuzufügen

Frohes Neues Jahr und viel Glück

Sie können im WeChat Web Opener Tool codieren (oder Ihren bevorzugten Editor auswählen). )

1. Verwenden Sie die Schaltfläche „Neustart“ in der unteren linken Ecke, um die codierte Vorschau zu aktualisieren

2. Bash-Benutzer können schnell die für eine neue Komponente erforderlichen Dateien erstellen, indem sie den folgenden Befehl im Projektverzeichnis ausführen:

bash $ ./generate page 4505ef6a24d2ce25adb5f2c6b3e1fa20 # oder $ ./generate Component 2f3eb1b254cd5675086680703ba9a9cc

Der Rest ist kostenlos spielbar

Grundlegendes Tutorial zum WeChat-Applet (kontinuierlich

aktualisiert )

Erstellen Sie einen Projektordner und erstellen Sie die grundlegenden erforderlichen Dateien

app.js

项目主入口文件（用于创建应用程序对象）

// App函数是一个全局函数，用于创建应用程序对象
App({
 // ========== 全局数据对象（整个应用程序共享） ==========
 globalData: { ... },

 // ========== 应用程序全局方法 ==========
 method1 (p1, p2) { ... },
 method2 (p1, p2) { ... },

 // ========== 生命周期方法 ==========
 // 应用程序启动时触发一次
 onLaunch () { ... },

 // 当应用程序进入前台显示状态时触发
 onShow () { ... },

 // 当应用程序进入后台状态时触发
 onHide () { ... }
})

app.json

Projektkonfigurationsdeklarationsdatei (geben Sie einige Informationen des Projekts an, z. B.

NavigationBalkenstilfarbe usw.)

{
 // 当前程序是由哪些页面组成的（第一项默认为初始页面）
 // 所有使用到的组件或页面都必须在此体现
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#pages
 "pages": [ ... ],
 // 应用程序窗口设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#window
 "window": { ... },
 // 应用导航栏设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
 "tabBar": { ... },
 // 网络超时设置
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#networkTimeout
 "networkTimeout": {},
 // 是否在控制台输出调试信息
 // https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#debug
 "debug": true
}

app.wxss

[!Optional!] Globale Projektstildatei , der Inhalt folgt der CSS-Standardsyntax

Seitenkomponenten erstellen

Jede Jede Seitenkomponente ist außerdem in vier Dateien unterteilt:

1. Seiten- name.js

2. Seitenlogikdatei, die zur Steuerung und Datenverarbeitung des Seitenlebenszyklus verwendet wird

3. Fortsetzung folgt...

4. page-name.json

5. Legen Sie einige Konfigurationen fest, wenn Sie an der aktuellen Seite arbeiten

6. Hier kann die Fenstereinstellungen in app.json überschreiben

7. Das heißt, Sie können nur die im Fenster festgelegte Vertrautheit festlegen

8. Fortsetzung folgt. ..

9. page-name.wxml

10. wxml bezieht sich auf die Wei Xin Markup Language

11. wird verwendet, um die Struktur der Elemente auf der Seite zu definieren. Die Syntax

12. folgt der XML-Syntax, nicht der HTML-Syntax, nicht der HTML-Syntax, nicht der HTML-Syntax

13. Fortsetzung folgt...

14. page-name.wxss

15. wxml bezieht sich auf das Wei Xin Style Sheet

16. wird zum Definieren des Seitenstils verwendet

17. Syntax zur Befolgung der CSS-Syntax erweitert die grundlegende Verwendung und die Längeneinheiten von CSS (hauptsächlich rpx). reaktionsfähige Pixel)

[Verwandte Empfehlungen]

1

WeChat-Applet ist vollständiger Quellcode-Download

2 >Demo des WeChat-Miniprogramms: Nachahmung von NetEase Cloud Music

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung einfacher Beispiele für die Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!