Explication détaillée du traitement des données mis en œuvre par l'applet WeChat

Cet article vous présente principalement les informations pertinentes sur le traitement des données dans les mini-programmes WeChat. L'introduction dans l'article est très détaillée et a une certaine valeur de référence et d'apprentissage pour tous les amis dans le besoin. ensemble. .

Avant-propos

Le cœur du traitement des données de l'applet WeChat est constitué par les données du fichier js Page. Il s'agit d'un pont important entre WXML et js. Les données qui doivent être affichées sur la page WXML doivent être définies dans data, sinon elles ne peuvent pas être affichées sur la page. Les données dans les données sont définies et initialisées via des requêtes réseau ou un traitement logique.

Il existe deux façons de définir les données. Par exemple, il y a un nom dans nos données et il est initialisé pour être vide

data:{
 name:'我是初始化的name'
}

Quand il y a Lorsque plusieurs données sont séparées par des virgules ',', alors si nous voulons modifier les données, nous pouvons

 //方式1
 this.data.name='我现在name值是Code4Android'
 //方式2
 this.setData({
 name:'我现在name值是Code4Android'
 })

Mais quelle méthode est utilisée , après le traitement, la valeur de name deviendra "Ma valeur actuelle de nom est Code4Android", nous pouvons utiliser this.data.name pour obtenir la valeur de name. Peut-être avez-vous des questions, quelle est la différence entre ces deux méthodes ?

Ensuite, nous créons maintenant une vue en WXML pour afficher la valeur du nom

<view>{{name}}</view>

Quand nous devons afficher les données dans data pendant que vous êtes sur la page. Vous devez utiliser des accolades pour obtenir la valeur dans les données et l'afficher. Grâce aux deux méthodes ci-dessus, il s'avère qu'après avoir défini la méthode 1, les données sur la page n'ont pas changé et constituent toujours la valeur initialisée lors de l'utilisation de la seconde. méthode Lorsque les données changent, vous devez comprendre la différence entre les deux.

Lorsque les données sont un objet, tel que

data:{
people:{
 name:'Code4Android',
 address:'河南'
}
}

alors nous souhaitons modifier l'objet personnes et afficher

 this.setData({
 people:{
 name:'Code4Android1',
 address:'河南'
 }
 })

À l'heure actuelle, l'objet personnes a été complètement modifié. Parfois, nous n'avons besoin de modifier qu'une partie des données. Par exemple, dans ce qui précède, nous n'avons besoin que de modifier. l'attribut name et la valeur de l'adresse ne change pas. Cela peut être comme suit Modifier la méthode

 this.setData({
 'people.name': 'Code4Android'
 })

S'il existe un tableau contenant des objets personnes

 this.setData({
 'peoples[0].name': 'Code4Android'
 })

