Explication détaillée de l'inscription et aperçu du développement du mini programme WeChat

Ce didacticiel est conçu pour fournir un didacticiel rapide aux étudiants qui souhaitent apprendre des mini-programmes. Si vous avez déjà été exposé à des frameworks front-end tels que React.js ou vue.js, je pense que vous le serez. capable d'apprendre rapidement des mini-programmes. Si vous n'y avez jamais été exposé, n'ayez pas peur. Ce tutoriel s'adresse principalement aux débutants, je vais donc essayer d'être le plus détaillé possible. Je pense qu'après avoir suivi le tutoriel avec moi, vous apprendrez certainement à développer de petits programmes.

Ce tutoriel est divisé en trois parties :

Première partie : Théorie

Cette partie présente WeChat Développement de mini programmesLes connaissances de base impliquées vous donneront une idée globale du développement de mini programmes.

Partie 2 : Combat pratique

amènera lecteurs et amis à développer un véritable petit programme avec moi et à profiter de la programmation avec moi de manière amusante.

Troisième partie : Annexe

Certains contenus supplémentaires seront expliqués dans l'annexe.

Pendant le processus d'apprentissage, si vous avez des doutes, veuillez suivre mon compte officiel WeChat et poser des questions directement.

Créez un environnement de développement

• Téléchargez la dernière version des outils de développement d'applets WeChat : Page de téléchargement
• Choisissez la version adaptée à votre système à installer Actuellement, les systèmes Windows32, Windows64 et Mac sont pris en charge<.>
• Une fois l'installation terminée, ouvrez l'outil de développement Web WeChat, puis utilisez votre téléphone mobile WeChat pour scanner le code QR pour vous connecter.
• Choisissez d'ajouter un projet. Vous pouvez voir que pour ajouter un nouveau mini-projet de programme, vous devez remplir trois parties : AppID, nom du projet et. répertoire du projet.

Ici, afin de développer rapidement, nous sélectionnons d'abord l'option No AppID. Pour plus d'informations sur AppID, vous pouvez la consulter en annexe. Je n’entrerai pas dans les détails ici.

Le nom du projet est le nom que vous donnez à votre projet.

Le répertoire du projet fait référence au répertoire où sera placé le code de votre applet. Vous pouvez créer un dossier localement ou créer un nouveau projet sur github Can. Par souci de simplicité, j'ai créé un nouveau dossier directement sur le bureau.

Notez qu'après avoir renseigné les informations, l'outil cochera par défaut l'option permettant de créer un projet de démarrage rapide dans le répertoire actuel . Nous utilisons la valeur par défaut Très bien, pas besoin de changer.

Si tout se passe bien, après avoir cliqué sur Ajouter un élément, vous devriez voir quelque chose comme l'image ci-dessous.

À ce stade, l'environnement de développement des mini-programmes a été mis en place. Cette section se termine ici. Dans la section suivante, nous présenterons comment configurer les mini-programmes !

Configuration de l'applet

Dans cette section, nous présenterons la configuration de l'applet. Voyons d’abord à quoi ressemble le fichier app.json généré automatiquement par le projet.

En fait, cinq parties peuvent être configurées ici, à savoir les pages, la fenêtre, la barre tar, le networkTimeout et le débogage

pages : définit de quelles pages se compose cette applet.

Lorsque vous devrez ajouter ou réduire des pages à l'avenir, vous devez les définir ici. Il y a plusieurs pages dans le tableau des pages.

Vous pouvez voir que pages est un tableau, et le premier élément du tableau est la page initiale du mini programme. Vous pouvez essayer de déplacer la page des journaux vers l'avant pour voir. l'effet. C'est une petite astuce sympa à avoir lors du développement.

Une autre astuce que je veux partager avec vous est que lorsque nous devons ajouter une nouvelle page, il n'est pas nécessaire de créer un dossier manuellement puis de créer un nouveau xxx.josn, Ces quatre fichiers sont xxx.js, xxx.wxml et xxx.wxss. Il suffit d'ajouter une page que vous souhaitez créer dans le tableau pages, puis de Ctrl s pour la sauvegarder ! N'est-ce pas cool ?

{
  "pages":[
          "pages/logs/logs",
    "pages/index/index"
  ],
  ...
}

fenêtre : Définit les informations de configuration de la fenêtre. [td]

