鍍金池/ 問答/HTML/ 小程序 購物車

小程序 購物車

微信小程序 購物車
在全局（app.js）中請(qǐng)求購物車數(shù)據(jù)，在購物車頁面（cart.wxml）中onLoad中this.carts = app.globalData.carts。
購物車頁面中常有一些選中、刪除某個(gè)商品、修改商品數(shù)量的操作：
如選中第一個(gè)商品，修改第二個(gè)商品的數(shù)量：

this.data.carts[0].selected = true
this.data.carts[1].quantity = 6

把修改后的購物車商品發(fā)送請(qǐng)求保存到后臺(tái)

wx.request('updateCart', data: {
  carts: this.data.carts
},
success: function() {
  // Q1
  // 我的疑問是直接通過this.setData({carts:this.data.carts}) 去更新視圖，
  // 還是在這發(fā)送獲取購物車數(shù)據(jù)請(qǐng)求，通過請(qǐng)求到的數(shù)據(jù)res.data，
  // this.setData({carts:res.data})去更新視圖？
  // Q2
  // 我是不是不應(yīng)該直接更改carts，如果'updateCart'請(qǐng)求不成功，又無法恢復(fù)到原數(shù)據(jù)，就會(huì)導(dǎo)致數(shù)據(jù)源和視圖不一致的情況？
})
回答
編輯回答
枕邊人

A1:
1.app.globalData你得把它看成page頁面、小程序全局的缺省值，而不是存放動(dòng)態(tài)數(shù)據(jù)的地方；
2.小程序的官方思路是，page內(nèi)的setData只負(fù)責(zé)當(dāng)前頁面，也只綁定當(dāng)前頁面。所以當(dāng)前頁面的雙向綁定數(shù)據(jù)都用setData；
3.通過雙向綁定機(jī)制，使得不用DOM操作。你可以把存在data的數(shù)據(jù)當(dāng)成是數(shù)據(jù)源（真正的數(shù)據(jù)部分），wxml只是把這個(gè)數(shù)據(jù)渲染出來顯示，當(dāng)你要更新或獲取時(shí)，success獲得更新數(shù)據(jù)，再setData時(shí)，wxml才會(huì)也同步更新。因?yàn)閟etData的作用就是賦值到data + 更新wxml。

A2:
success只是request成功后的執(zhí)行，如果不成功：
1.request的問題：會(huì)觸發(fā)error。
2.狀態(tài)碼的問題：request沒問題，只是當(dāng)前賬號(hào)狀態(tài)、參數(shù)、數(shù)據(jù)等異常，則一般用code或errcode之類的狀態(tài)碼來識(shí)別，這個(gè)和后端溝通。異常則不執(zhí)行setData。

2017年6月12日 22:54
編輯回答
尛曖昧

謝邀！
個(gè)人理解比較嚴(yán)格的流程如下，舉例修改數(shù)量:
當(dāng)數(shù)量input框blur事件時(shí)
this.data.carts[1].oldQuantity=this.data.carts[1].quantity

當(dāng)input實(shí)時(shí)修改時(shí)把當(dāng)前值穿給后臺(tái)，成功就跳過，不成功則把當(dāng)前值設(shè)回old值。

這是表單實(shí)時(shí)更改步驟。

如果整個(gè)表單提交再修改的話也差不多，只是在提交表單時(shí)去處理。

2018年2月15日 07:38