Detailed explanation of data processing implemented by WeChat applet

This article mainly introduces to you the relevant information about data processing in WeChat mini programs. The introduction in the article is very detailed and has a certain reference and learning value for everyone. Friends in need can refer to it. Let’s take a look together. .

Preface

The core of WeChat applet data processing is the data of the js file Page. It is an important bridge between WXML and js. The data that needs to be displayed on the WXML page needs to be defined in data, otherwise it cannot be displayed on the page. The data in data is set and initialized through network requests or some logical processing.

There are two ways to set data data. For example, there is a name in our data and it is initialized to empty

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

When there are multiple The data is separated by commas ',', then if we want to change the data, we can

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

But which method is used, after processing, the value of name It will all change to "My current name value is Code4Android". We can get the value of name through this.data.name. Maybe you have questions, what is the difference between these two methods?

Then we now create a view in WXML to display the value of name

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

When we need to display the data in the data on the page On time. You need to use curly brackets to get the value in data and display it. Through the above two methods, it is found that after setting method 1, the data on the page has not changed and is still the initialized value. When using the second method When the data changes, you should understand the difference between the two.

When the data is an object, such as

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

then we want to modify the people object and display

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

At this time, the people object has been completely modified. Sometimes, we only need to modify part of the data. For example, in the above, we only need to modify the name attribute, and the value of address does not change. It can be modified as follows

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

If there is an array containing people objects

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

When there is a type value in our data, it is different The value should display different characters. For example, type has three values: 1, 2, and 3, which represent junior high school, high school, and university respectively. So when the server returns the value, how do we convert the type value into the corresponding character display. Three methods are provided here

 <!--方式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>

In WXML files, we often display different styles according to different states. At this time, we need to display different styles according to different states. Style, for example, if the background of a view is red and the font color is white when isSelected in data is true, otherwise the background is gray (#ddd), then it can be implemented in the following two ways

<!--方式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;
}

Page data transfer

When we open a new page, we often use wx.navigateTo, if we want to transfer it to the new page Open the page data, can you splice after the url? In the form of key=value, multiple parameters are separated by &, for example

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

After opening a new page through navigateTo, the new page will restrict the onLoad method. The method has an options parameter, and then the passed data can be obtained through options.name.

If we want to pass Object objects, such as the people declared above, if we splice '?people='+people in the url, we will find that the data cannot be parsed normally when receiving. At this time we You can use the following method to pass

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

After receiving it, pass

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

and then obj is our JSON object, we can obj.nameGet the attribute value. Do you think everything will be fine this way? Of course not; for example, our people object data above looks like this

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

At this time, when passing data through the above method and passing JSON.parse, an error is reported. It is easy to see from the cause of the error that the people obtained at this time is not a complete string. The reason is that the name attribute contains '&', and the applet believes that the part before & is the value of people, and the data after & is the seven-day part. data. Therefore, people is not a complete json object, causing parse to fail abnormally.

So how to transfer data at this time? I have two solutions. One is to replace all the & symbols in the string above, such as

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

Then the data received at this time can be parsed normally, but you will find that the & in the name is gone. If you have no special requirements for the symbol &, that is, if & does not represent a special meaning, you can replace it, or Replace & with other unique characters and back again.

Of course we can also use wx.setStorageSync("people", this.data.people)Save the data and then open it on the newly opened pagewx.getStorageSync ("people")Retrieve the data, and the retrieved data structure is the same as the stored one.

有很多时候，我们需要将当前页面选择的数据，返回到上一个页面，那么该如何操作呢，例如页面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, ''),
 })`
 },

总结

The above is the detailed content of Detailed explanation of data processing implemented by WeChat applet. For more information, please follow other related articles on the PHP Chinese website!