lorsque nous avons une valeur de type dans les données. Différentes valeurs doivent afficher des mots différents. Par exemple, le type a trois valeurs​​1, 2,. et 3, qui représentent respectivement le collège, le lycée et l'université. Ainsi, lorsque le serveur renvoie la valeur, comment convertir la valeur de type en affichage de caractères correspondant. Trois méthodes sont proposées ici

 <!--方式1，使用三元表达式-->
 <view>{{type==1 ?&#39;初中&#39;:(type==2?&#39;高中&#39;:&#39;大学&#39;)}}</view>
<!--方式2，使用条件渲染-->
<view wx:if="{{type==1}}">初中</view>
<view wx:elif="{{type==2}}">高中</view>
<view wx:else>大学</view>
<!--方式3，js对数据预处理，jsdata中增加typeName-->
js文件相应预处理：
 var typeName = &#39;&#39;
 if (this.data.type == 1) {
 typeName = &#39;初中&#39;
 } else if (this.data.type = 2) {
 typeName = &#39;高中&#39;
 } else {
 typeName = &#39;大学&#39;
 }
 this.setData({
 typeName: typeName
 })

WXML:中显示
<view>{{typeName}}</view>

Dans les fichiers WXML, nous affichons souvent différents styles selon différents états. À ce stade, nous devons les afficher selon différents états. . Différents styles, par exemple, lorsque isSelected dans les données d'une vue est vrai, l'arrière-plan est rouge et la couleur de la police est blanche, sinon l'arrière-plan est gris (#ddd), alors les deux manières suivantes peuvent être implémentées

<!--方式1，直接使用style -->
 <view style="{{isSelected==true ? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}">按钮</view>
<!--style也可以style="{{isSelected? &#39;background-color:#ff0000;color:#fff&#39;:&#39;background-color:#ddd;color:#000000&#39;}}"-->
<!--方式2，使用class-->
 <view class="{{isSelected ?&#39;isSelected&#39;:&#39;noSelected&#39;}}">按钮</view>

wxss:
.isSelected {
 background-color: #f00;
 color: #fff;
}

.noSelected {
 background-color: #ddd;
 color: #000;
}

Transfert de données de page

Lorsque nous ouvrons une nouvelle page, nous utilisons souvent

si nous voulons le transférer vers la page nouvellement ouverte, les données peuvent être épissées sous la forme de wx.navigateTo après l'url, et plusieurs paramètres sont séparés par &, par exemple, ？key=value

wx.navigateTo({
 url: '/pages/mypage/mypage?name=Code4Android',
 })`

Après avoir ouvert une nouvelle page vianavigaTo, la nouvelle page Il y aura une méthode onLoad restrictive, qui a un paramètre options, et les données transmises pourront ensuite être obtenues via

. options.name

Si nous voulons transmettre des objets Object, tels que les personnes déclarées ci-dessus, si nous épissons

dans l'URL, nous constatons que les données ne peuvent pas être analysées normalement lors de la réception, nous pouvons utiliser. la méthode suivante pour passer '?people='+people

var string = JSON.stringify(this.data.people)
wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string ,
 })`

Après l'avoir reçu, passer

var string =options.people
var obj=JSON.parse(string)

puis obj est notre objet JSON, nous pouvons

obtenir la valeur de l'attribut. Pensez-vous que tout ira bien de cette façon ? Bien sûr que non ; par exemple, nos données d'objet ci-dessus ressemblent à ceci : obj.name

data:{
 people: {
 name: '名字&名字',
 age: 25,
 address: '河南'
 }
}

À ce stade, les données sont transmises via la méthode ci-dessus et une erreur est générée. signalé via

. La raison de l'erreur est très claire. Il est facile de voir que les personnes obtenues à ce moment ne sont pas une chaîne complète. La raison est que l'attribut name contient '&', et l'applet le croit. la partie avant & est la valeur des personnes, et les données après & sont les données partielles de sept jours. Par conséquent, people n'est pas un objet json complet, ce qui entraîne un échec anormal de l'analyse. JSON.parse

Alors, comment transférer des données à ce stade ? J'ai deux solutions. La première consiste à remplacer tous les symboles & dans la chaîne ci-dessus, tels que

.

var string = JSON.stringify(this.data.people)
wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
 })`

Ensuite, les données reçues à ce moment peuvent être analysées normalement, mais vous constaterez que le & dans le nom a disparu si vous n'avez pas d'exigences particulières pour le symbole &, c'est-à-dire si & ne représente pas. une signification particulière, vous pouvez le remplacer ou remplacer & par d'autres caractères uniques, puis les remplacer.

Bien sûr, nous pouvons également utiliser

pour enregistrer les données, puis récupérer les données sur la page nouvellement ouverte wx.setStorageSync("people", this.data.people), et la structure des données récupérées est la même que celle stockée . wx.getStorageSync("people")

有很多时候，我们需要将当前页面选择的数据，返回到上一个页面，那么该如何操作呢，例如页面1显示一个地址信息，并且有一个更改地址按钮，跳转新页面2选择地址，并将选择的地址在1页面展示。

 var pages = getCurrentPages()
 pages[pages.length - 2].setData({
 address: address
 })

说道页面传递数据，我们常见的就是当前页面是一个列表数据，点击某一个item时将数据传递到新的页面，那么我们如何确定当前点击项的数据呢？

 <block wx:for="{{peoples}}" wx:for-index="id" data-index="{{id}}" bindtap="select">
 <!---给每个菜单定义一个index值 -->
 <view data-name="{{item.name}}">
 <text >{{item.address}}</text>
 </view>
 </block>

wx:for="{{peoples}}"就是讲peoples数据循环渲染，和Android ListView效果一样， wx:for-index是自定义当然显示item的索引键名字，data-是自定义数据，data-后面部分是自定义的，在data-自定义的数据通过e.currentTarget.dataset获取。例如上面点击事件

select: function (e) {
 var index = e.currentaTrget.dataset.index
 var people = this.data.peoples[index]
 var string = JSON.stringify(this.data.people)
 wx.navigateTo({
 url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
 })`
 },

总结

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!