weapp mark

Markieren

Dies ist ein reines Unterhaltungs- und Lernprojekt. Ich zeichne gelegentlich die Probleme und Ideen auf, die während der Entwicklung auftreten, und aktualisiere sie von Zeit zu Zeit. Wenn Sie Vorschläge haben, teilen Sie mir diese bitte mit. Das Projekt verfügt über eigene gekapselte Komponenten, die in der Projektstruktur eingesehen werden können.

Alle Film- und Fernsehdaten werden von Douban API bereitgestellt. Derzeit ist keine kostenlose Douban-Suchschnittstelle verfügbar. Die von mir bereitgestellte Schnittstelle kann nicht ohne Registrierung zum WeChat-Backend hinzugefügt werden. Die persönlichen Entwicklungsfunktionen des Miniprogramms sind zu begrenzt und können nicht vollständig gestartet werden. Wenn Sie möchten, können Sie das Projekt klonen und selbst ausführen.

? Scan-Erfahrung

? Zweige

1. main - Mit der WeChat-Miniprogramm-Cloud-Entwicklung kann ein komplettes Miniprogramm ohne Hintergrund entwickelt werden.
2. Master – Hintergrunddienst wird vom LeanCloud-Clouddienst unterstützt.
3. cdn-ui – Es gibt keine Unterstützung für Hintergrunddienste und alle statischen JSON-Dateien persönlicher Blogs werden mithilfe von HTTP-Anfragen erstellt.

Online-Mindmap

Dinge zu beachten:

Um eine benutzerdefinierte Komponentenkomponente verwenden zu können, muss die Basisversionsbibliothek des Miniprogramms höher als 1.6.3 sein.

Um wxParse verwenden zu können, muss die Basisversionsbibliothek des Miniprogramms 1.6.6 oder höher sein.

Einfache bidirektionale Bindung von Miniprogrammen, Miniprogramm-Basisversionsbibliothek 2.9.3 und höher

? Merkmale

• Die Cloud-Funktion implementiert die WeChat-Anmeldung
• Mit der Cloud-Funktion geplante Aufgaben realisieren Tageskarten
• Die Aggregationsabfrage der Cloud-Funktion realisiert die Kartensammlung
• Mehrspaltiges Rastertabellenlayout
• Das Rasterlayout implementiert einen Wasserfallfluss
• Die Cloud-Funktion crawlt GitHub Trending
• Informationen zur Audiowiedergabe im Hintergrund der Seite
• Verwenden Sie Vorlage bzw. Komponente, um öffentliche Komponenten zu implementieren
• CSS3-Eigenschaftsanimation

? Verhaltenskodex

Nach langer Zeit habe ich vergessen, was die Spezifikationen, die ich zuvor für mich selbst festgelegt habe, dazu geführt haben, dass der Code sehr inkonsistent ist. Kann ich die Projektspezifikationen für mich selbst sichern?

CODE_OF_CONDUCT.md

? Laufen

Klonen Sie dieses Projekt und öffnen Sie mit dem WeChat Web Development Tool das Stammverzeichnis des Projekts

Abhängigkeiten installieren

yarn # or npm install

Menüleisten -Tools -> NPM erstellen

Cloud-Entwicklungsumgebung

Synchronisieren Sie nach dem Öffnen der Cloud-Entwicklungsumgebung das Projekt /cloudfunctions/ mit der Cloud (siehe Initialisierung der Cloud-Entwicklungsumgebung) und ändern Sie app.js

 wx . cloud . init ( {
  traceUser : true ,
  env : 'dev-oucwt' // 此处替换为你自己的云环境 ID
} ) ;

Hinweis: Das Debuggen muss aktiviert sein, wenn Sie die Entwicklungsumgebung auf einem realen Computer in der Vorschau anzeigen

Schein-API

Informationen zum Import und Export finden Sie in der offiziellen Dokumentation API Mock/Rules sowie zum Importieren von mock/mock.config.json. Die von Entwicklungstools bereitgestellte Mock-Funktion unterstützt derzeit keine mobile Vorschau.

Hinweis: Wenn Sie keine AppID haben, können Sie die Daten möglicherweise nicht sehen und auf Ihrem Telefon nicht in der Vorschau anzeigen. Entwicklungstools müssen die Überprüfung sicherer Domänennamen deaktivieren. Symbolleiste --> Details --> Projekteinstellungen --> Aktivieren Sie Sichere Domänennamen nicht überprüfen... und HTTPS-Zertifikate .

?NotizenNotizen

Vercel hostet Next, um die GitHub Trending API zu implementieren

Mini-Programm verwendet IconFont

Fall einer Cloud-Entwicklungszuordnungstabelle (Sammlung).

Gedanken beim Schreiben eines Projekts

Beachten Sie beim Schreiben

Mini-Programm verwendet externe Schriftarten

Miniprogramm-Implementierung mit benutzerdefinierter Bewertungskomponente und Vorlage (Genauigkeit 0,1)

Benutzerdefinierte Bewertungskomponente für Miniprogramme – Komponentenimplementierung (Genauigkeit 0,1)

?StrukturStruktur

 ├── apis
├── assets
├── components  组件化 Component
│    ├── cover-page 可下拉关闭的半屏组件
│    ├── pre-image 图片预加载
│    ├── rating 评分
│    └── tabs
├── cloudfunctions
├── pages
│    └── common  模板 template
│        ├── actionsheet 操作菜单
│        ├── cell 列表单元
│        ├── dropmenu 下拉菜单
│        ├── loading 加载/加载更多
│        ├── rating  评分
│        ├── share 底部分享菜单
│        ├── wxParse  富文本、HTML 和 MD 解析，小程序基础版本库 1.6.6 及以上
│        └── component.js  wux 针对 template 的组件化，写得挺好，借鉴一下
├── style
│    ├── weui.wxss
│    ├── animate.wxss CSS 动画
│    └── font-awesome.min.wxss Font Awesome 字体图标
├── utils
│    └── wxCloud.js 云函数二次封装
├── app.js
├── app.json
└── app.wxss

Schmerzpunkte

• Miniprogramme unterstützen keine globalen Komponenten und erfordern die Einführung von Komponenten auf jeder Seite. Zum Beispiel das Anpassen des globalen Eingabeaufforderungsfelds

? Referenz

1. WeChat offizieller UI-Stil weui-wxss
2. Rich-Text-, HTML- und Markdown-Analyse wxParse
3. Benutzerdefinierte Komponente WUX für Vorlage
4. Der Cloud-Service LeanCloud bietet Hintergrundunterstützung
5. Cloud-Service-Entwicklungsumgebung (offiziell)
6. Mini-Programmlösung (offiziell)