Résumer et partager les étapes de développement des mini programmes WeChat

Cet article vous apporte des connaissances pertinentes sur le Développement du mini-programme WeChat. Il présente principalement les étapes du développement du mini-programme WeChat, y compris le travail de préparation, l'introduction du cadre, le développement du programme et les spécifications de conception. utile.

【Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes】

Cet article décrit brièvement les étapes de développement du mini-programme WeChat Pour des informations détaillées, veuillez vous référer à la documentation de développement de WeChat

1 Préparation

1. : Inscrivez-vous https:// mp.weixin.qq.com/wxopen/waregister?action=step1
Enregistrez un compte public WeChat avec une adresse e-mail qui n'a pas été enregistrée sur la plateforme publique WeChat, demandez un compte, remplissez le formulaire informations et soumettez les informations correspondantes conformément aux directives, et vous pouvez avoir votre propre petit compte de programme. Une fois l’inscription terminée, connectez-vous.

2 : Connectez-vous à https://mp.weixin.qq.com

Nous pouvons voir l'AppID du mini programme dans le menu "Paramètres" - "Paramètres de développement". L'AppID du mini programme est équivalent à une carte d'identité sur la plateforme du mini programme. Vous utiliserez l'AppID à de nombreux endroits plus tard (notez qu'il doit être différent de l'AppID du compte de service ou du compte d'abonnement). Une fois que nous avons un compte mini-programme, nous avons besoin d’un outil pour développer des mini-programmes.
Développez selon le tutoriel officiel https://developers.weixin.qq.com/miniprogram/dev/framework/

3 : Installez les outils de développement

Accédez à la page de téléchargement des outils de développement et téléchargez le package d'installation correspondant en fonction de votre Installation du système d'exploitation. Pour une introduction plus détaillée aux outils de développement, veuillez consulter « Introduction aux outils de développement ». Ouvrez l'outil de développement du mini-programme, utilisez WeChat pour scanner le code QR pour vous connecter à l'outil de développement et préparez-vous à développer votre premier mini-programme !
Pour des informations pertinentes sur les outils de développement, vous pouvez en savoir plus via [WeChat Developer Tools]

4 : Ouvrez le premier mini-programme

Créez un nouveau projet, sélectionnez le projet du mini-programme, sélectionnez le chemin du disque dur où le code est stocké , et remplissez l'AppID du mini programme nouvellement appliqué, donnez un joli nom à votre projet, et enfin, cochez "Créer un projet QuickStart" (remarque : vous devez sélectionner un répertoire vide pour avoir cette option), cliquez sur OK, et vous obtiendrez votre Ceci est votre première applet. Cliquez sur Compiler dans le menu supérieur pour prévisualiser votre première applet dans l'EDI.

5 : Aperçu de la compilation

Cliquez sur le bouton de compilation de l'outil, vous pouvez voir les performances de ce petit programme dans l'interface du simulateur sur le côté gauche de l'outil, ou vous pouvez cliquer sur le bouton d'aperçu pour vivre votre expérience sur votre téléphone en scannant sur WeChat Le premier petit programme.

Le contenu des sections ci-dessus peut être consulté dans [Démarrer]-[Démarrer] dans WeChat Open Documents.

2. Introduction au framework

L'objectif du framework de développement de mini-programmes est de permettre aux développeurs de développer des services avec une expérience APP native dans WeChat de la manière la plus simple et la plus efficace possible.

L'ensemble du système-cadre du mini-programme est divisé en deux parties : Couche logique (App Service) et Couche View (Vue). L'applet fournit son propre langage de description de couche de vue WXML et WXSS, ainsi qu'un cadre de couche logique basé sur JavaScript, et fournit des systèmes de transmission de données et d'événements entre la couche de vue et la couche logique, permettant aux développeurs de se concentrer sur les données et la logique.

Liaison de données réactive
Le cœur du framework est un système de liaison de données réactif qui permet de synchroniser les données avec les vues très simplement. Lors de la modification des données, il vous suffit de modifier les données dans la couche logique et la couche de vue sera mise à jour en conséquence.

Gestion des pages
Le framework gère le routage des pages de l'ensemble du mini-programme, permettant une commutation transparente entre les pages et donnant à la page un cycle de vie complet. Tout ce que le développeur doit faire est d'enregistrer les données, les méthodes et les fonctions de cycle de vie de la page dans le framework, et toutes les autres opérations complexes sont gérées par le framework.

Composants de base
Le framework fournit un ensemble de composants de base, livrés avec des styles de style WeChat et une logique spéciale. Les développeurs peuvent créer de puissants mini-programmes WeChat en combinant des composants de base.

Rich API
Le framework fournit de riches API natives WeChat, qui peuvent facilement activer les fonctionnalités fournies par WeChat, telles que l'obtention d'informations sur les utilisateurs, le stockage local, les fonctions de paiement, etc.

3. Développement de programmes

Lorsque vous apprenez HTML+CSS+js et lisez la documentation de développement WeChat, vous pouvez facilement démarrer le développement de mini-programmes WeChat~~

• Entrée
  Chaque mini-programme Vous devez appeler le Méthode d'application dans app.js pour enregistrer l'instance d'applet, lier la fonction de rappel du cycle de vie, les fonctions de surveillance des erreurs et de surveillance de la non-existence des pages, etc.

// app.jsApp({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'})

L'ensemble du mini-programme n'a qu'une seule instance d'application, qui est partagée par toutes les pages. Les développeurs peuvent obtenir l'instance d'application unique au monde via la méthode getApp, obtenir des données sur l'application ou appeler des fonctions enregistrées par le développeur sur l'application.

// xxx.jsconst appInstance = getApp()console.log(appInstance.globalData) // I am global data

• 全局配置
  小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
  详见【全局配置】

• 页面配置
  每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。
  详见【页面配置】

• 小程序生命周期
  注册小程序。接受一个 Object 参数，其指定小程序的生命周期回调等。
  详细api详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

• 页面生命周期
  注册小程序中的一个页面。接受一个 Object 类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。
  生命周期对象详见https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

• 组件
  自带组件库weUI

• API
  丰富的api
  https://developers.weixin.qq.com/miniprogram/dev/api/

详细信息可具体参考《小程序开发指南》

【相关学习推荐：小程序开发教程】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!