Tutoriel de développement et de test de mini-programmes

Documentation technique du mini programme

1. Analyse de l'application du mini programme

1. Une brève introduction

Un mini programme est une application développée par WeChat qui peut être utilisée sans téléchargement ni installation.

1. Essence

Le mini-programme WeChat est l'application de la technologie hybride.
Application hybride (application mobile en mode hybride).
Les mini-programmes peuvent appeler davantage de fonctions du téléphone lui-même (telles que les informations de localisation, l'appareil photo, etc.).

1. Inscription du mini programme

La couche logique du cadre de développement du mini programme est écrite en JavaScript. La couche logique traite les données et les envoie à la couche de vue, tout en acceptant les retours d'événements de la couche de vue. Encore une fois, quelques modifications de base ont été apportées au mini programme pour faciliter le développement : les méthodes App et Page ont été ajoutées pour enregistrer les programmes et les pages.

La fonction App() est utilisée pour enregistrer un petit programme. Accepte un paramètre d'objet, qui spécifie la fonction de cycle de vie de l'applet, etc.

La fonction Page() est utilisée pour enregistrer une page. Accepte un paramètre d'objet, qui spécifie les données initiales de la page, les fonctions de cycle de vie, les fonctions de gestion des événements, etc. La fonction de cycle de vie est :

onLoad : Le chargement de page

ne sera appelé qu'une seule fois pour une page.

onShow : L'affichage de la page

sera appelé à chaque ouverture de la page.

onReady : Le rendu initial de la page est terminé

Une page ne sera appelée qu'une seule fois, ce qui signifie que la page est prête et peut interagir avec la couche de vue

onHide : La page est masquée

Appelé lors des changements de navigation vers ou d'onglet inférieur

onUnload : déchargement de la page

Appelé lors de la redirection vers ou de la navigationretour

2. Analyse d'exemple de mini programme

1. Créer un projet

Il s'agit désormais d'une version bêta interne et tous les AppID sont publiés en interne par Tencent. Cependant, ne pas avoir d'AppID n'affecte pas le développement des tests. Nous pouvons choisir de tester et de développer sans AppID, mais il ne peut pas être débogué sur un vrai téléphone mobile.

Sélectionnez le répertoire du projet et ajoutez le projet.

2. Écrivez du code

Cliquez sur "Modifier" dans le menu de navigation de gauche des outils de développement. Nous pouvons voir que ce projet a été initialisé et contient quelques fichiers de code simples. Il s'agit de app.js, app.json et app.wxss. Parmi eux, app.js est notre fichier js traditionnel, app.json est le fichier de configuration du projet et app.wxss est le fichier CSS du projet. L'applet WeChat lira ces fichiers et générera des instances d'applet.

(1)app.json :

app.json est la configuration globale de l'ensemble de l'applet. Il y a 5 attributs. Le tableau de configuration officiel est :

Nous pouvons configurer de quelles pages le mini programme est composé dans ce fichier. couleur d'arrière-plan du mini programme, configurez le style de la barre de navigation et configurez le titre par défaut. Notez qu'aucun commentaire ne peut être ajouté à ce fichier.

la fenêtre est utilisée pour définir la barre d'état, la barre de navigation, le titre et la couleur d'arrière-plan de la fenêtre du mini programme.

pages est le répertoire de toutes les pages du programme. Toutes les pages qui doivent être sautées doivent être configurées dans. pages bien.

(2)tabBar :

tabBar est la partie inférieure de la barre de navigation, l'API tabBar est

Une fois la tabBar configurée, il y aura une barre de navigation par onglets sur n'importe quelle page. La liste contient le nombre de boutons dans l'onglet configuré. Dans le cas, il y en a deux. Il y a plusieurs attributs dans la liste,

Le app.json du cas APP est :

{

" pages":[

"pages/index/index",

"pages/logs/logs"

],

"window ":{

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "vert",

"navigationBarTitleText": "APP",

"navigationBarTextStyle":"blanc"

},

"tabBar": {

" selectedColor":"rouge",

"list": [{

"pagePath": "pages/index/index",

"text": "Page d'accueil" ,

"iconPath": "goods_mgold.png",

"selectedIconPath": "goods_mgold.png"

}, {

"pagePath" : "pages/logs/logs",

"text": "Requête météo",

"iconPath":"icon_community.png",

"selectedIconPath": "icon_community.png"

}]

}

}

L'effet affiché par le code de configuration ci-dessus est :

(3) fichier wxml :

Le fichier wxml de WeChat est équivalent à un fichier html traditionnel, éliminant certaines applications WeChat Si vous utilisez Les balises qui ne sont pas nécessaires au développement, telles que H1-H5, vous obtiendrez une erreur. La balise p en HTML devient la balise de vue dans WeChat. (En d'autres termes, le nom a été changé...)

(4)app.js :

app.js est le code de script du mini programme. Nous pouvons surveiller et traiter les fonctions de cycle de vie de l'applet et déclarer des variables globales dans ce fichier. Appelez l'API riche fournie par MINA. Le code est principalement écrit dans l’objet APP et affecte le monde entier.

Chaque page peut avoir son propre fichier js. Par exemple, index.js est le code js de la page Index.wxml Certaines applications du code js sont principalement écrites dans l'objet page.

Comment utiliser l'événement :

Écrivez d'abord un événement de clic bindtap en wxml.

Cliquez sur moi

Puis définissez-le dans l'objet page de js :

peut implémenter un événement de clic. Où bind est contraignant et type est tap. type est le type d'événement.

Rendu des données :

Utilisez l'attribut de contrôle wx:for sur le composant pour lier un tableau, et le composant peut être rendu à plusieurs reprises en utilisant les données de chaque élément du tableau. Par défaut, le nom de variable d'indice de l'élément actuel dans le tableau est par défaut index, et le nom de variable de l'élément actuel dans le tableau est par défaut item

Écrit en xwml :

Écrire dans index.js :

Rendu conditionnel :

wx :if pour déterminer s'il est sur la page C'est à rendre et à afficher

Vous pouvez écrire la valeur de la condition dans l'attribut data du L'objet de page doit être vrai ou faux pour déterminer s'il doit être rendu.

Définition du modèle :

Vous pouvez définir des extraits de code dans des modèles, puis les appeler à différents endroits.

Créez un nouveau modèle box.wxml directement en externe :

Créez ensuite un module commom.js externe.

Exportez le module via module.exports,

Incluez d'abord directement l'adresse src dans le fichier wxml où le module doit être importé

Puis dans le fichier js où le module doit être introduit :

Ensuite, appelez-le avec common.show().

De cette façon, vous pourrez réutiliser ce module. Dans n'importe quelle page, il vous suffit d'utiliser include pour importer le code wxml et d'utiliser require pour introduire le fichier js pour ajouter ce module.

(5)wxss:

Le fichier wxss est un fichier css traditionnel, il n'y a pas de grande différence.

Mais WeChat propose une mise en page responsive

rpx (responsive pixel) : peut être adapté en fonction de la largeur de l'écran. La largeur d'écran spécifiée est de 750rpx. Par exemple, sur iPhone6, la largeur de l'écran est de 375px et il y a 750 pixels physiques au total, alors 750rpx = 375px = 750 pixels physiques, 1rpx = 0,5px = 1 pixel physique.

Le principe de rpx est le principe de mise en page rem. C'est juste un changement de nom, et il y a une étape de moins dans le code Js pour la conversion de la taille de l'écran. WeChat l'exécute en interne, il n'est donc pas nécessaire de l'écrire vous-même.

(6) API d'interface :

Le cadre de développement du mini-programme fournit une riche API native WeChat, qui peut facilement activer les fonctionnalités fournies par WeChat, telles que l'obtention d'informations sur l'utilisateur, le stockage local, le paiement fonctions, etc.

Pour plus de tutoriels de développement et de test de petits programmes et d'articles connexes, veuillez faire attention au site Web PHP chinois !