Introduction au développement du mini programme WeChat

1. Qu'est-ce que le programme WeChat Mini :

Pour en revenir au sujet, quelle est l'essence du programme WeChat Mini ? Personnellement, je comprends que l'essence des mini-programmes WeChat est toujours un ensemble de frameworks frontaux. Sur la base de la page h5 tierce d'origine, l'équipe WeChat ne peut utiliser h5 que pour implémenter des fonctions qui peuvent être implémentées nativement dans WeChat, telles que. comme le téléchargement de photos, etc. Ensuite nous adoptons la partie ouverte de l'API de jsbridge pour faciliter la tâche des développeurs. Cependant, en tant que fabricant majeur, il n'ouvrira certainement pas seulement une partie de l'API jsbridge. Soit dit en passant, WeChat a implémenté son propre framework mvvm comme vue et React, qui est l'applet WeChat actuelle. Le document officiel décrit ceci : Le framework 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 logique. couche, permettant aux développeurs de se concentrer facilement sur les données et la logique.

Essentiellement, il s'agit toujours d'un framework front-end. Le code sera finalement empaqueté dans un JavaScript et exécuté au démarrage du mini-programme jusqu'à ce que le mini-programme soit détruit. La syntaxe du modèle est similaire à celle de Vue et proche des balises personnalisées natives. La liaison de données et le rendu ont une syntaxe similaire à vue, mais ils commencent par wx : (vue utilise v : comme identifiant). Le système d'événements définit son propre système d'événements comme React.

2. Environnement d'exploitation WeChat :

L'applet WeChat fonctionne sur trois terminaux : iOS, Android et les outils de développement pour le débogage

Sur iOS, le code javascript du le mini programme est exécuté en JavaScriptCore

Sur Android, le code javascript du mini programme est analysé via le noyau X5

Sur l'outil de développement, le mini programme Le javascript le code est exécuté dans nwjs (noyau chrome)

La logique de script de la page est exécutée dans JsCore. JsCore est un environnement sans objets window, donc les objets BOM tels que window ne peuvent pas être utilisés dans les scripts. Par conséquent, les bibliothèques telles que jquery et zepto qui obtiennent des objets DOM via une fenêtre ou un document ne peuvent pas être utilisées.

3. Structure du répertoire :

L'applet contient une application qui décrit le programme global et plusieurs pages qui décrivent leurs pages respectives.

La partie principale d'un petit programme est constituée de trois fichiers, qui doivent être placés dans le répertoire racine du projet, comme suit :

partie logique app.js , c'est-à-dire des variables ou méthodes globales

configuration publique app.json, y compris la configuration de la page, etc., les paramètres des onglets supérieur et inférieur, la couleur d'arrière-plan, etc.

La feuille de style publique app.wxss peut être remplacée par des styles de page spécifiques

code app.js (code extrait de la démo officielle de WeChat) et les commentaires sont les suivants :

//app.js
// 微信小程序就是调用微信开放jsbridge，来完成微信h开发中某些原本比较难的功能的特定的微信前端框架
/**
* app 即小程序的生命周期管理。
* */
App({
// 初始化
onLaunch: function () {
 //调用API从本地缓存中获取数据
 var logs = wx.getStorageSync('logs') || []
 logs.unshift(Date.now())
 wx.setStorageSync('logs', logs)
},
// 全局方法或者变量，可在不同page中使用
getUserInfo:function(cb){
 var that = this
 if(this.globalData.userInfo){
 typeof cb == "function" && cb(this.globalData.userInfo)
 }else{
 //调用登录接口
 wx.login({
  success: function () {
  wx.getUserInfo({
   success: function (res) {
   that.globalData.userInfo = res.userInfo
   typeof cb == "function" && cb(that.globalData.userInfo)
   }
  })
  }
 })
 }
},
globalData:{
 userInfo:null
}
})

{
"pages":[
 "pages/index/index",
 "pages/logs/logs",
 "pages/swiper/swiper",
 "pages/input/input",
 "pages/form/form"
],
"window":{
 "navigationBarBackgroundColor": "#ffffff",
 "navigationBarTextStyle": "black",
 "navigationBarTitleText": "微信小程序",
 "backgroundColor": "#eeeeee",
 "backgroundTextStyle": "light"
},
"tabBar":{
 "borderStyle": "white",
 "list": [{
 "pagePath": "pages/index/index",
 "iconPath":"image/icon_API.png",
 "selectedIconPath":"image/icon_API_HL.png",
 "text": "首页"
  },{
 "pagePath": "pages/form/form",
 "iconPath":"image/plus.png",
 "selectedIconPath":"image/green_tri.png",
 "text": "更多"
 }, {
 "pagePath": "pages/swiper/swiper",
 "iconPath":"image/icon_COM.png",
 "selectedIconPath":"image/icon_COM_HL.png",
 "text": "其他"
 }
 ]
}
}

