Informations essentielles : explication détaillée des points clés des documents de développement de mini-programmes et des directives de conception

Cet article fournit principalement une explication détaillée des documents de développement et des directives de conception officiellement publiés par WeChat :

Document de développement de mini-programmes

Une introduction générale à la méthode de développement de mini-programmes, et fournit un exemple officiel. Si vous êtes un développeur invité à en faire l'expérience, vous pouvez scanner le code pour découvrir le mini programme.

Guide de conception de mini-programmes

Les réglementations sur les spécifications de conception de mini-programmes sont assez complètes, de l'expérience utilisateur au style des éléments en passant par la mise en page. Cela reflète l'accent mis par WeChat sur les petits programmes et ses énormes capacités. Nous craignons que si nous les ouvrons de manière imprudente sans restrictions, cela entraînera une grave fragmentation des produits.

Ensuite, nous commençons à présenter le contenu spécifique des deux documents.

1. Document de développement du mini programme

Il est mentionné au début du document :

prend en charge l'appel de l'API native de WeChat, qui peut facilement activer les fonctionnalités fournies par WeChat, tels que l'acquisition de messages d'utilisateurs, le stockage local, les fonctions de paiement, etc.

En fait, plusieurs des fonctions répertoriées ici peuvent être implémentées lors du développement précédent d'un compte public. Pour nous, le point clé de cette phrase est "natif" - nous pouvons essentiellement juger que des composants tels que les barres de navigation et les boutons sont en fait convertis en composants natifs via la couche intermédiaire de WeChat, ce qui améliorera efficacement la vitesse de rendu et le fonctionnement du page Efficacité, offrant une expérience plus proche de l’application native.

Le programme de démonstration présente plusieurs nouveaux composants, tels que des listes déroulantes, des barres de navigation, etc. Étant donné que le mini-programme fournit également des outils de langage combinatoire qui sont fondamentalement similaires au HTML et au CSS, nous ne sommes pas surpris par les nouveaux composants. Tant que vous y pensez, les développeurs devraient être en mesure d'implémenter davantage de composants grâce aux outils de développement fournis par WeChat.

2. Directives de conception des mini-programmes

Les spécifications de conception de WeChat sont cette fois plus spécifiques et approfondies. Il n'est pas clair si le responsable stipulera que la conception doit être conforme aux spécifications de WeChat, sinon, il ne sera pas mis dans les rayons, mais personnellement, je pense qu'à mesure que l'écosystème mûrit, il n'est pas impossible de suivre le style de gestion strict de WeChat.

Mais d'un autre point de vue, WeChat fournit un langage de définition de style appelé WXSS (CSS en est un sous-ensemble), qui offre aux utilisateurs de très fortes capacités de personnalisation de style, même si les spécifications de conception sont restreintes. être trop rigide non plus.

1. Mise à jour de WeUI

Avec de nouveaux styles et composants de conception, le cadre d'interface utilisateur frontal officiel de WeChat, WeUI, a également reçu une mise à jour majeure et dispose d'un nom de domaine io indépendant : https : //weui.io.

Cette mise à jour fournit également :

Bibliothèque de contrôle de conception de croquis : https://github.com/weui/weui-...

Photoshop bibliothèque de contrôle de conception : https://wximg.gtimg.com/shake...

En fournissant des fichiers sources de conception, les concepteurs peuvent participer plus facilement au processus de mini-programmation WeChat.

Afin d'obtenir une conception plus cohérente, le dernier fichier source de conception fournit également les fichiers de polices correspondants. Les polices chinoises utilisent Pingfang (iOS) et Siyuan Heidi (Android), et les polices anglaises sont SF UI Display (iOS) et Robot (Android).

2. Spécifications de l'expérience utilisateur

Les spécifications de l'expérience utilisateur sont également partiellement définies dans le document. Ce qui est bon et ce qui est mauvais sont expliqués. L'expérience de lecture du document est acceptable.

Certaines caractéristiques visuelles importantes des mini-programmes peuvent être aperçues à partir des spécifications de conception :

3. Spécifications de la hiérarchie

Bien que la hiérarchie de WeChat soit simple et n'ait pas d'animations natives sympas, Mais cette fois, la spécification au niveau de la page me rappelle encore la sensation incroyable ressentie lors du lancement initial de Google Material Design.

Semblables à WeChat lui-même, les 4 niveaux des mini-programmes WeChat sont faciles à comprendre :

Plus d'informations : Explication détaillée des points clés des documents de développement de mini-programmes et des directives de conception Pour les articles connexes. , veuillez faire attention au site Web PHP chinois !