第3章微信小程序核心框架電子工業(yè)出版社程序的主要任務(wù)就是接收數(shù)據(jù)，對(duì)數(shù)據(jù)進(jìn)行處理，然后將處理結(jié)果以適當(dāng)?shù)姆绞秸故窘o用戶(hù)。小程序框架包括視圖層和邏輯層，小程序通過(guò)WXML頁(yè)面也就是視圖層接收要處理的數(shù)據(jù)，將數(shù)據(jù)交給JavaScript程序，也就是邏輯層進(jìn)行處理，最后將處理結(jié)果再以WXML頁(yè)面的形式，也就是在視圖層展示給用戶(hù)。這就涉及到如何將視圖層數(shù)據(jù)交給邏輯層進(jìn)行處理的問(wèn)題，同時(shí)也涉及到如何將邏輯層的處理結(jié)果展示到視圖層頁(yè)面上的問(wèn)題。本章對(duì)微信小程序的核心框架進(jìn)行介紹，包括兩個(gè)方面的內(nèi)容：數(shù)據(jù)綁定和事件框架。其中，數(shù)據(jù)綁定解決如何將邏輯層處理結(jié)果展示到視圖層頁(yè)面上的問(wèn)題；事件框架則解決如何將數(shù)據(jù)從視圖層頁(yè)面提交給邏輯層代碼進(jìn)行處理的問(wèn)題。目錄3.1數(shù)據(jù)綁定3.2事件系統(tǒng)3.3模塊化3.4WXS腳本3.5案例：圖來(lái)圖往3.6練習(xí)：點(diǎn)擊計(jì)數(shù)器3.1數(shù)據(jù)綁定所謂“數(shù)據(jù)綁定”，簡(jiǎn)單來(lái)說(shuō)就是，將微信頁(yè)面展示的數(shù)據(jù)通過(guò)“{{屬性名}}”方式進(jìn)行動(dòng)態(tài)引用；3.1.1數(shù)據(jù)綁定入門(mén)舉例這個(gè)例子只有一個(gè)頁(yè)面，在這個(gè)頁(yè)面上顯示當(dāng)前的日期時(shí)間，當(dāng)用戶(hù)點(diǎn)擊這個(gè)日期時(shí)間時(shí)，再次更新這個(gè)日期時(shí)間的值。新建名稱(chēng)為mini-ch03-01的微信小程序工程修改index.js文件為如下內(nèi)容：//index.jsPage({data:{now:"顯示當(dāng)前日期時(shí)間",},immediately(){letdate=newDate();letd=date.toLocaleDateString();lett=date.toLocaleTimeString();this.setData({now:d+""+t});}})修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="數(shù)據(jù)綁定"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="immediately">

