數(shù)據(jù)綁定?
微信小程序的數(shù)據(jù)綁定與vue相似，數(shù)據(jù)來源是通過js?中的data來綁定
在js的page中定義數(shù)據(jù)，數(shù)據(jù)格式不限制，定義如下：
在頁面中訪問數(shù)據(jù)的時(shí)候用{{}}符號(hào)調(diào)用這些數(shù)據(jù)即可，并且這些數(shù)據(jù)在js的函數(shù)中可以使用setData()函數(shù)來改變數(shù)據(jù)，具體函數(shù)可參看下面的bingChange函數(shù) （注意：在頁面中復(fù)制為true和false的時(shí)候必須加上{{}}否則不識(shí)別）
data: {
? open: false ,
? ? src:'',
? ? motto: 'Hello World',
? ? userInfo: {},
? ? hasUserInfo: false,? ? system:{},? ? item:[? ? ],
currentTab:0,
}
bindChange: function (e) {
var that = this;
that.setData({
currentTab: e.detail.current
});
},
數(shù)據(jù)的操作
? ? ? ?在頁面的操作中，我們需要對data中的數(shù)據(jù)進(jìn)行增刪改查來實(shí)現(xiàn)一些功能，但是由于微信小程序的數(shù)據(jù)是單向綁定的，所以我們在操作完數(shù)據(jù)后需要用setData函數(shù)來更新視圖，顯示的內(nèi)容才能改變，而setData函數(shù)也比較特殊，只支持key-value數(shù)據(jù)操作，這樣操作就比較麻煩。（注：在刪除和修改的操作中我們需要知道所修改和刪除的數(shù)據(jù)在數(shù)組的位置，我用的方法是在循環(huán)讀出數(shù)組的時(shí)候，在每個(gè)數(shù)據(jù)上設(shè)置了一個(gè)id就是數(shù)據(jù)的索引）
? ? ?我的數(shù)據(jù)如下：
page({
? ? data:{
wenzhang:[
{
name:'隨心遠(yuǎn)行', collection: 2,
collected:false,
collSrc:'/images/use_sc.png',
reading: 1,
date: '2016-8-13' },
{
name: '開心麻花', collection: 6,
collSrc:'/images/use_sc.png',
collected:false,
reading: 3,
date:'2017-8-13' }]
? ? }
? ? })
1、添加
?可以使用js的push，將要插入的數(shù)據(jù)插入，但是如果有向前如或者向后插入的話可以用js的concat()來實(shí)現(xiàn)
//向前增加數(shù)據(jù)
add_before:function (){
//要增加的數(shù)組
varnewarray = [{
name:'隨心遠(yuǎn)行',
collection: 2,
collected:false,
collSrc:'/images/use_sc.png',
reading: 1,
date: '2016-8-13'
}]; //使用concat()來把兩個(gè)數(shù)組合拼起來
this.data.wenzhang = newarray.concat(this.data.wenzhang );
?//將合拼之后的數(shù)據(jù)，發(fā)送到視圖層，即渲染頁面 //大伙請記錄，修改了數(shù)據(jù)后，一定要再次執(zhí)行`this.setData()`，頁面才會(huì)渲染數(shù)據(jù)的。
this.setData({
?'wenzhang ':this.data.wenzhang
?});?
? 向后插入數(shù)據(jù)
//向后增加數(shù)據(jù)add_after:function (){
? ? //要增加的數(shù)組varnewarray = [{
name:'隨心遠(yuǎn)行',
collection: 2,
collected:false,
collSrc:'/images/use_sc.png',
reading: 1,
date: '2016-8-13'
}];
this.setData({
?'wenzhang':this.data.wenzhang.concat(newarray)?
});?
},
2、修改
在修改的時(shí)候，可以像上面那樣直接對數(shù)據(jù)修改，然后用setData函數(shù)更新，也可以直接賦值，直接將要改變的值作為key語法報(bào)錯(cuò)，因此就將要改變的值提前用變量替換，然后再賦值，數(shù)據(jù)改變，頁面也重新渲染。
collect:function (e) {
? ? console.log(e.currentTarget.dataset);
? ? varthat =this;
? ? varindex = e.currentTarget.dataset.id
//要?jiǎng)h除的數(shù)據(jù)的在數(shù)組中的索引
console.log(index);?
if(!that.data.wenzhang[index].collected){?
// this.data.wenzhang[index].collection += 1;
varwenzhanglist = that.data.wenzhang
?// wenzhanglist[index].collection += 1;
var up = "wenzhang[" + index + "].collection";?
var up2 = "wenzhang[" + index + "].collSrc"; varup3 = "wenzhang[" + index + "].collected";?
// console.log(wenzhanglist);?
that.setData({
?[up]: wenzhanglist[index].collection += 1,?
[up2]:'/images/shced.png', [up3]: 'true'?
});?
}
3、刪除
刪除數(shù)組的數(shù)據(jù)的時(shí)候就定位到元素，用splice函數(shù)刪除splice（數(shù)據(jù)的位置，刪除的個(gè)數(shù)），普通數(shù)據(jù)可以用直接賦值為空的方式進(jìn)行刪除
showping:function(e){
? ? console.log(e.currentTarget.dataset);
? ? varindex = e.currentTarget.dataset.id? //要?jiǎng)h除的數(shù)據(jù)的在數(shù)組中的索引
? ? console.log(index);
? ? ? this.data.wenzhang.splice(index, 1);
? ? ? this.setData({
? ? ? ? wenzhang: this.data.wenzhang
? ? ? });
? },
事件綁定
1、綁定事件
在微信小程序中頁面事件響應(yīng)機(jī)制是，在頁面綁定事件，然后在js的page中定義相應(yīng)的事件處理函數(shù)，就可以了。事件的參數(shù)可以在標(biāo)簽中加上data-xxx=""來添加，讀取的時(shí)候event.currentTarget.dataset就可以獲取設(shè)置的參數(shù),微信小程序的事件返回值中包含了一些位置信息，觸發(fā)對象的一些信息等，log一下就可以看到，這里用的currentTarget中是綁定事件當(dāng)前組件的一些信息，包括id和組件中data-xx中綁定的數(shù)據(jù)。
<view id="tapTest" data-hi="WeChat" bindtap="tapName">Click me!</view>
Page({
? tapName: function(event) {
? ? console.log(event)
? }
})
2、事件詳解
微信小程序的事件類型很多，這些事件都可以用bind進(jìn)行綁定，他們的執(zhí)行順序如下：
單擊 touchstart → touchend → tap
雙擊 touchstart → touchend → tap → touchstart → touchend → tap
長按 touchstart → longtap → touchend → tap
但是這些事件都是冒泡事件，如果需要取消冒泡的話，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。官方使用代碼如下：
//只觸發(fā)handleTap2
<view id="outer" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">? outer view
? <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">? ? inner view
? </view></view>
//先后調(diào)用handleTap2、handleTap4、handleTap3、handleTap1
<view id="outer"bind:touchstart="handleTap1"capture-bind:touchstart="handleTap2">outer view
<view id="inner"bind:touchstart="handleTap3"capture-bind:touchstart="handleTap4">inner view
</view>
</view>
