weapp mark

Marque

Il s'agit uniquement d'un projet de divertissement et d'apprentissage. J'enregistre occasionnellement les problèmes et les idées rencontrés lors du développement et je le mets à jour de temps en temps. Si vous avez des suggestions, n'hésitez pas à me le dire (problèmes). Le projet possède ses propres composants encapsulés, qui peuvent être visualisés dans la structure du projet.

Toutes les données cinématographiques et télévisuelles sont fournies par l'API Douban. À l'heure actuelle, aucune interface de recherche Douban gratuite n'est disponible. L'interface que j'ai fournie est déployée dans Vercel et ne peut pas être ajoutée au backend WeChat sans inscription. Le projet fournit également des données fictives à utiliser. Les fonctions de développement personnel du mini programme sont trop limitées et ne peuvent pas être pleinement lancées. Si vous le souhaitez, vous pouvez cloner le projet et l'exécuter vous-même.

? Expérience de numérisation

?

1. main - Grâce au développement cloud du mini-programme WeChat, un mini-programme complet peut être développé sans arrière-plan.
2. master - le service d'arrière-plan est pris en charge par le service cloud LeanCloud.
3. cdn-ui - Il n'y a pas de prise en charge du service en arrière-plan et tous les fichiers JSON statiques des blogs personnels sont créés à l'aide de requêtes HTTP.

Carte mentale en ligne

Choses à noter :

Pour utiliser un composant personnalisé Component, la bibliothèque de version de base du mini programme doit être supérieure à 1.6.3 ;

Pour utiliser wxParse, la bibliothèque de version de base du mini programme doit être 1.6.6 ou supérieure.

Liaison bidirectionnelle simple de mini-programmes, bibliothèque de versions de base de mini-programmes 2.9.3 et supérieures

? Caractéristiques

• La fonction Cloud implémente la connexion WeChat
• Les tâches planifiées de la fonction Cloud réalisent des cartes quotidiennes
• La requête d'agrégation de fonctions cloud réalise la collecte de cartes
• Disposition de tableau multi-colonnes en grille
• La disposition en grille implémente le flux en cascade
• La fonction Cloud explore GitHub Trending
• À propos de la lecture audio en arrière-plan de la page
• Utilisez respectivement le modèle et le composant pour implémenter les composants publics
• Animation des propriétés CSS3

? Code de conduite

Après un long moment, j'ai oublié quelles spécifications que je m'étais fixées auparavant ont rendu le code très incohérent. Puis-je sauvegarder les spécifications du projet pour moi-même ?

CODE_OF_CONDUCT.md

? Courir

Clonez ce projet et utilisez l'outil de développement Web WeChat pour ouvrir le répertoire racine du projet

Installer les dépendances

yarn # or npm install

Outils de la barre de menus -> Construire npm

Environnement de développement cloud

Après avoir ouvert l'environnement de développement cloud, synchronisez le projet /cloudfunctions/ avec le cloud (voir Initialisation de l'environnement de développement cloud) et modifiez app.js

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

Remarque : le débogage doit être activé lors de la prévisualisation de l'environnement de développement sur une machine réelle

API simulée

Reportez-vous à la documentation officielle de l'API Mock/Rules pour l'importation et l'exportation, et importez mock/mock.config.json. La fonctionnalité Mock fournie par les outils de développement ne prend actuellement pas en charge l'aperçu mobile.

Remarque : Si vous n'avez pas d'AppID, vous ne pourrez peut-être pas voir les données et ne pourrez pas les prévisualiser sur votre téléphone. Les outils de développement doivent désactiver la vérification des noms de domaine sécurisés Toolbar --> Détails --> Paramètres du projet --> Cocher Ne pas vérifier les noms de domaine sécurisés... et les certificats HTTPS .

?RemarquesRemarques

Vercel héberge Next pour implémenter l'API GitHub Trending

Le mini programme utilise IconFont

Cas de table (collection) d'association de développement cloud

Réflexions lors de l'écriture d'un projet

Remarque en écrivant

Le mini programme utilise des polices externes

Implémentation de modèles de composants de notation personnalisés de mini-programme (précision 0,1)

Composant de notation personnalisé du mini-programme - Implémentation du composant (précision 0,1)

?

 ├── 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

Points douloureux

• Les mini-programmes ne prennent pas en charge les composants globaux et nécessitent que les composants soient introduits sur chaque page. Comme la personnalisation de la boîte d'invite globale

? Référence

1. Style d'interface utilisateur officiel de WeChat weui-wxss
2. Analyse de texte enrichi, HTML et Markdown wxParse
3. Composant personnalisé wux pour le modèle
4. Le service cloud LeanCloud fournit une prise en charge en arrière-plan
5. Environnement de développement de services cloud (officiel)
6. Solution de mini-programme (officielle)