小程序中的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僅支持相對路徑
加油 ! ^^