{
  "tabBar": {
          "backgroundColor": "#fbfbfb",
          "borderStyle": "white",
          "selectedColor":"#50e3c2",
          "color": "#aaa",
          "list": [{
            "pagePath": "pages/index/index",
            "text": "首页",
            "iconPath": "images/home.png",
            "selectedIconPath": "images/homeHL.png"
          },{
            "pagePath": "pages/me/me",
            "text": "我",
            "iconPath": "images/me.png",
            "selectedIconPath": "images/meHL.png"
          }]
        }
}

networkTimeout : utilisé pour définir le délai d'expiration de diverses requêtes réseau.

Si vous n'êtes pas clair sur la fonction de cette configuration networkTimeout, ignorez-la simplement. Cela n’a aucun impact sur le développement réel.

[td]

Le code suivant n'est qu'un exemple

{
  "networkTimeout": {
    "request": 5000,
    "connectSocket": 5000,
    "uploadFile": 5000,
    "downloadFile": 5000
  },
  "debug": true
}

debug

Vous pouvez activer le mode débogage dans les outils de développement, dans le panneau de console du développeur outils, les informations de débogage sont fournies sous forme d'informations, qui incluent l'enregistrement de la page, le routage des pages, la mise à jour des données et le déclenchement d'événements. Cela peut aider les développeurs à localiser rapidement certains problèmes courants.

如果开启 debug 模式见上面代码

好了，五个部分介绍完了，希望各位在学习完这一节后可以尽情探索，修改各种配置看看效果，毕竟这样印象会更加深刻。

下一节我们将讲到小程序的项目结构。

项目结构

pages

这个文件夹用来存放小程序的页面，可以看到，其中的每个文件夹就表示一个页面，比如，要定义index的页面如何表现，就在index文件夹中的四个文件中定义。

一个页面由四个文件组成，分别是 xxx.js, xxx.json, xxx.wxml, xxx.wxss

• xxx.js 将在下小节讲到，因为这里涉及到的内容比较多，需要单独列出一节来讲。
• xxx.json 和 app.json 类似，app.json是整个微信小程序的配置文件，而xxx.json是xxx这单个页面的配置文件。

比如，logs.json 文件就配置了logs这个页面的 导航栏的标题～

{
    "navigationBarTitleText": "查看启动日志"
}

注意：json 文件中不能有任何注释，不然会报错。

• xxx.wxml peut être considéré comme une variante du HTML, qui a également la syntaxe du XML.
• xxx.wxss peut être considéré comme du CSS.

Ce qu'il faut comprendre ici, c'est que le développement de petits programmes est en fait développé en utilisant la technologie de développement de pages Web, ce qui permet d'économiser considérablement le coût d'apprentissage de notre personnel de première ligne. Mais en même temps, vous devez également noter que ce produit n'est pas HTML5, bien qu'il soit très similaire, et vous rencontrerez de nombreux pièges au cours du processus de développement.

utils

Le utils.js de ce dossier est principalement utilisé pour définir certaines fonctions publiques.

Nous pouvons également y créer un nouveau fichier api.js pour extraire l'adresse de notre serveur.

app.js

Cette partie du contenu sera également abordée dans la section suivante !

app.json

Nous avons déjà parlé de la fonction de ce fichier dans la section précédente. l'intégralité du petit fichier de configuration du programme.

app.wxss

Ce qui est défini ici est la feuille de style de l'ensemble du mini programme

页面生命周期

终于到了小程序最核心，最关键的部分了，这也是我们理论篇的最后一节，那么我们开始吧！

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

App({
  onLaunch: function() { 
    // Do something initial when launch.
  },
  onShow: function() {
      // Do something when show.
  },
  onHide: function() {
      // Do something when hide.
  },
  globalData: 'I am global data'
})

Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。

Page({
  data: {
    text: "This is page data."
  },
  onLoad: function(options) {
    // Do some initialize when page load.
  },
  onReady: function() {
    // Do something when page ready.
  },
  onShow: function() {
    // Do something when page show.
  },
  onHide: function() {
    // Do something when page hide.
  },
  onUnload: function() {
    // Do something when page close.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },
  onReachBottom: function() {
    // Do something when page reach bottom.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

此时，相信你对小程序开发的理论知识已经有一定了解了。

如果觉得比较模糊，第二部分的实战篇就是为了让我们能够结合理论来进行实践。

如果你比较自信，你也可以直接看这个实战项目的源代码。

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!