小程序的事件機制

小程序中的javascript實現方式

小程序的事件機制

參見文檔—>框架—>事件

1、實現方法     事件綁定的寫法同組件的屬性,以 key=“value” 的形式實現     key 以bind或catch開頭,然後跟上事件的類型(參考文檔)         如bindtap、catchtouchstart。 說明:自基礎庫版本 1.5.0 起,bind和catch後可以緊跟一個冒號,其含義不變,如bind:tap、、catch:touchstart      value 是一個字符串,需要在對應的 Page 中定義同名的函數。

或者

2、bind綁定的事件和catch綁定的事件的區別:    

bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。

3、事件捕獲:    

自基礎庫版本 1.5.0 起,觸摸類事件支持捕獲階段。

實現方法:capture-bind:事件名、capture-catch:事件名

點擊 inner view 會先後調用handleTap2、handleTap4、handleTap3、handleTap1 說明:捕獲階段位於冒泡階段之前               capture-catch,會中斷捕獲階段和取消冒泡階段。

4、事件對象

(1)基礎事件對象的屬性    

①type:事件類型    

②timeStamp:頁面打開到觸發事件所經過的毫秒數。    

③target:觸發事件的源組件,該屬性值是一個對象包含:

④currentTarget:事件綁定的當前組件,該屬性的屬性值是一個對象包含內容同target

⑤touches:當前停留在屏幕上的觸摸點的一系列信息

⑥changedTouches:changedTouches 數據格式同 touches。 表示有變化的觸摸點,如從無變有(touchstart),位置變化(touchmove),從有變無(touchend、touchcancel)。

js文件結構與Page頁面的生命週期

監聽頁面生命週期的函數

js文件結構與Page頁面的生命週期

頁面生命週期執行順序:

setData()函數 作用:setData 函數用於將數據從邏輯層發送到視圖層(異步),同時改變對應的 this.data 的值(同步)。

小程序頁面路由

參見文檔—>框架—>路由

1、wx.navigateTo()   打開新頁面,原來頁面被隱藏(父級頁面跳轉到子級頁面)參數接收一個object

注意:小程序最多隻能跳5級

2、wx.redirectTo()   關閉當前頁面,跳轉到應用內的某個頁面,原來頁面被卸載(兩個頁面之間平行跳轉)       參數接收一個object 說明: wx.navigateTo() 對應頁面生命週期的onHide函數 wx.redirectTo()對應頁面生命週期的onUnload函數

模塊化

1、概念 可以將一些公共的代碼抽離成爲一個單獨的 js 文件,作爲一個模塊。或者將業務中的數據分離到單獨的數據文件中 2、用法: 第一步:抽離完成後採用 module.exports 來暴露模塊接口 第二步:在需要用到該模塊處利用require(path)引入

注意:path僅支持相對路徑

加油 ! ^^

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章