{{now}}</view></scroll-view>3.1.2數(shù)據(jù)綁定及其使用微信小程序可以將頁(yè)面邏輯層的數(shù)據(jù)綁定到頁(yè)面的視圖層進(jìn)行顯示。要使用數(shù)據(jù)綁定，一個(gè)基本要求是：要綁定的數(shù)據(jù)必須是頁(yè)面的.js文件中Page()函數(shù)參數(shù)Object對(duì)象的data對(duì)象屬性的屬性值。<view>{{text}}</view><view>{{array[0].msg}}</view>Page({data:{text:'initdata',array:[{msg:'1'},{msg:'2'}]}，//生命周期函數(shù)定義……//其他普通函數(shù)定義……})綁定的數(shù)據(jù)可以用于組件的值，也可以用于組件的屬性：數(shù)據(jù)綁定還可以用于表達(dá)式：如果Page()的調(diào)用為如下代碼：結(jié)果將是：<viewhidden="{{flag?true:false}}">Hidden</view><view>{{a+b}}+{{c}}+d</view>Page({data:{a:1,b:2,c:3}})<view>3+3+d</view>使用setData()函數(shù)還能實(shí)現(xiàn)數(shù)據(jù)的動(dòng)態(tài)綁定：在JavaScript函數(shù)中，通過(guò)調(diào)用setData()函數(shù)動(dòng)態(tài)改變所綁定的數(shù)據(jù)的值，進(jìn)而實(shí)現(xiàn)對(duì)頁(yè)面上顯示數(shù)據(jù)的動(dòng)態(tài)修改?？匆粋€(gè)簡(jiǎn)單的例子。頁(yè)面：頁(yè)面的.js代碼如下：<view>{{text}}</view><buttonbind:tap="changeText">Changenormaldata</button><view>{{array[0].msg}}</view><buttonbind:tap="changeItemInArray">ChangeArraydata</button><view>{{sn.desc}}</view><buttonbind:tap="addNewField">Addnewdata</button>Page({data:{text:'initdata',array:[{msg:'initdata'}],},changeText:function(){this.setData({text:'changeddata'})},changeItemInArray:function(){this.setData({'array[0].msg':'changeddata'})},addNewField:function(){this.setData({'sn.desc':'newdata'})}})3.1.3全局?jǐn)?shù)據(jù)及其使用在小程序的app.js文件的App()函數(shù)的Object參數(shù)中，除了可以配置小程序生命周期函數(shù)外，還可以設(shè)置一些全局?jǐn)?shù)據(jù)，也就是在小程序的所有頁(yè)面均可以使用的數(shù)據(jù)，以實(shí)現(xiàn)數(shù)據(jù)通信和數(shù)據(jù)共享。使用全局?jǐn)?shù)據(jù)的一般過(guò)程是：第一步：在app.js的App()函數(shù)中，調(diào)用App()函數(shù)并傳遞一個(gè)包括全局?jǐn)?shù)據(jù)的對(duì)象參數(shù)，并為其設(shè)置初始值；第二步：在頁(yè)面的,js文件中，使用getApp()函數(shù)獲取小程序的全局對(duì)象，然后通過(guò)該對(duì)象訪(fǎng)問(wèn)全局?jǐn)?shù)據(jù)屬性及其值。舉一個(gè)例子看看如何使用全局?jǐn)?shù)據(jù)。新建一個(gè)名為mini-ch03-02的小程序工程。然后修改app.js為如下代碼：//app.jsApp({onLaunch(){},

global:{secret:'Mysecret',address:'Somewhere',salary:3425.25}})修改index.js為如下代碼：修改index.wxml為如下代碼：//index.jsletapp=getApp();Page({data:{income:app.global.salary}})<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container">{{income}}</view></scroll-view>3.1.4使用console和定時(shí)器在編寫(xiě)和測(cè)試小程序時(shí)，出于調(diào)試或其他目的，經(jīng)常需要在控制臺(tái)顯示一些信息以便于查看或糾錯(cuò)，為此，小程序框架提供了console對(duì)象，通過(guò)調(diào)用console對(duì)象的不同方法，可以以不同的外觀(guān)形式輸出程序運(yùn)行信息。微信小程序框架也提供了常用的定時(shí)器函數(shù)，以實(shí)現(xiàn)程序定時(shí)的功能需求。微信小程序框架提供的常用定時(shí)器及其功能描述如表：序號(hào)函數(shù)原型功能及參數(shù)說(shuō)明

numbersetTimeout(functioncallback,numberdelay,anyrest)設(shè)定一個(gè)定時(shí)器，在定時(shí)到期以后執(zhí)行注冊(cè)的回調(diào)函數(shù)。參數(shù)：callback，回調(diào)函數(shù)；delay，延遲的時(shí)間，函數(shù)的調(diào)用會(huì)在該延遲之后發(fā)生，單位為ms；restparam1,param2,...,paramN等附加參數(shù)，它們會(huì)作為參數(shù)傳遞給回調(diào)函數(shù)。返回值：定時(shí)器的編號(hào)，這個(gè)值可以傳遞給clearTimeout來(lái)取消該定時(shí)。

clearTimeout(numbertimeoutID)取消由setTimeout設(shè)置的定時(shí)器。參數(shù)：timeoutID，要取消的定時(shí)器的ID，這個(gè)值是調(diào)用setTimeout函數(shù)返回的值。返回值：無(wú)。

numbersetInterval(functioncallback,numberdelay,anyrest)設(shè)定一個(gè)定時(shí)器，按照指定的周期（以毫秒計(jì)）來(lái)執(zhí)行注冊(cè)的回調(diào)函數(shù)。參數(shù)：callback，回調(diào)函數(shù)；delay，執(zhí)行回調(diào)函數(shù)之間的時(shí)間間隔，單位為ms；restparam1,param2,...,paramN等附加參數(shù)，它們會(huì)作為參數(shù)傳遞給回調(diào)函數(shù)。返回值：定時(shí)器的編號(hào)，這個(gè)值可以傳遞給clearInterval來(lái)取消該定時(shí)。

