微信小程序數據處理

微信小程序數據處理 的核心就是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的值都會變爲「我如今name值是Code4Android」，咱們能夠經過this.data.name來取出name的值。也許你會有疑問，這兩種方式有什麼區別嗎？
那咱們如今WXML中建立一個view用來顯示name的值

&ltview>{{name}}</view>複製代碼

當咱們須要將data中的數據顯示在頁面上時。須要用大括號來獲取data中的值並將其顯示，經過上面的兩種方式，發現方式1設置後，頁面上的數據並無發生改變，依然是初始化的值，當使用第二種方式時數據發生改變，這時候你應該就明白二者區別了。
當數據是一個對象時，如

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，使用三元表達式
&ltview>{{type==1 ?'初中':(type==2?'高中':'大學')}}</view>
//方式2，使用條件渲染
&ltview wx:if="{{type==1}}">初中 </view>
&ltview wx:elif="{{type==2}}">高中</view>
&ltview 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:中顯示
&ltview>{{typeName}}</view>複製代碼

在WXML文件中，每每咱們會根據不一樣的狀態顯示不一樣的樣式，此時就須要根據不一樣的狀態展現不一樣的樣式，例如，一個view當data中的isSelected爲true時背景爲紅色，字體顏色爲白色，不然背景爲灰色（#ddd）,那麼可下面兩種方式實現

<!--方式1，直接使用style -->
  &ltview 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-->
&ltview 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，發現接收時數據沒法正常解析，此時咱們可使用下面方法傳遞

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發現報錯了，從錯誤緣由很容易看出來，此時獲取的people不是一個完整的字符串，緣由就是name屬性中含有‘&’,而小程序認爲&前的部分是people的值，&後的數據時七天部分數據。因此致使people不是一個完整的json對象，則致使parse失敗異常。
那麼這時候該如何傳遞數據呢，個人解決思路有兩個，一個是將上面string中的&符號所有替換掉，如

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

那麼此時接收的數據能夠正常解析了，可是你會發現名字中的&沒有了，若是你對符號&沒有特殊要求，即&沒有表明特殊含義時能夠替換掉，亦或者將&替換成其餘惟一字符，而後再替換回來。
固然咱們也可使用wx.setStorageSync("people", this.data.people)將數據保存，而後在新打開的頁面wx.getStorageSync("people")將數據取出，而且取出的數據結構和存儲的同樣。

有不少時候，咱們須要將當前頁面選擇的數據，返回到上一個頁面，那麼該如何操做呢，例如頁面1顯示一個地址信息，而且有一個更改地址按鈕，跳轉新頁面2選擇地址，並將選擇的地址在1頁面展現。

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

說道頁面傳遞數據，咱們常見的就是當前頁面是一個列表數據，點擊某一個item時將數據傳遞到新的頁面，那麼咱們如何肯定當前點擊項的數據呢？

&ltblock wx:for="{{peoples}}"  wx:for-index="id" data-index="{{id}}" bindtap="select">
      <!---給每一個菜單定義一個index值 -->
      &ltview  data-name="{{item.name}}">
        &lttext >{{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, ''),
       })`
  },複製代碼