Explication détaillée de la couche de vue (xx.xml) et de la couche logique (xx.js) dans le développement WeChat

Cet article présente principalement des informations pertinentes sur l'introduction détaillée de la couche de vue (xx.xml) et de la couche logique (xx.js) de l'applet WeChat. Les amis dans le besoin peuvent s'y référer

Le WeChat. L'applet peut comprendre Pour le concept de système d'exploitation cloud, l'écosystème WeChat lui-même est un système d'exploitation. De plus, la plate-forme publique WeChat et la plate-forme de développement WeChat elles-mêmes sont déjà des structures très matures, qui peuvent parfaitement correspondre aux fonctions des applications. En même temps, elles peuvent également atteindre le nec plus ultra en matière d'expérience interactive et ont le potentiel de remplacer les applications. L’importance du modèle Apple App Store est de fournir aux fournisseurs de logiciels tiers une plateforme de vente de logiciels pratique et efficace. Les frais payés par les utilisateurs pour acheter des applications sont répartis à 3 : 7 entre Apple et les développeurs d’applications. Si le mini centre commercial WeChat adopte également un modèle de commission similaire, les plus de 800 millions d'utilisateurs constitueront un actif incorporel très important et deviendront une autre source d'or pour Tencent après les jeux, les adhésions et la publicité.

Les mini-programmes WeChat permettent aux gens d'utiliser des applications sans les télécharger ni les installer. Les utilisateurs peuvent scanner le code QR sur WeChat pour ouvrir le programme. L'applet WeChat peut être appliquée sur différents systèmes tels qu'Android et iOS, et peut également être partagée sur différentes plates-formes, car elle est elle-même similaire à une page de site Web.

Mini couche de vue du programme (xx.xml) et couche logique (xx.js)

L'ensemble du système est divisé en deux parties Le framework de la couche de vue (View) et de la couche logique (App Service)

peut synchroniser les données et la vue 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.

Regardez cet exemple simple :

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. Le développeur lie le nom dans les données de la couche logique au nom dans la couche de vue via le framework. Alors, quand. la page est ouverte, elle affichera Hello WeChat !

2. Lorsque le bouton est cliqué, la couche de vue enverra l'événement changeName à la couche logique, et la couche logique trouvera le correspondant fonction de traitement d'événements

3. La couche logique effectue l'opération setData et change le nom de WeChat en MINA. Étant donné que les données ont été liées à la couche de vue, la couche de vue deviendra automatiquement Hello. MINA!.

La couche de vue est xx.xml

La couche logique est xx.js

Read It examinera d'abord les données initiales de la couche logique pour remplir la couche de vue. La couche de vue déclenche des événements dans la couche logique, et la couche logique renvoie et modifie le contenu de la couche de vue.

Couche logique (App Service)

La couche logique du framework de développement d'applets est écrite en JavaScript.

La couche logique traite les données et les envoie à la couche de vue, et accepte en même temps les commentaires d'événements de la couche de vue. Basé sur JavaScript, nous avons apporté quelques modifications pour faciliter le développement de petits programmes.

1. Ajoutez des méthodes App et Page pour enregistrer des programmes et des pages.

2. Fournit une API riche, telle que la numérisation, le paiement et d'autres fonctionnalités spécifiques à WeChat.

3. Chaque page a une portée indépendante et offre des fonctionnalités modulaires.

4. Étant donné que le framework ne s'exécute pas dans le navigateur, certaines fonctionnalités de JavaScript ne peuvent pas être utilisées sur le Web, comme le document, la fenêtre, etc.

5. Tout le code écrit par le développeur sera finalement empaqueté dans un JavaScript et exécuté au démarrage du mini-programme jusqu'à ce que le mini-programme soit détruit. Semblable à ServiceWorker, la couche logique est également appelée App Service.
   

Données d'initialisation

Les données d'initialisation seront utilisées comme premier rendu de la page. Les données seront transmises de la couche logique à la couche de rendu sous forme de JSON, les données doivent donc être dans un format pouvant être converti en JSON : chaînes, nombres, valeurs booléennes, objets et tableaux.

La couche de rendu peut lier des données via WXML.

Exemple de code :

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

la fonction setData est utilisée Envoyez les données de la couche logique à la couche de vue et modifiez la valeur correspondante de this.data.

Remarque :

1. La modification directe de ces données n'est pas valide et ne peut pas modifier le statut de la page, ce qui entraînera également une incohérence des données. .
2. Les données définies à la fois ne peuvent pas dépasser 1024 Ko. Veuillez essayer d'éviter de définir trop de données à la fois

format de paramètre setData()

<.>Accepter Un objet, sous la forme de

clé, valeur, représente le changement de la valeur correspondant à la clé dans this.data en valeur.

La clé peut être très flexible, donnée sous la forme d'un chemin de données, tel que array[2].message, a.b.c.d, et n'a pas besoin d'être prédéfinie dans this.data.

Exemple de code :

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

Couche de vue

La couche de vue du framework est écrite par WXML et

WXSS , affiché par composants.

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

2. 事件可以将用户的行为反馈到逻辑层进行处理。

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如id, dataset, touches。
   

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

3. 利用组件开发微信小程序日历的详细方法

4. 小程序开发之利用co处理异步流程的实例教程

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!