微信小程序學習之數據處理詳解

前言

微信小程序數據處理 的核心就是js文件 Page 的 data。他是WXML 和js交互的重要橋梁，WXML 頁面需要展示的數據都需要被定義在data中，否則就無法在頁面進行展示。data中的數據是通過網絡請求或者一些邏輯處理進行設置以及初始化的。

data數據的設置有兩種方式，例如我們data中的有一個name并且初始化為空

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

當有多個數據時用逗號英文逗號‘,'進行分開，那么如果我們想更改數據就可以

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

不過用哪 一種方式，經過處理后，name的值都會變?yōu)椤拔椰F在name值是Code4Android”，我們可以通過this.data.name來取出name的值。也許你會有疑問，這兩種方式有什么區(qū)別嗎？

那我們現在WXML中創(chuàng)建一個view用來顯示name的值

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

當我們需要將data中的數據顯示在頁面上時。需要用大括號來獲取data中的值并將其顯示，通過上面的兩種方式，發(fā)現方式1設置后，頁面上的數據并沒有發(fā)生改變，依然是初始化的值，當使用第二種方式時數據發(fā)生改變，這時候你應該就明白兩者區(qū)別了。

當數據是一個對象時，如

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

那么我們想修改people對象并顯示

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

此時people對象時被全部修改了，有時候，我們只需要修改部分數據，例如在上面，我們只需要修改name屬性，address的值不變化，可以如下方式修改

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

如果有一個數組，里面放著people對象

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

當我們data中有一個type值，不同的值要顯示不同的字，例如type有1,2,3三種值，分別表示初中，高中，大學。那么當服務端返回值后，我們該如何將type值轉換為對應的字符顯示呢。在這里提供三種方式

 <!--方式1，使用三元表達式-->
 <view>{{type==1 ?'初中':(type==2?'高中':'大學')}}</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 = ''
 if (this.data.type == 1) {
 typeName = '初中'
 } else if (this.data.type = 2) {
 typeName = '高中'
 } else {
 typeName = '大學'
 }
 this.setData({
 typeName: typeName
 })

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

在WXML文件中，往往我們會根據不同的狀態(tài)顯示不同的樣式，此時就需要根據不同的狀態(tài)展示不同的樣式，例如，一個view當data中的isSelected為true時背景為紅色，字體顏色為白色，否則背景為灰色（#ddd）,那么可下面兩種方式實現

<!--方式1，直接使用style -->
 <view >按鈕</view>
<!--style也可以-->
<!--方式2，使用class-->
 <view class="{{isSelected ?'isSelected':'noSelected'}}">按鈕</view>

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

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

頁面數據傳遞

當我們打開一個新頁面時往往使用 wx.navigateTo ,如果想傳遞到新打開頁面數據，則可以在url后拼接？key=value的形式，多個參數用&分開、例如

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

通過navigateTo打開新頁面后，新的頁面會限制性onLoad方法，該方法有一個options參數，然后通過options.name就可以獲取傳遞的數據。

如果我們想傳遞Object對象，例如上面聲明的people，此時如果在url拼接 '?people='+people，發(fā)現接收時數據無法正常解析，此時我們可以使用下面方法傳遞

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

接收后通過

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

然后obj就是我們JSON對象了，我們可以obj.name獲取屬性值。你以為這樣就萬事大吉了嗎？當然不是；例如我們上面的people對象數據時這樣的

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

此時通過上面方法傳遞數據通過JSON.parse發(fā)現報錯了，從錯誤原因很容易看出來，此時獲取的people不是一個完整的字符串，原因就是name屬性中含有‘&',而小程序認為&前的部分是people的值，&后的數據時七天部分數據。所以導致people不是一個完整的json對象，則導致parse失敗異常。

那么這時候該如何傳遞數據呢，我的解決思路有兩個，一個是將上面string中的&符號全部替換掉，如

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

那么此時接收的數據可以正常解析了，但是你會發(fā)現名字中的&沒有了，如果你對符號&沒有特殊要求，即&沒有代表特殊含義時可以替換掉，亦或者將&替換成其他唯一字符，然后再替換回來。

當然我們也可以使用wx.setStorageSync("people", this.data.people)將數據保存，然后在新打開的頁面wx.getStorageSync("people")將數據取出，并且取出的數據結構和存儲的一樣。

有很多時候，我們需要將當前頁面選擇的數據，返回到上一個頁面，那么該如何操作呢，例如頁面1顯示一個地址信息，并且有一個更改地址按鈕，跳轉新頁面2選擇地址，并將選擇的地址在1頁面展示。

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

說道頁面?zhèn)鬟f數據，我們常見的就是當前頁面是一個列表數據，點擊某一個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數據循環(huán)渲染，和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, ''),
 })`
 },

總結

以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。