微信小程式資料處理

Code4Android發表於2019-03-03
微信小程式

微信小程式資料處理 的核心就是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, ``),
       })`
  },複製程式碼

相關文章