微信小程序數(shù)據(jù)處理 的核心就是js文件 Page 的 data。他是WXML 和js交互的重要橋梁，WXML 頁(yè)面需要展示的數(shù)據(jù)都需要被定義在data中，否則就無(wú)法在頁(yè)面進(jìn)行展示。data中的數(shù)據(jù)是通過(guò)網(wǎng)絡(luò)請(qǐng)求或者一些邏輯處理進(jìn)行設(shè)置以及初始化的。
data數(shù)據(jù)的設(shè)置有兩種方式，例如我們data中的有一個(gè)name并且初始化為空
data:{
name:'我是初始化的name'
}
當(dāng)有多個(gè)數(shù)據(jù)時(shí)用逗號(hào)英文逗號(hào)‘,’進(jìn)行分開(kāi)，那么如果我們想更改數(shù)據(jù)就可以
//方式1
this.data.name='我現(xiàn)在name值是Code4Android'
//方式2
this.setData({
name:'我現(xiàn)在name值是Code4Android'
})
不過(guò)用哪 一種方式，經(jīng)過(guò)處理后，name的值都會(huì)變?yōu)椤拔椰F(xiàn)在name值是Code4Android”，我們可以通過(guò)this.data.name來(lái)取出name的值。也許你會(huì)有疑問(wèn)，這兩種方式有什么區(qū)別嗎？
那我們現(xiàn)在WXML中創(chuàng)建一個(gè)view用來(lái)顯示name的值
<view>{{name}}</view>
當(dāng)我們需要將data中的數(shù)據(jù)顯示在頁(yè)面上時(shí)。需要用大括號(hào)來(lái)獲取data中的值并將其顯示，通過(guò)上面的兩種方式，發(fā)現(xiàn)方式1設(shè)置后，頁(yè)面上的數(shù)據(jù)并沒(méi)有發(fā)生改變，依然是初始化的值，當(dāng)使用第二種方式時(shí)數(shù)據(jù)發(fā)生改變，這時(shí)候你應(yīng)該就明白兩者區(qū)別了。
當(dāng)數(shù)據(jù)是一個(gè)對(duì)象時(shí)，如
data:{
people:{
name:'Code4Android',
address:'河南'
}
}
那么我們想修改people對(duì)象并顯示
this.setData({
people:{
name:'Code4Android1',
address:'河南'
}
})
此時(shí)people對(duì)象時(shí)被全部修改了，有時(shí)候，我們只需要修改部分?jǐn)?shù)據(jù)，例如在上面，我們只需要修改name屬性，address的值不變化，可以如下方式修改
this.setData({
'people.name': 'Code4Android'
})
如果有一個(gè)數(shù)組，里面放著people對(duì)象
this.setData({
'peoples[0].name': 'Code4Android'
})
當(dāng)我們data中有一個(gè)type值，不同的值要顯示不同的字，例如type有1,2,3三種值，分別表示初中，高中，大學(xué)。那么當(dāng)服務(wù)端返回值后，我們?cè)撊绾螌ype值轉(zhuǎn)換為對(duì)應(yīng)的字符顯示呢。在這里提供三種方式
<!--方式1，使用三元表達(dá)式-->
<view>{{type==1 ?'初中':(type==2?'高中':'大學(xué)')}}</view>
<!--方式2，使用條件渲染-->
<view wx:if="{{type==1}}">初中</view>
<view wx:elif="{{type==2}}">高中</view>
<view wx:else>大學(xué)</view>
<!--方式3，js對(duì)數(shù)據(jù)預(yù)處理，jsdata中增加typeName-->
js文件相應(yīng)預(yù)處理：
var typeName = ''
if (this.data.type == 1) {
typeName = '初中'
} else if (this.data.type = 2) {
typeName = '高中'
} else {
typeName = '大學(xué)'
}
this.setData({
typeName: typeName
})
WXML:中顯示
<view>{{typeName}}</view>
在WXML文件中，往往我們會(huì)根據(jù)不同的狀態(tài)顯示不同的樣式，此時(shí)就需要根據(jù)不同的狀態(tài)展示不同的樣式，例如，一個(gè)view當(dāng)data中的isSelected為true時(shí)背景為紅色，字體顏色為白色，否則背景為灰色（#ddd）,那么可下面兩種方式實(shí)現(xiàn)
<!--方式1，直接使用style -->
<view style="{{isSelected==true ? 'background-color:#ff0000;color:#fff':'background-color:#ddd;color:#000000'}}">按鈕</view>
<!--style也可以style="{{isSelected? 'background-color:#ff0000;color:#fff':'background-color:#ddd;color:#000000'}}"-->
<!--方式2，使用class-->
<view class="{{isSelected ?'isSelected':'noSelected'}}">按鈕</view>
wxss:
.isSelected {
background-color: #f00;
color: #fff;
}
.noSelected {
background-color: #ddd;
color: #000;
}
頁(yè)面數(shù)據(jù)傳遞
當(dāng)我們打開(kāi)一個(gè)新頁(yè)面時(shí)往往使用 wx.navigateTo,如果想傳遞到新打開(kāi)頁(yè)面數(shù)據(jù)，則可以在url后拼接？key=value的形式，多個(gè)參數(shù)用&分開(kāi)、例如
wx.navigateTo({
url: '/pages/mypage/mypage?name=Code4Android',
})`
通過(guò)navigateTo打開(kāi)新頁(yè)面后，新的頁(yè)面會(huì)限制性onLoad方法，該方法有一個(gè)options參數(shù)，然后通過(guò)options.name就可以獲取傳遞的數(shù)據(jù)。
如果我們想傳遞Object對(duì)象，例如上面聲明的people，此時(shí)如果在url拼接'?people='+people，發(fā)現(xiàn)接收時(shí)數(shù)據(jù)無(wú)法正常解析，此時(shí)我們可以使用下面方法傳遞
var string = JSON.stringify(this.data.people)
wx.navigateTo({
url: '/pages/mypage/mypage?people='+string ,
})`
接收后通過(guò)
var string =options.people
var obj=JSON.parse(string)
然后obj就是我們JSON對(duì)象了，我們可以obj.name獲取屬性值。你以為這樣就萬(wàn)事大吉了嗎？當(dāng)然不是；例如我們上面的people對(duì)象數(shù)據(jù)時(shí)這樣的
data:{
people: {
name: '名字&名字',
age: 25,
address: '河南'
}
}
此時(shí)通過(guò)上面方法傳遞數(shù)據(jù)通過(guò)JSON.parse發(fā)現(xiàn)報(bào)錯(cuò)了，從錯(cuò)誤原因很容易看出來(lái)，此時(shí)獲取的people不是一個(gè)完整的字符串，原因就是name屬性中含有‘&’,而小程序認(rèn)為&前的部分是people的值，&后的數(shù)據(jù)時(shí)七天部分?jǐn)?shù)據(jù)。所以導(dǎo)致people不是一個(gè)完整的json對(duì)象，則導(dǎo)致parse失敗異常。
那么這時(shí)候該如何傳遞數(shù)據(jù)呢，我的解決思路有兩個(gè)，一個(gè)是將上面string中的&符號(hào)全部替換掉，如
var string = JSON.stringify(this.data.people)
wx.navigateTo({
url: '/pages/mypage/mypage?people='+string.replace(/&/g, ''),
})`
那么此時(shí)接收的數(shù)據(jù)可以正常解析了，但是你會(huì)發(fā)現(xiàn)名字中的&沒(méi)有了，如果你對(duì)符號(hào)&沒(méi)有特殊要求，即&沒(méi)有代表特殊含義時(shí)可以替換掉，亦或者將&替換成其他唯一字符，然后再替換回來(lái)。
當(dāng)然我們也可以使用wx.setStorageSync("people", this.data.people)將數(shù)據(jù)保存，然后在新打開(kāi)的頁(yè)面wx.getStorageSync("people")將數(shù)據(jù)取出，并且取出的數(shù)據(jù)結(jié)構(gòu)和存儲(chǔ)的一樣。
有很多時(shí)候，我們需要將當(dāng)前頁(yè)面選擇的數(shù)據(jù)，返回到上一個(gè)頁(yè)面，那么該如何操作呢，例如頁(yè)面1顯示一個(gè)地址信息，并且有一個(gè)更改地址按鈕，跳轉(zhuǎn)新頁(yè)面2選擇地址，并將選擇的地址在1頁(yè)面展示。
var pages = getCurrentPages()
pages[pages.length - 2].setData({
address: address
})
說(shuō)道頁(yè)面?zhèn)鬟f數(shù)據(jù)，我們常見(jiàn)的就是當(dāng)前頁(yè)面是一個(gè)列表數(shù)據(jù)，點(diǎn)擊某一個(gè)item時(shí)將數(shù)據(jù)傳遞到新的頁(yè)面，那么我們?nèi)绾未_定當(dāng)前點(diǎn)擊項(xiàng)的數(shù)據(jù)呢？
<block wx:for="{{peoples}}" wx:for-index="id" data-index="{{id}}" bindtap="select">
<!---給每個(gè)菜單定義一個(gè)index值 -->
<view data-name="{{item.name}}">
<text >{{item.address}}</text>
</view>
</block>
wx:for="{{peoples}}"就是講peoples數(shù)據(jù)循環(huán)渲染，和Android ListView效果一樣， wx:for-index是自定義當(dāng)然顯示item的索引鍵名字，data-是自定義數(shù)據(jù)，data-后面部分是自定義的，在data-自定義的數(shù)據(jù)通過(guò)e.currentTarget.dataset獲取。例如上面點(diǎn)擊事件
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, ''),
})`
},