Spécifique les pages incluent généralement les fichiers suivants (similaires aux fichiers globaux, mais uniquement pour les fonctions de cette page) :

.js La logique de la page n'est pas différente de js

.wxml La page la structure correspond au html, mais beaucoup de balises personnalisées sont appliquées

La feuille de style de page .wxss correspond au fichier css, la priorité est supérieure à appapp.wxss, la méthode d'écriture du css est pas entièrement pris en charge

La configuration de la page .json spécifie le titre et d'autres éléments d'une page spécifique

Afin de permettre aux développeurs de réduire les éléments de configuration, il est stipulé que les quatre fichiers décrivant la page doivent ont le même chemin et le même nom de fichier.

En d'autres termes, nous n'avons pas besoin de spécifier le fichier js ou wxss correspondant à une certaine page, il nous suffit de conserver le chemin et le nom du fichier identiques.

4. Langage du modèle et système d'événements

1) : La syntaxe du modèle est similaire à vue, proche des balises personnalisées natives. La liaison et le rendu des données sont similaires à la syntaxe de vue, mais cela commence par wx : (vue utilise v : comme identifiant) ​​

/**
* 类似vue的条件渲染语法，熟悉vue的话应该不会陌生
**/
<view wx:if="{{condition}}">
</view>

2) : Système d'événements

Le système d'événements est similaire à React : définit son propre système d'événements. Contient une série de types d'événements courants :

touchstart L'action tactile du doigt commence

touchmove Le doigt bouge après l'avoir touché

touchcancel L'action tactile du doigt est interrompue, comme une entrée rappel d'appel, fenêtre pop-up

touchend L'action tactile du doigt se termine

appuyez sur Quitter immédiatement après que le doigt touche

appuyez longuement Après que le doigt touche, quittez après plus de 350 ms

Méthode de liaison : liaison d'événement La méthode d'écriture est la même que l'attribut du composant, sous forme de clé+valeur :

commence par bind ou catch, puis suit le type d'événement , comme bindtap catchtouchstart,

value est une chaîne et doit définir la fonction du même nom dans la page correspondante. Sinon, une erreur sera signalée lors du déclenchement de l'événement.

La liaison d'événement bind n'empêchera pas les événements bouillonnants de bouillonner vers le haut, et la liaison d'événement catch peut empêcher les événements bouillonnants de bouillonner vers le haut. Par exemple :

/**
*bind/catch +事件类型，两种事件绑定方式
*/
<view id="outter" bindtap="handleTap1">
 outer view
 <view id="middle" catchtap="handleTap2">
 middle view
 <view id="inner" bindtap="handleTap3">
  inner view
 </view>
 </view>
</view>

3) : Objet événement : y compris l'objet événement de base BaseEvent, l'objet événement personnalisé CustomEvent, l'objet événement tactile TouchEvent, etc.

5. Avantages et inconvénients :

1) : Avantages

1. Fournir un support correspondant de type jsbridge, rendant certaines fonctions plus pratiques

5. Support

2) : Inconvénients

1. Étant donné que le framework ne s'exécute pas dans le navigateur, les méthodes BOM liées à js ne peuvent pas être utilisées. Tels qu'un document, une fenêtre, etc. Cependant, vous pouvez récupérer l'objet DOM correspondant à l'événement en cours. Par rapport à React, il n'est toujours pas recommandé d'utiliser dom, jq, zepto et autres bibliothèques d'outils, qui sont également difficiles à utiliser

2. Il a sa propre syntaxe, qui nécessite du temps d'apprentissage, mais. la courbe d'apprentissage n'est pas abrupte

3. L'introduction directe de node_modules n'est actuellement pas prise en charge. Lorsque les développeurs ont besoin d'utiliser node_modules, il est recommandé de copier le code correspondant dans le répertoire du mini programme. sera plus contraignant et nécessite beaucoup de travail manuel

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!