Comment postuler au didacticiel du programme WeChat Mini pour créer un mini programme WeChat à partir de zéro

Après près d'un an d'attente, le mini-programme WeChat a enfin été officiellement publié. Pour les développeurs, vous pouvez postuler pour créer votre propre mini-programme à l'avenir. Alors, comment postuler au mini-programme WeChat ? Ci-dessous, l'éditeur de "Computer Pepsi Network" partagera en détail un didacticiel de développement pratique pour créer une applet WeChat à partir de zéro. J'espère que les étapes seront utiles aux premiers développeurs.

Préparation avant de postuler au programme WeChat Mini :

Tout d'abord, vous devez créer un compte Mini Programme. Vous devez vous inscrire avec une adresse e-mail qui n'a pas été enregistrée pour un compte public. Le processus d’inscription nécessite de nombreuses certifications, ce qui est assez fastidieux. Si vous testez simplement le terrain pour le moment et que vous n'avez pas l'intention de publier, il vous suffit de compléter les informations de base et il n'est pas nécessaire de compléter l'authentification WeChat.

Après cela, vous pouvez vous connecter avec le compte enregistré sur la plateforme publique.

Ensuite, cliquez sur Paramètres dans la liste à gauche de la page principale, puis sélectionnez Paramètres de développement sur la page des paramètres, et vous pourrez voir l'AppID. L'AppID peut être utilisé pour s'inscrire dans l'outil de développement et utiliser les fonctionnalités avancées de l'outil de développement. Vous pouvez télécharger des outils de développement sur le site officiel.

Démarrez le projet :

Ouvrez les outils de développement, sélectionnez l'option mini-programme, puis cliquez directement sur le bouton "Ajouter un projet". À cette étape, nous pouvons remplir l'AppID que nous venons d'utiliser lors de l'inscription.

Si le fichier dans le répertoire du projet est un dossier vide, il vous sera demandé si vous souhaitez créer un projet à démarrage rapide.

Sélectionnez "Oui", les outils de développement nous aideront à générer une simple démo dans le répertoire de développement.

Cette Démo a le cadre général d'un mini programme complet.

1. Framework

Jetons d'abord un coup d'œil aux répertoires inclus dans la démo officiellement fournie :

app.js : logique de l'applet, cycle de vie, variables globales.

app.json : les paramètres publics du mini-programme, la couleur de la barre de navigation, etc., ne peuvent pas être commentés.

app.wxss : Mini programme de style public, similaire au CSS.

La structure des pages du mini programme est similaire à celle-ci :

Chaque page du mini programme est composée de quatre fichiers de suffixe différents portant le même nom dans le même chemin, tels que : index.js, index .wxml, index .wxss, index.json

Le chemin et le nom du fichier de page de chaque page de l'applet WeChat doivent être écrits dans les pages de app.json, et la première page du tableau pages est la page d'accueil de l'applet.

Ces quatre fichiers peuvent être divisés en trois parties selon leurs fonctions :

Configuration : fichier json

Couche logique : fichier js

Couche vue : Fichier wxss.wxml

Sur iOS, le code logique de l'applet s'exécute en JavaScriptCore, tandis que sur Android, cette tâche est réalisée par le noyau X5.

Sur les outils de développement, le code JavaScript du mini programme s'exécute en NW.js (noyau Chrome). Cela conduit également à des différences entre les effets sur les outils de développement et les effets réels.

2. Composants

WeChat fournit de nombreux composants, qui sont principalement divisés en huit types :

Ceux-ci incluent des composants couramment utilisés tels que la vue, la vue déroulante, le bouton, le formulaire. , etc. Le composant fournit également une carte. Le composant mapcanvas

appartient principalement à la couche de vue et utilise WXML pour la mise en page structurelle, similaire au HTML. Les styles sont définis et modifiés via WXSS, et leur syntaxe et leur utilisation sont similaires à celles du CSS.

Exemple de syntaxe d'utilisation des composants :

<><>

API

Réseau

Médias

Données

Localisation

Appareil

Interface

Interface de développement

L'interface de requête réseau contient des requêtes HTTPS ordinaires, elle prend en charge le téléchargement, le téléchargement et Socket, qui répondent essentiellement aux besoins réseau dont nous avons besoin en développement.

Ces API appartiennent à la couche logique et sont écrites dans des fichiers logiques JS.

Exemple d'utilisation :

wx.getLocation({ type : 'wgs84', succès : fonction(res) { var latitude = res.latitude var longitude = res.longitude var speed = res. speed var precision = res.accuracy } })

Vous pouvez accéder à la documentation officielle – API pour voir comment utiliser d'autres API.

Compiler et exécuter

1. Débogage du simulateur

Nous pouvons utiliser le simulateur pour visualiser l'effet du mini programme dans les outils de développement fournis par WeChat.

Nous avons mentionné précédemment que le système d'exploitation sous-jacent du mini-programme est différent, ce qui entraîne également que l'effet sur le simulateur est quelque peu différent de celui sur le téléphone mobile.

2. Débogage de la machine réelle

Dans la barre d'options à gauche, sélectionnez l'élément, puis cliquez sur Aperçu. Un code QR sera généré avec le compte WeChat de l'administrateur et vous. peut le déboguer sur la vraie machine. Voir l'effet réel sur la machine.

Combat réel : applet en cours d'exécution

Capture d'écran d'une vraie machine en cours d'exécution (fonctionnant sur iPhone 7, version WeChat : 6.3.30) :

Implémentez d'abord une minuterie pour le chronométrage et passez wx.getLocation obtient les coordonnées, stocke les coordonnées obtenues dans un tableau, obtient le kilométrage via les coordonnées à intervalles réguliers, accumule le kilométrage total et connecte également les points de coordonnées. Problèmes :

Comme il n'existe actuellement aucun moyen de tracer une ligne de connexion sur la carte, j'ai adopté la méthode consistant à coller un petit point rouge sur la carte pour montrer le chemin approximatif, ce qui est relativement approximatif ; 🎜>

Bien que les coordonnées de Mars de type GCJ02 dans l'API soient utilisées, les coordonnées obtenues sont similaires aux coordonnées internationales, et il existe encore des écarts.

J'ai mis tout le code sur GitHub. Vous pouvez le télécharger pour y jeter un œil ou le mettre en vedette en premier. Je ferai quelques mises à jour d'optimisation à l'avenir. Il ne s'agit plus que d'une démonstration d'apprentissage, tout le monde communique et apprend, et l'application réelle a besoin de davantage d'optimisation.

Pour plus d'articles sur la façon de postuler à un mini-programme WeChat et sur la façon de créer un mini-programme WeChat à partir de zéro, veuillez faire attention au site Web PHP chinois !