GitChat Auteur: stylo pôle Nord au large de l'
original: remplir le trou comme le développement des micro-canaux: paiements de processus de développement web micro-lettres et les compétences nécessaires pour remplir la fosse
préoccupation numéro public micro-canal: « sujets technologiques GitChat pour » sérieux sur la technologie
[Ne manquez pas l'œuf à la fin de l'article]
En tant que père de WeChat, Zhang Xiaolong a sélectionné le petit programme à la main et a promu publiquement ses produits à plusieurs reprises. C'était la seule fois après WeChat. En raison de ce traitement préférentiel spécial, il est dit que la qualification de test interne a été déclenchée de 100w à 300w une fois le mini-programme lancé. Que ce soit vrai ou non, les attentes de l'équipe et du marché du mini-programme suffisent à elles seules à attirer notre attention. En tant que développeur, il est également très nécessaire d'apprendre et de comprendre les principes et processus de développement des petits programmes.
Si vous êtes prêt à développer de petits programmes, cet article arrive à temps. Si votre entreprise n'a pas besoin de s'impliquer dans les applets, vous pouvez également utiliser cet article pour faire une compréhension de base du développement des applets, en cas de besoins inattendus.
Cet article explique le processus de développement des applets à partir des trois aspects du développement frontal d'applet, du développement du serveur d'applet et de la publication et de la révision de l'applet.
1. Introduction et développement d'un petit programme frontal
Le développement de petits programmes implique un développement frontal et un développement principal. Le frontal fait référence à la partie visible sur le téléphone portable. Il est principalement responsable de la mise en page et de l'affichage de la page. Le backend fournit des données et des capacités de traitement professionnel, qui se réfèrent à ce que nous écrivons dans Interface API appelée par le frontal.
Enregistrez un compte
L'enregistrement de l'applet est relativement simple. Tout d'abord, connectez-vous à la plateforme de compte public WeChat: http://mp.weixin.qq.com et cliquez sur le bouton "S'inscrire maintenant" dans le coin supérieur droit.
Choisissez l'applet
Enregistrer l'applet
Lors de l'enregistrement de l'applet, la boîte aux lettres entrée ici doit être une boîte aux lettres inutilisée sur la plate-forme Tencent, sinon elle vous demandera que la boîte aux lettres a été utilisée. Notez que la plateforme Tencent mentionnée ici, comme la boîte aux lettres que vous utilisez pour enregistrer le compte public WeChat et la boîte aux lettres utilisée pour enregistrer le compte Penguin, n'est pas disponible.
Une fois l'inscription réussie, vous devez entrer dans la boîte aux lettres pour l'activer. Après l'activation, selon les exigences, sélectionnez le type d'application à enregistrer et à ouvrir.
Créer un projet
Afin de soutenir le développement de petits programmes, WeChat a officiellement développé un outil appelé WeChat Developer Tool. Cet outil était à l'origine utilisé pour aider les développeurs de comptes officiels WeChat dans le développement. Lorsque le programme WeChat Mini est lancé, les outils de développement WeChat sont mis à jour de manière synchrone. , Soutient également le développement de petits programmes. Étant donné que les pages et une partie de la syntaxe de l'applet sont entièrement compressées par WeChat, et que la compilation et la publication de l'applet ne peuvent être effectuées que dans l'outil de développement WeChat, l'outil de développement WeChat est donc devenu la majorité des développeurs d'applets. Outils de développement utilisés. Par rapport à d'autres outils de développement, la facilité d'utilisation des outils de développement WeChat est encore relativement médiocre, donc certaines personnes utilisent d'autres outils de développement pour le développement, n'utilisent que les outils de développement WeChat pour compiler et publier, bien que plus gênantes, mais l'efficacité s'est beaucoup améliorée L'outil recommandé pour la comparaison des prix est l'Aigrette domestique.
Adresse de téléchargement de l'outil de développement WeChat:
https: //mp.weixin.qq.com/debu ...
Cliquez simplement sur la police bleue "Developer Tools".
Après avoir installé l'outil de développement WeChat, la première fois que vous l'ouvrirez, vous serez invité à scanner le code QR. Il s'agit simplement d'une autorisation de développement. Tant que WeChat est lié au WeChat du développeur en arrière-plan de l'applet, la numérisation peut être effectuée. Connectez-vous à l'outil de développement après la numérisation.
Une fois la connexion établie, accédez à la page de la liste des projets.Si l'applet a déjà été ouverte, elle sera affichée dans une liste.
Cliquez sur "Ajouter un élément" pour accéder à la page Créer un mini programme.
L'APPID ici est l'authentification de l'autorité de développement de l'applet. S'il n'est pas renseigné, sélectionnez "No APPID" pour le développer, mais l'applet ne peut pas être libéré normalement. APPID peut être obtenu en arrière-plan de l'applet, comme le montre la figure:
Le nom de projet de l'applet peut être renseigné en fonction de votre projet réel et prend en charge le chinois et l'anglais.
Le répertoire du projet fait référence au répertoire de développement. Il vous suffit de pointer vers le répertoire de l'applet à développer. Cliquez sur OK et un nouveau projet d'applet est créé avec succès.
Structure d'ingénierie
Le projet d'applet nouvellement créé est illustré dans la figure:
Dans la figure ci-dessus, le bloc 1 est la barre de menus et les menus de fonctionnement des applets sont ici.
Edit: C'est aussi le mode par défaut, dans ce mode, vous pouvez éditer le code source de l'applet;
Compiler: dans ce mode, vous pouvez compiler et déboguer l'applet, et la sortie du journal de l'applet sera imprimée dans la zone de journal;
Projet: Dans ce mode, les petits programmes qui ont été développés ou qui peuvent être testés peuvent être emballés et publiés.
Le bloc 2 est la zone d'aperçu. L'affichage des pages de l'applet et l'interaction entre les pages sont tous ici. Cette applet est exactement la même que l'applet affichée sur le téléphone mobile lors de sa libération.
Le bloc 3 est la structure du code d'ingénierie, montrant tous les fichiers du projet et la relation entre les fichiers.
Le bloc 4 est la zone de code, et le développement code principalement dans cette zone.
Chaque applet WeChat aura trois fichiers d'entrée publics:
app.json: fichier de configuration, liste de routage de configuration, informations sur le programme, etc.
app.js: fichier d'entrée publique, logique Init au démarrage de l'applet.
app.wxss: fichier de style public, le style public est utilisé dans chaque vue.
Dans le même temps, il y aura également un dossier appelé pages, qui contient tous les fichiers de page front-end.
Fichier principal
Il existe quatre types de fichiers à l'extrémité avant de l'applet, js, json, wxml, wxss.
js: principalement chargé d'appeler l'interface principale pour l'interaction des données et le traitement de la logique de page;
json: principalement utilisé pour stocker du contenu de données, généralement moins utilisé;
wxml: équivalent à html, principalement utilisé pour afficher les informations de la page;
wxss: équivalent à css, fondamentalement cohérent avec la syntaxe css;
Comme indiqué:
Dans l'applet, chaque page doit créer un dossier, tel que la liste de la figure ci-dessus, les quatre fichiers ci-dessus doivent être créés sous ce dossier. Il convient de noter que les noms de fichier de ces quatre fichiers doivent être cohérents avec le dossier.
Méthodes courantes
L'applet WeChat elle-même n'a pas créé de nouveau langage de programmation, son essence est toujours h5, css, js, est la technologie frontale la plus basique. Par conséquent, le seuil technique des applets est bas et de nombreuses applets sont développées et lancées en une semaine.
Cependant, WeChat a fait une certaine encapsulation des trois technologies frontales ci-dessus, en utilisant wxml au lieu de h5, et les balises qu'il contient ont fait beaucoup d'encapsulation, comme le montre la figure:
Dans le même temps, l'encapsulation de CSS comme wxss a peu de changement.
Outre js, beaucoup de js dans WeChat sont encapsulés. Dans les petits programmes, ces méthodes js encapsulées sont appelées composants. Les plus couramment utilisés sont:
wx.request: utilisé pour effectuer des requêtes réseau, le front-end de l'applet interagit avec l'API back-end, ce composant est utilisé;
wx.navigateTo: conserver la page actuelle, accéder à une page de l'application, utiliser wx.navigateBack pour revenir à la page d'origine;
wx.pageScrollTo: faites défiler la page jusqu'à la position cible;
wx.setNavigationBarTitle: définissez dynamiquement le titre de la page actuelle.
Tous les composants peuvent être consultés ici:
https: //mp.weixin.qq.com/debu ...
2. Introduction et développement d'un petit serveur de programme
La partie avant de l'applet est responsable de l'affichage du contenu. Si nous développons une page purement statique, il nous suffit de maîtriser ce qui précède. Cependant, si nous voulons créer une page dynamique, c'est-à-dire que le contenu de la page interagit avec la base de données, nous avons besoin du serveur pour fournir une interaction de données. Dans l'applet, le serveur est implémenté en tant qu'interface et les résultats sont renvoyés au format de données json.
Présentation de l'interface de service
Le développement de l'interface du serveur est le même que l'interface générale. Il peut être implémenté dans n'importe quel langage de développement principal. Une fois le développement de l'interface terminé, le frontal du petit programme appelle l'interface via le composant wx.request pour implémenter l'interaction avec le serveur, comme illustré dans la figure:
Tout le monde devrait être familiarisé avec cette méthode, oui, en fait, wx.request est l'ajax dans jquery, et la méthode d'utilisation est exactement la même. Dans cet appel d'interface, l'extrémité avant de l'applet appelle l'interface principale pour obtenir la liste des actualités, puis affecte le jeu de résultats à la variable de liste.
Dans la page front-end news.wxml correspondant à l'applet, la liste est parcourue et affichée, comme le montre la figure:
De cette façon, nous avons complété une page de liste dans un petit programme. D'autres interactions côté serveur sont similaires. Le développement du petit programme est en fait ici. Les configurations suivantes sont liées.
Demande de certificat de sécurité
Comme mentionné précédemment, le développement de l'interface côté serveur dans l'applet est le même que l'interface générale. La plupart des interfaces générales utilisent le protocole HTTP, mais l'applet nécessite qu'il s'agisse d'un protocole de sécurité https, sinon l'appel d'interface échouera Est obligatoire. Par conséquent, notre serveur doit installer un certificat de sécurité et utiliser le protocole https pour publier l'interface.
Il existe de nombreux fournisseurs de services qui fournissent des certificats de sécurité sur Internet, comme Symantec. Quels sont les certificats gratuits? S'il s'agit d'une application d'entreprise, il est recommandé d'acheter un certificat de sécurité au niveau de l'entreprise.Si c'est uniquement pour le développement personnel et la recherche, voici un certificat de sécurité gratuit et fiable - Alibaba Cloud. Alibaba Cloud fournit aux utilisateurs individuels des certificats gratuits pour une durée illimitée. Notez qu'il doit s'agir d'un utilisateur individuel. Les utilisateurs d'entreprise n'ont pas cet avantage. Tout d'abord, connectez-vous à Alibaba Cloud avec un compte d'utilisateur personnel et recherchez "CA Certificate Service", comme indiqué dans la figure:
Après avoir accédé à la page du service de certificats, cliquez sur "Acheter maintenant", comme indiqué dans la figure:
Choisissez un certificat gratuit et achetez maintenant:
Dans la console, recherchez «Service de certificats» et remplissez les informations requises pour générer un certificat lié au nom de domaine spécifié.
Une fois le certificat généré, vous pouvez le télécharger. Dans le fichier de certificat téléchargé, il y a un document de description détaillée qui vous explique comment installer et configurer rapidement le certificat de sécurité dans différents environnements. Je ne le répéterai pas ici.
Troisièmement, la publication et l'examen de petits programmes
Soumettre et publier
Une fois le développement du petit programme terminé, vous pouvez le soumettre dans l'outil de développement WeChat, comme illustré dans la figure:
En mode projet, cliquez sur télécharger pour terminer le téléchargement du code d'applet. Une fois le téléchargement terminé, vous devez vous connecter à l'arrière-plan de gestion des applets et vous devez définir les éléments appropriés, comme indiqué dans la figure:
Tout d'abord, configurez un nom de domaine légal, c'est-à-dire l'adresse de nom de domaine de l'interface du serveur. Veillez à ne pas remplir les erreurs ici.
Ensuite, remplissez les informations de base de l'applet:
La chose à noter ici est le choix de la catégorie de service. Assurez-vous de choisir la catégorie correspondant à votre propre petit programme. Si la sélection de catégorie ne correspond pas, elle sera rejetée. Si vous la soumettez à nouveau, cela prendra 3 à 5 jours ouvrables. Beaucoup Les gens consomment plus d'un mois à cet endroit.
Tant que la révision des informations de base est réussie, vous pouvez la publier dans le petit programme progressif, comme illustré dans la figure:
Une fois la révision de la version de l'applet terminée, vous pouvez rechercher l'applet déjà publiée dans WeChat et le processus de développement de l'applet est terminé.
4. Résumé
Le développement de petits programmes est un développement complètement frontal en termes de compétences de développement. Il n'implique pas de nouvelles compétences. Fondamentalement, il n'y a pas de difficulté de développement. Tant qu'il s'agit d'un développeur qui maîtrise h5, css et js, ils peuvent être compétents. Le plus gênant est le processus de développement de petit programme et l'examen de diverses qualifications après la fin du développement. La documentation officielle de WeChat n'est pas claire. Souvent, vous ne savez pas quel type de petit programme vous êtes, vous devez l'essayer. Si vous faites plus d'erreurs, Cela va perdre une semaine, donc cet article n'explique pas en détail la partie développement de l'applet, il existe de nombreux articles connexes en ligne, mais se concentre sur le processus de développement de l'applet et la révision et la publication, dans l'espoir d'aider les amis qui sont ou feront le développement d'applet Si vous avez des questions, vous pouvez prêter attention au compte public WeChat "Jibi Beike" ou Weibo "Jibi Beike".
Transcription: "Wang Dongqiang: un petit programme démarre rapidement le développement et l'analyse"
Oeufs de Pâques
Partager le chat lourd:
"Apprentissage efficace, monétisation rapide: cinq stratégies d'apprentissage qui ne prennent pas de détours"
Sharer:
Un programmeur qui peut écrire des codes en direct sur la station B, jongler avec des balles, jouer de l'ukulélé, une forme physique extrême, courir, écrire des paragraphes, dessiner, traduire, écrire, parler, s'entraîner. J'aime utiliser la programmation pour réaliser mes idées, avoir gagné de l'argent sur le marché Android et avoir de nombreuses expériences entrepreneuriales. Bon à l'apprentissage, au développement des habitudes, à la gestion du temps. Influencez physiquement les autres pour apporter des changements positifs! Travaille actuellement chez ThoughtWorks, dédié à la diffusion de concepts de programmation heureux et efficaces. CodingStyle.cn, une communauté d'artisans du logiciel, a été créée pendant ses temps libres et a organisé plus de 30 événements techniques.Introduction au chat: en
ce qui concerne l'apprentissage, c'est très gros: fragmenté, il n'y a plus de temps continu pour apprendre, il est difficile de se concentrer, de tenir le livre, mais le téléphone appelle: Venez, heureux ~ Quoi qu'il en soit, il y a beaucoup de temps ~ Non, j'ai lu beaucoup de livres, mais je ne pouvais pas le faire dans ma vie. J'ai appris des méthodes et des outils. Je n'ai pas pu trouver les scénarios d'utilisation inefficaces. La vitesse d'apprentissage ne peut pas suivre la vitesse de la connaissance. En cette ère de connaissances rampantes et de concurrence transfrontalière, la capacité d'apprentissage est au cœur de la compétitivité. Pensez-y, un travail a-t-il été achevé sans avoir été appris la semaine dernière? En dépit de leur importance, la plupart des gens n'ont jamais étudié la question de l'apprentissage, pensant que l'ouverture du livre d'écoute «get» sur le chemin du travail est un apprenant à vie de temps fragmenté.Je suis programmeur, consultant et formateur, ces fonctions nécessitent que j'apprenne vite et bien. Dans cette session, Chat analysera les "tendances, principes, stratégies" de l'apprentissage, vous aidera à voir l'apprentissage sous un angle plus élevé et formulera des stratégies à partir de cinq aspects du "contenu, de la motivation, de l'interaction, des revenus, des ressources" pour résoudre les points douloureux de l'apprentissage et vous aider à devenir un Des apprenants efficaces!
Vous souhaitez participer gratuitement à ce chat? Très simple, le compte public "Chat technique GitChat" revient à "un apprentissage efficace"
Cet article est reproduit dans: Ape 2048 remplit la fosse pour le développement WeChat: processus de développement de paiement Web WeChat et compétences de remplissage de fosse