Persönlicher Mini-Programm-Anwendungsentwicklungsleitfaden

Miniprogramme sind von großen Plattformen wie Alipay, WeChat, Toutiao und Baidu abhängig. Die Plattform bietet entsprechenden technischen Support und Benutzerumgebung. Für einzelne Entwickler ist dies recht praktisch. Es verfügt über Traffic-Attribute und ist leicht zu verbreiten.

Bequeme Entwicklung

---

Ich habe kürzlich an meinem eigenen kleinen Programm gearbeitet, deshalb werde ich es in diesem Artikel zusammenfassen. Wenn Sie bereits ein kleines Programm entwickelt haben, müssen Sie diesen Artikel nicht lesen.

Die Entwicklung von Miniprogrammen ist sehr praktisch. Mit offiziellen Dokumenten, der Dokumentation zum Miniprogramm von WeChat und der Dokumentation zum Alipay-Miniprogramm können Sie es nur zur Anzeige ausführen Sie müssen es nur nach der Entwicklung hochladen und auf die Überprüfung warten. Mit ein paar Front-End-Grundlagen können Sie Ihr eigenes kleines Programm entwickeln und Schüler mit Ideen können in die Tat umsetzen.

Wenn Sie während der Entwicklung auf Probleme stoßen, können Sie auch Hilfe in der

Mini Program Community, der WeChat Mini Program Community, suchen.

Dies ist keine offizielle Aktion. Wenn Sie Ihre eigene Anwendung entwickeln möchten, ist ein Miniprogramm eine Lösung, mit der Sie schnell beginnen können. Es ist einfach zu entwickeln, schnell zu veröffentlichen und verfügt über eine eigene Verbreitungsfunktion.

Ich werde das WeChat-Applet auswählen, um es unten zu erklären.

WeChat native Miniprogramm-Entwicklung

<!-- 项目目录结构 -->

|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir           
|   |—— index               index页面
|   |  |—— index.js         index.js- js逻辑文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml页面结构
|   |  |—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json     项目配置
|—— sitemap.json            爬虫文件

Importieren Sie das Projekt in das Miniprogramm-Entwicklungstool und Sie können mit der Entwicklung beginnen. Um eine Seite hinzuzufügen, fügen Sie ein neues Dateiverzeichnis direkt zum Seitenverzeichnis hinzu. Spezifische Details finden Sie im

WeChat Mini-Programmdokument

Syntaxunterstützung:

• Die neueste Versionsbibliothek unterstützt derzeit Es6/Es7, asynchron /await and Promise;

• Das Entwicklungstool konvertiert den Code in die Es5-Syntax, um eine Stilanpassung für verschiedene Modelle sicherzustellen Die Syntax ähnelt Vue und React.

• Komponentenunterstützung:

bietet Vorlagenunterstützung,

WeChat-Applet-Vorlagenvorlage

;

• Unterstützung für benutzerdefinierte Komponenten, es gibt einen Lebenszyklus innerhalb der Komponente, Benutzerdefinierte Komponente für Komponenten

  ; Unterstützung:

• Sie können gekapselte systemeigene Methoden wie Bluetooth, Netzwerkinformationen, Code-Scanning und andere API-Methoden aufrufen wie zum Beispiel: Speicherung, Anforderung, Animation, Leinwand usw. Weitere Informationen finden Sie unter WeChat Mini Program API

  ; Mini-Programme, natürlich können Sie auch Frameworks verwenden. Ich persönlich finde Taro Das Framework ist gut und unterstützt die Entwicklung kleiner Programme mit mehreren Terminals

Taro-Entwicklung

• Taro
Entwicklungsdokumentation, Taro unterstützt die Multi-Terminal-Entwicklung, einschließlich WeChat/Baidu/Alipay/Toutiao Mini Program, H5, React-Native. Derzeit habe ich nur das WeChat Mini Program und das Alipay Mini Program verwendet und entwickelt , H5, und habe die anderen nicht ausprobiert.