clearInterval(numberintervalID)取消由setInterval設(shè)置的定時(shí)器。參數(shù)：intervalID，要取消的定時(shí)器的ID。3.2事件系統(tǒng)通過(guò)事件綁定，頁(yè)面渲染層可以將頁(yè)面數(shù)據(jù)傳遞給業(yè)務(wù)邏輯層；通過(guò)上一節(jié)的數(shù)據(jù)綁定，可以將業(yè)務(wù)邏輯層的處理結(jié)果在頁(yè)面渲染層顯示出來(lái)。3.2.1簡(jiǎn)單的事件綁定與在HTML頁(yè)面中對(duì)標(biāo)簽綁定事件并在事件發(fā)生時(shí)對(duì)事件進(jìn)行處理類(lèi)似，在小程序中，也可以對(duì)WXML頁(yè)面標(biāo)簽綁定事件并對(duì)事件進(jìn)行處理：在頁(yè)面的.js文件中定義了handler()函數(shù)的實(shí)現(xiàn)代碼：點(diǎn)擊事件也就是tap事件是非常常見(jiàn)的事件，除此之外，小程序還定義了其他非常多的事件，例如，touchstart事件、longtap事件、longpress事件等，在小程序中，可以采用類(lèi)似的方式對(duì)這些事件進(jìn)行監(jiān)聽(tīng)和處理。在小程序中，除了使用“bind事件名稱(chēng)”方式綁定事件外，也可以使用“bind:事件名稱(chēng)”方式綁定事件，這兩種方式時(shí)完全等價(jià)的。<viewid="aid"data-hi="Howareyou."bind:tap="handler">ClickMe!</view>Page({handler:function(event){console.log(event)}})3.2.2冒泡事件和非冒泡事件小程序的事件分為兩類(lèi)：冒泡事件和非冒泡事件。冒泡事件是指當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞；非冒泡事件是指當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。小程序的冒泡事件及其含義如表：序號(hào)事件名稱(chēng)事件含義1touchstart手指觸摸動(dòng)作開(kāi)始2touchmove手指觸摸后移動(dòng)3touchcancel手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗等4touchend手指觸摸動(dòng)作結(jié)束5tap手指觸摸后馬上離開(kāi)，也就是常用的點(diǎn)擊事件6longpress手指觸摸后，超過(guò)350ms再離開(kāi)，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)7longtap等價(jià)于longpress，建議使用longpress事件8transitionend會(huì)在WXSStransition或wx.createAnimation動(dòng)畫(huà)結(jié)束后觸發(fā)9animationstart會(huì)在一個(gè)WXSSanimation動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)10animationiteration會(huì)在一個(gè)WXSSanimation一次迭代結(jié)束時(shí)觸發(fā)11animationend會(huì)在一個(gè)WXSSanimation動(dòng)畫(huà)完成時(shí)觸發(fā)3.2.3綁定事件并阻止事件冒泡除了可以使用bind綁定事件外，還可以用catch來(lái)綁定事件。與bind不同，catch會(huì)阻止事件向上冒泡，也就是，阻止冒泡事件進(jìn)一步傳遞到父組件。3.2.4事件對(duì)象當(dāng)組件所綁定的事件被觸發(fā)時(shí)，邏輯層綁定的事件處理函數(shù)會(huì)并被調(diào)用并會(huì)收到一個(gè)事件對(duì)象。事件對(duì)象的屬性及其含義如表：序號(hào)屬性名稱(chēng)類(lèi)型含義1typeString事件類(lèi)型，例如，tap，longpress等2timeStampInteger事件生成時(shí)的時(shí)間戳，也就是，頁(yè)面打開(kāi)到觸發(fā)事件所經(jīng)過(guò)的毫秒數(shù)3targetObject觸發(fā)事件的組件的一些屬性值集合4currentTargetObject綁定事件的組件的一些屬性值集合5markObject事件標(biāo)記數(shù)據(jù)6detailObject額外的信息。例如，表單組件的提交事件會(huì)攜帶用戶(hù)的輸入，媒體的錯(cuò)誤事件會(huì)攜帶錯(cuò)誤信息，不同的組件這個(gè)屬性的含義是不同的。7touchesArray觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組8changedTouchesArray觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組target和currentTarget分別表示觸發(fā)事件的組件對(duì)象和綁定事件的組件對(duì)象，看看這個(gè)例子：當(dāng)用戶(hù)在“最內(nèi)層”文字上點(diǎn)擊時(shí)，將觸發(fā)tap3函數(shù)，這時(shí)，傳遞給tap3函數(shù)的事件對(duì)象參數(shù)的target屬性是id為inner的view組件，currentTarget屬性也是id為inner的view組件；由于tap事件是冒泡事件，還會(huì)繼續(xù)傳遞到id為middle的view組件，也就是還會(huì)觸發(fā)tap2函數(shù)，這時(shí)傳遞給tap2函數(shù)的事件對(duì)象參數(shù)的target屬性是id為inner的view組件，currentTarget屬性則是id為middle的view組件。<viewid="outer"bind:tap="tap1">

