Exemple d'introduction au développement d'un mini programme WeChat

WeChat se rapproche de plus en plus de nos vies, et certains développeurs développent constamment des mini-programmes WeChat. Alors, comment développer des mini-programmes ? Comment commencer ? Ensuite, nous utiliserons un mini-programme WeChat comme exemple pour présenter brièvement l'utilisation d'entrée de gamme des mini-programmes WeChat

1 Enregistrez un compte de mini-programme

1. ( https://mp.weixin.qq.com/), enregistrez un mini compte de programme et remplissez les informations correspondantes selon les invites

2. Après une inscription réussie, entrez dans la page d'accueil et allez via le processus de publication du mini programme. ->Développement et gestion du mini programme->Dans le serveur de configuration, cliquez sur "Paramètres du développeur"

3. sera utilisé plus tard lors de la création du projet. 🎜>

Remarque : si vous souhaitez découvrir le mini programme sur votre téléphone mobile avec un identifiant WeChat non administrateur, nous devons également utiliser "Bind Developer", c'est-à-dire dans le module « Identité de l'utilisateur » - « Développeur », associez-vous. Vous devez utiliser le compte WeChat pour expérimenter le mini-programme. Dans ce tutoriel, le compte d'enregistrement et l'expérience par défaut doivent utiliser le compte WeChat de l'administrateur

. 2. Téléchargez l'outil de développement Web WeChat

pour aider les développeurs à simplifier les choses et pour un développement efficace, WeChat Mini Program a lancé un nouvel outil de développement qui intègre les fonctions de développement et de débogage, d'édition de code et de publication de programme

.

1. Page de téléchargement : https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

Selon le système, sélectionnez l'outil correspondant. version à télécharger

2. L'outil comprend l'édition, le débogage et le projet d'une carte de trois pages :

(1) La zone d'édition peut effectuer des opérations de base telles que l'écriture de code et ajouter, supprimer et renommer des fichiers pour le projet en cours

(2) Le débogage du programme comporte principalement trois zones fonctionnelles : le simulateur, les outils de débogage et la zone d'exploitation du mini programme

(3 ) La carte de la page du projet a trois fonctions principales : afficher les détails du projet en cours, soumettre un aperçu et soumettre le téléchargement et la configuration du projet

Remarque : lors du démarrage de l'outil, les développeurs doivent utiliser l'identifiant WeChat qui a été lié avec succès dans le arrière-plan pour scanner le code QR pour vous connecter. Toutes les opérations ultérieures seront basées sur ce compte WeChat

3. Écrivez un petit exemple de programme

1.

2. Description du fichier d'instance et code source

? 
test
 ├─ page
 │ └─ index
 │  ├─ index.js
 │  ├─ index.json
 │  ├─ index.wxml
 │  └─ index.wxss
 ├─ app.js
 ├─ app.json
 └─ app.wxss

Un petit programme comprend une application (partie principale) et plusieurs pages A (page)

(1) application est utilisé pour décrire l'ensemble du programme et se compose de trois fichiers. Le suffixe .js est le fichier de script et le suffixe .json est le fichier de configuration. Le suffixe wxss est le fichier de feuille de style, qui doit être. placé dans le répertoire racine du projet.

app.js est le code de script du mini programme (obligatoire). Vous pouvez surveiller et traiter la vie du mini programme dans ce fichier. , déclaration de variables globales et appels d'API riches fournis par le framework

app.json est la configuration globale de l'ensemble du mini programme (obligatoire) et est utilisé pour configurer et déterminer la configuration globale du Mini programme WeChat. Le chemin du fichier d'échange, l'affichage de la fenêtre, la définition du délai d'attente du réseau, la définition de plusieurs onglets, etc. Accepte un tableau, chaque élément est une chaîne, pour spécifier de quelles pages se compose le mini-programme. Le [chemin + nom de la page] de chaque page du mini-programme WeChat doit être écrit dans les pages de app.json, et la première page des pages est la page d'accueil du mini-programme.

?
App({
 onLaunch: function () {
  console.log('App Launch')
 },
 onShow: function () {
  console.log('App Show')
 },
 onHide: function () {
  console.log('App Hide')
 },
 globalData: {
  hasLogin: false
 }
})

app.wxss est la feuille de style commune pour l'ensemble du mini-programme (non obligatoire).

{
 "pages":[
  "page/index/index"
 ],
 "window":{
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "欢迎页",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
 },
 "debug": true
}

(2) La page est utilisée pour décrire une page. Une page se compose de quatre fichiers. Ici, nous prenons l'index de la page d'accueil comme exemple. Chaque petite page de programme se compose de quatre suffixes différents portant le même nom. sous le même chemin. La composition des fichiers, tels que : index.js, index.wxml, index.wxss, index.json. Les fichiers avec le suffixe .js sont des fichiers de script, les fichiers avec le suffixe .json sont des fichiers de configuration, les fichiers avec le suffixe .wxss sont des fichiers de feuille de style et les fichiers avec le suffixe .wxml sont des fichiers de structure de page.

page {
 background-color: #fbf9fe;
 height: 100%;
}
.container {
 display: flex;
 flex-direction: column;
 min-height: 100%;
 justify-content: space-between;
}

index.js est le fichier de script de la page (obligatoire). Dans ce fichier, nous pouvons surveiller et traiter les fonctions de cycle de vie de la page, obtenir des mini-instances de programme, déclarer et traiter des données, et répondre aux événements d'interaction de la page.

index.wxml est le fichier de structure de page (obligatoire).

Page({
 data: {
  title:'小程序',
  desc:'Hello World!'
 }
})

index.wxss est un fichier de feuille de style de page (non obligatoire). Lorsqu'il existe une feuille de style de page, les règles de style de la feuille de style de la page se répercuteront sur les règles de style de app.wxss. Si vous ne précisez pas la feuille de style de la page, vous pouvez également utiliser directement les règles de style spécifiées dans app.wxss dans le fichier de structure de la page.

<view class="container">
 <view class="header">
  <view class="title">标题：{{title}}</view>
  <view class="desc">描述：{{desc}}</view>
 </view>
</view>

index.json est le fichier de configuration de la page (non obligatoire). Lorsqu'il existe un fichier de configuration de page, les éléments de configuration sur la page écraseront les mêmes éléments de configuration dans la fenêtre de app.json. S'il n'y a pas de fichier de configuration de page spécifié, la configuration par défaut dans app.json sera utilisée directement sur la page. Pas besoin de le préciser ici.

.header {
 padding: 80rpx;
 line-height: 1;
}
.title {
 font-size: 52rpx;
}
.desc {
 margin-top: 10rpx;
 color: #888888;
 font-size: 28rpx;
}

Conseils :

a. Afin de permettre aux développeurs de réduire les éléments de configuration, le mini programme stipule que les quatre fichiers décrivant la page doivent avoir le même chemin et le même fichier. nom

b. Le mini programme fournit une API riche, que vous pouvez choisir en fonction de vos propres besoins (https://mp.weixin.qq.com/debug/wxadoc/dev/api/ ?t=201715)

4. Exemple de mini-programme de test

1. Ouvrez l'outil de développement Web WeChat et sélectionnez « Projet de mini-programme local ».

2. Remplissez l'AppID et le nom du projet du mini programme, sélectionnez le dossier d'instance du mini programme écrit à la troisième étape et cliquez sur "Ajouter un projet".

3. Si les résultats suivants apparaissent, félicitations, votre premier petit projet de programme a été écrit avec succès ! Cliquez sur "Modifier" dans la barre latérale gauche, et vous pouvez également modifier directement le code dans la fenêtre d'édition de droite Enregistrer (CTRL+S) et actualiser (F5) pour prendre effet.

4. Si vous souhaitez voir l'effet du projet de mini-programme sur votre téléphone mobile, cliquez sur « Projet » dans la barre latérale gauche, cliquez sur « Aperçu » pour générer un code QR, ouvrez WeChat et scannez-le, et vous pouvez le voir.

Résumé

Ce qui précède est l'intégralité du contenu de cet article. J'espère que les développeurs pourront en tirer des idées et aider tout le monde à mieux développer le programme WeChat.

Recommandations associées :

Les exemples de projets de mini-programmes WeChat les plus complets

Introduction au programme WeChat Mini

Introduction à la méthode de réalisation de valeurs de variables partagées dans le programme WeChat Mini

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!