• |—— config                              开发配置文件
  |—— dist                                目标文件目录
  |—— src                                 开发目录
  |   |—— actions                         redux action文件
  |   |—— constants                       常量文件
  |   |—— pages                           page页面目录
          ......more dir
  |   |   |—— index
  |   |   |   |—— index.scss
  |   |   |   |—— index.txs
  |   |—— reducers                        redux reducers文件
  |   |—— store                           redux store文件
  |   |—— app.scss                        app全局样式
  |   |—— app.tsx                         app全局js
  |   |—— index.html                      html文件
  |—— .editorconfig                       editor配置文件         
  |—— .eslintrc                           eslint配置文件
  |—— global.d.ts                         global配置
  |—— tsconfig.json                       ts配置文件
  |—— package.json
  |—— project.config.json
  |—— readme.md

  Grammatikunterstützung:

  ts-Grammatikunterstützung

  React-Grammatikspezifikation; >Unterstützt die Verwendung des CSS-Precompilers;

  ---

  Es6/Es7-Syntaxunterstützung, Sie können diese in der Konfigurationskonfiguration konfigurieren Komponentenunterstützung:

  React-Komponentenentwicklung, wird aber schließlich in ein natives Applet kompiliert;
  npm-Paket :
  Unterstützt die NPM-/Garnverwaltung
  Sie können Redux für die Zustandsverwaltung verwenden; >API:
  Kapseln Sie die Miniprogramm-API und die H5-API einmal, was bequemer ist.
  • react + ts + npm Paket

    , im Grunde der normale Rhythmus der Front-End-Entwicklung. Unabhängig davon, welches kleine Programm Sie entwickeln, müssen Sie nur den entsprechenden Befehl ausführen und gleichzeitig die dist-Verzeichnisdatei in das Entwicklungstool importieren, um den Effekt zu sehen.

  Taro- und native Miniprogramme

  • Native Miniprogramme: Schneller Einstieg für Studenten, die mit der Front-End-Entwicklung vertraut sind kann sofort loslegen. Es gibt technische Hürden. Programmierung für

  • WeChat-Applet-Dokument

  .

  Taro-Entwicklung: Reaktionssyntaxspezifikation, Reaktionskomponentenentwicklung, TS-Syntaxunterstützung und Redux-Unterstützung. Sehr empfehlenswert für Studierende, die eine Vorliebe für React haben. Wenn Sie gerne reagieren, empfiehlt es sich, Taro für die Entwicklung zu verwenden. (Einfach für die Zusammenarbeit im Team).

  Probleme bei der Entwicklung des Mini-Programms

  WeChat Mini-ProgrammKeine Cookies verwenden

  WeChat Mini-Programm Nicht-HTTPS-Domänennamen werden nicht unterstützt

  WeChat Mini-ProgrammDie Freigabe-API ist ein synchroner Vorgang und Erfolg und Misserfolg von Rückrufen können nicht überwacht werden

  WeChat Mini ProgrammDie APIs von wx.setStorageSync und wx.getStorageSync melden häufig Fehler

  WeChat-AppletDie 1-Millionen-Grenze der setData-Daten kann durch Datenaufteilung gelöst werden

  WeChat Mini-Programm Das Hauptpaketlimit beträgt 2 MB, was es unmöglich macht, zu viele externe Dateien einzuführen (die Verwendung von Taro ist auf npm-Pakete angewiesen)

  WeChat Mini-ProgrammWeChat Entwicklungstools beanspruchen zu viel CPU.

  Natürlich beschränken sich die Probleme definitiv nicht darauf, es gibt auch Probleme wie native Komponenten, APIs und offizielle Plug-ins von WeChat-Miniprogrammen usw. Ich werde hier nicht auf Details eingehen, aber für Studenten, die ihre eigenen Miniprogramme erstellen möchten, reichen diese im Grunde aus.

  Aber einige Leute fragen sich vielleicht: Wurde der Rahmen nicht noch nicht besprochen? Wenn Sie Tora zum Entwickeln kleiner Programme verwenden, verwenden Sie tatsächlich nur eine andere Syntax zum Schreiben kleiner Programme. Schließlich konvertiert das Befehlstool die Datei in das Dateiformat des nativen kleinen Programms.

  Persönliche Anwendung

  Ganz gleich, mit welcher Methode Sie Ihre persönliche Anwendung entwickeln, Sie werden irgendwann zum Produkt selbst zurückkehren. Das ultimative Ziel ist der Einsatz von Technologie, um die persönliche Bewerbung in Ihrem Kopf zu vervollständigen und den Benutzern die Bewerbung zur Verfügung zu stellen. (Technologie ist nur ein Mittel, das Produkt ist das Ziel) Allerdings verwende ich persönlich Taro, um es zu entwickeln, was ein Vorgeschmack darauf ist.

  Kein Unsinn mehr, ich hoffe, der Quellcode des persönlichen Projekts kann jedem helfen

  github: wxSapp persönlicher Applet-Quellcode
  

  Empfohlenes Tutorial : 《WeChat Mini-Programm》

  Das obige ist der detaillierte Inhalt vonPersönlicher Mini-Programm-Anwendungsentwicklungsleitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!