最外層

<viewid="middle"catch:tap="tap2">

中間層

<viewid="inner"bind:tap="tap3">

最內(nèi)層

</view></view></view>3.2.5通過(guò)事件從視圖層向業(yè)務(wù)邏輯層傳遞參數(shù)通過(guò)事件從視圖層向邏輯層傳遞參數(shù)是小程序編程中常用的編程實(shí)踐。這個(gè)任務(wù)可以通過(guò)事件對(duì)象中的target屬性、currentTarget屬性、mark屬性來(lái)完成。事件對(duì)象的target屬性和currentTarget屬性也是一個(gè)Object對(duì)象，包含如表所示的屬性：序號(hào)屬性名稱(chēng)類(lèi)型含義1idString事件的組件id2datasetObject事件的組件上由data-開(kāi)頭的自定義屬性所組成的集合通過(guò)dataset屬性，可以在組件節(jié)點(diǎn)中附加一些自定義數(shù)據(jù)，也就是，在WXML中，在組件上使用“data-”為組件定義自定義的節(jié)點(diǎn)數(shù)據(jù)，并在事件中可以獲取這些自定義的節(jié)點(diǎn)數(shù)據(jù)，用于事件的邏輯處理。例如，下面的代碼：WXML中定義的屬性名稱(chēng)與事件處理函數(shù)中對(duì)象屬性名稱(chēng)的關(guān)系滿(mǎn)足如下的規(guī)則：（1）視圖層data-element-type：在邏輯層呈現(xiàn)為event.target.dataset.elementType；（2）視圖層data-elementType：在邏輯層呈現(xiàn)為event.target.dataset.elementtype。<viewdata-alpha-gama="a"data-alphaGama="b"bindtap="bindViewTap">DataSetTest</view>Page({bindViewTap:function(event){event.target.dataset.alphaGama===“a”//“-”會(huì)轉(zhuǎn)為駝峰寫(xiě)法，表達(dá)式值為trueevent.target.dataset.alphagama===“b”//大寫(xiě)會(huì)轉(zhuǎn)為小寫(xiě)，表達(dá)式值為true}})還可以使用mark從視圖層向業(yè)務(wù)邏輯層傳遞參數(shù)：當(dāng)事件觸發(fā)時(shí)，事件冒泡路徑上所有的mark會(huì)被合并，并返回給事件回調(diào)函數(shù)。舉一個(gè)簡(jiǎn)單的例子：如果按鈕被點(diǎn)擊，將觸發(fā)bindViewTap和bindButtonTap兩個(gè)事件，事件攜帶的event.mark將包含vm和bm兩項(xiàng)屬性。因此，在bingViewTap處理處理函數(shù)中，可以這樣來(lái)獲取并處理mark數(shù)據(jù)：<viewmark:vm="outerview"bindtap="bindViewTap"><buttonmark:bm="abutton"bindtap="bindButtonTap">點(diǎn)我</button></view>Page({bindViewTap:function(e){e.mark.vm==="outerview"http://truee.mark.bm==="abutton"http://true}})3.2.6數(shù)據(jù)綁定和事件系統(tǒng)使用舉例舉一個(gè)簡(jiǎn)單的例子對(duì)事件系統(tǒng)、數(shù)據(jù)綁定相關(guān)知識(shí)進(jìn)行綜合應(yīng)用。這個(gè)例子程序首先在界面上顯示文字“Weixin”，當(dāng)用戶(hù)點(diǎn)擊這個(gè)文字時(shí)，在頁(yè)面的下方顯示三個(gè)新的文字信息。為此，首先創(chuàng)建一個(gè)名為mini-ch03-03的微信小程序工程。修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewdata-name="張三"data-address="北京市"mark:secret="MySecret"bind:tap="weixintap"class="container">Weixin<viewhidden="{{hidden}}">{{name}}:{{address}}:{{secret}}</view></view></scroll-view>index.js文件內(nèi)容如下：//index.jsPage({data:{name:"AAA",address:"",secret:"",hidden:true},weixintap:function(e){letname=;letaddress=e.target.dataset.address;letsecret=e.mark.secret;this.setData({name:"我的名字，"+name,address:"我的地址，"+address,secret:"我的秘密，"+secret,hidden:false});}})3.3模塊化處理小程序業(yè)務(wù)邏輯的.js文件是用JavaScript語(yǔ)言編寫(xiě)的。由于JavaScript語(yǔ)言本身具有模塊化能力，因此，小程可以使用JavaScript的模塊化能力，將頁(yè)面共用的JavaScript功能抽象為模塊并使用exports暴露其接口，并存儲(chǔ)在獨(dú)立的.js文件中，然后在需要的地方使用require導(dǎo)入模塊。例如，可以將小程序某個(gè)頁(yè)面的共用功能抽象成函數(shù)，并存儲(chǔ)到小程序頁(yè)面目錄的common.js文件中：//common.jsfunctionhello(name){console.log(`你好，${name}!`)//注意，“`”是反引號(hào)}functiongoodbye(name){console.log(`再見(jiàn)，${name}!`)}module.exports.hello=helloexports.goodbye=sayGoodbye//等價(jià)于：module.exports.goodbye=sayGoodbye例如，在頁(yè)面的.js文件中導(dǎo)入并調(diào)用這兩個(gè)函數(shù)：varcomm=require('./common.js')Page({helloLenna:function(){comm.sayHello('Lenna')},goodbyeLenna:function(){comm.sayGoodbye('Lenna')}})3.4WXS腳本可以使用微信定義的稱(chēng)為WXS（WeiXinScript）腳本程序?qū)π〕绦虻捻?yè)面進(jìn)行動(dòng)態(tài)修改。也就是說(shuō)，WXS是小程序的一套腳本語(yǔ)言，使用WXS操作WXML頁(yè)面，可以對(duì)小程序頁(yè)面進(jìn)行動(dòng)態(tài)修改。3.4.1一個(gè)簡(jiǎn)單的WXS腳本入門(mén)例子先看一個(gè)簡(jiǎn)單的WXS腳本例子。這個(gè)例子操作小程序的頁(yè)面，使之背景顏色為絲綢色。為此，新建一個(gè)名稱(chēng)為mini-ch03-04的小程序工程，修改index.wxml文件為如下內(nèi)容：<!--index.wxml--><wxsmodule="m1">varmsg="helloworld";varwxsFunction=function(event,ownerInstance){varinstance=event.instance;instance.setStyle({"background-color":"cornsilk"})returnfalse//不往上冒泡

}module.exports.message=msg;module.exports.wxsFunction=wxsFunction;</wxs><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container"bind:tap="{{m1.wxsFunction}}">{{m1.message}}</view></scroll-view>3.4.2WXS模塊及其使用WXS代碼可以編寫(xiě)在wxml文件中的<wxs>標(biāo)簽內(nèi)，或以.wxs為后綴名的文件內(nèi)。每個(gè).wxs文件和<wxs>標(biāo)簽都是一個(gè)單獨(dú)的模塊。每個(gè)wxs模塊均有一個(gè)內(nèi)置的module對(duì)象和自己獨(dú)立的作用域，也就是在模塊里定義的變量或函數(shù)，默認(rèn)為私有的，對(duì)其他模塊不可見(jiàn)。模塊要想對(duì)外暴露其內(nèi)部的私有變量與函數(shù)，需要通過(guò)module.exports實(shí)現(xiàn)。WXS模塊可以使用require函數(shù)引入其他WXS模塊暴露的接口，注意，只能引用.wxs文件模塊，且必須使用相對(duì)路徑。下面舉一個(gè)簡(jiǎn)單的例子，這個(gè)例子在頁(yè)面中調(diào)用WXS模塊暴露的函數(shù)并顯示W(wǎng)XS模塊暴露的變量的值。為此，新建一個(gè)名為mini-ch03-05的小程序工程。在工程的根目錄中新建一個(gè)名為tools的子目錄，并在這個(gè)目錄下新建一個(gè)名為common.wxs的WXS模塊文件：common.wsx代碼如下：//tools/common.wxsvarfoo="'你好'，來(lái)自common.wxs模塊";varbar=function(d){returnd;}module.exports={FOO:foo,bar:bar,};module.exports.msg="Howdoyoudo.";在index頁(yè)面中，新建名為index.wxs的模塊文件：index.wxs文件內(nèi)容如下：為了進(jìn)一步例示W(wǎng)XS和頁(yè)面.js文件之間的信息交互，現(xiàn)在修改index.js文件，在其中定義一個(gè)名稱(chēng)為jsMsg的屬性。修改后的index.js文件內(nèi)容如下：//./index.wxsvarcommon=require("../../tools/common.wxs");vargetLen=function(d){returnd.length;}vargetMsgLen=function(){returncommon.msg.length;}module.exports.getLen=getLen;module.exports.getMsgLen=getMsgLen;//index.jsPage({data:{jsmsg:"Tomisastudent!"}})修改index.wxml文件，在view組件中顯示W(wǎng)XS模塊暴露的變量或者調(diào)用WXS函數(shù)的返回值：<!--index.wxml--><wxssrc="./index.wxs"module="logic"/><navigation-bartitle="Weixin"back="{{false}}"color="black"background="#FFF"></navigation-bar><scroll-viewclass="scrollarea"scroll-ytype="list"><viewclass="container">{{logic.getLen("你好")}}：

{{logic.getLen(jsmsg)}}：

{{logic.getMsgLen()}}</view></scroll-view>3.4.3WXS語(yǔ)法基礎(chǔ)WXS語(yǔ)言非常類(lèi)似JavaScript語(yǔ)言，在WXS模塊中，可以定義變量、可以有程序注釋、WXS也有數(shù)據(jù)運(yùn)算符、有流程控制語(yǔ)句、有數(shù)據(jù)類(lèi)型等，當(dāng)然，WXS也提供了常用的基礎(chǔ)類(lèi)庫(kù)。變量：WXS的變量命名規(guī)則與JavaScript一致；注釋?zhuān)浩湟唬褂谩?/”的單行注釋?zhuān)黄涠?，使用?*”開(kāi)始和“*/”結(jié)束的多行注釋?zhuān)黄淙Y(jié)尾注釋?zhuān)磸摹?*”開(kāi)始往后的所有WXS代碼均被注釋?zhuān)贿\(yùn)算符：與JavaScript類(lèi)似；流程控制語(yǔ)句；數(shù)據(jù)類(lèi)型；基礎(chǔ)類(lèi)庫(kù)。3.4.4使用WXS響應(yīng)事件微信客戶(hù)端在運(yùn)行小程序時(shí)，會(huì)創(chuàng)建兩個(gè)線(xiàn)程分別運(yùn)行小程序的視圖層渲染程序和邏輯層業(yè)務(wù)處理程序，為了將業(yè)務(wù)邏輯層的處理結(jié)果渲染到視圖層頁(yè)面上，需要兩個(gè)線(xiàn)程進(jìn)行通信，因此，當(dāng)有頻繁的線(xiàn)程間通信時(shí)，會(huì)導(dǎo)致頁(yè)面顯示卡頓現(xiàn)象的發(fā)生。為了解決這個(gè)問(wèn)題，可以將一些頻繁改變頁(yè)面顯示效果的事件處理程序，例如頁(yè)面的動(dòng)畫(huà)效果等代碼放置在WXS模塊中進(jìn)行處理，因?yàn)閃XS模塊代碼運(yùn)行在視圖層，不需要與邏輯層代碼進(jìn)行通信，進(jìn)而可以提高運(yùn)行效率。3.5案例：圖來(lái)圖往編寫(xiě)一個(gè)圖像淡入淡出的微信小程序，對(duì)前面的知識(shí)內(nèi)容做總結(jié)性應(yīng)用。3.5.1案例目標(biāo)這個(gè)案例程序首先在頁(yè)面上顯示一張漂亮的風(fēng)景圖，當(dāng)用戶(hù)點(diǎn)擊這張圖像時(shí)，圖像將以動(dòng)畫(huà)的形式慢慢消失，然后再以動(dòng)畫(huà)的形式慢慢地顯示另一張漂亮的風(fēng)景圖。3.5.2案例分析由于需要顯示兩張圖像，因此，首先在工程中新建名稱(chēng)為images的子目錄用于存儲(chǔ)圖像文件。可以使用image組件來(lái)顯示圖像；為了可以通過(guò)控制image組件的opacity屬性將圖像淡進(jìn)及淡出；由于涉及到圖像切換和opacity屬性變化，因此，可以將image的src