微信小程序學習筆記二
1. 小程序特點概述
- 沒有
DOM
- 組件化開發: 具備特定功能效果的代碼集合
- 體積小, 單個壓縮包體積不能大於
2M
, 否則無法上線 - 小程序的四個重要的文件
*js
*.wxml ---> view 結構 ---> html
*wxss ---> view樣式 ---> css
*.json --->view 數據 ---> json文件
小程序適配方案: rpx (responsive pixel 響應式像素單位)
小程序適配單位px
規定任何屏幕下寬度為750px
小程序會根據屏幕的寬度不同自動計算rpx
值的大小
Iphone6下 :1rpx = 1物理像素 = 0.5px
2. wxml語法
2.1 數據綁定
2.1.1 初始化數據
頁面.js
的data
選項中定義初始化數據
// pages/index/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
message:"hello world"
},
})
在調試器中的 AppData
中可以查看當前文件的數據
2.1.2 使用數據
- 模板結構中使用雙大括號(插值表達式)
{{mssage}}
注意事項: 小程序中為單項數據流 model ---> view
點開模擬器就可以看到頁面解析后的樣子了
2.1.3 修改數據
this.setData( { DATA_NAME: "NEW_VALUE"}, callback)
- 特點:
2.1 同步修改:this.data值被同步修改
2.2 異步更新: 異步將setData
函數用於將數據從邏輯層發送到視圖層(異步)
// pages/index/index.js
Page({
/**
* 頁面的初始數據
*/
data: {
message:"hello world"
},
/**
* 生命周期函數--監聽頁面加載
*/
onLoad: function (options) {
console.log('頁面加載完成');
// 修改message的狀態,語法: this.setData
console.log(this); // this 代表當前頁面的實例對象
this.setData({message:'new Hello World'},function () {
console.log('數據更新完成')
})
}
})
- 在上面代碼中我們知道了,
setData
修改數據的操作, 在自身所帶的鈎子函數中是同步的, 下面我們來測試一下在非自身的鈎子函數中修改數據是否同步 - 代碼如下:
onLoad: function (options) {
// 這里我們定義了一個定時器, 延時兩秒執行, 運行一下看在模擬器中看效果
setTimeout(() => {
this.setData({ message: 'new Hello World' }, function () {
console.log('數據更新完成')
})
}, 2000);
},
由此我們可以得出, 小程序的數據修改,在非自身的鈎子函數中也是同步的
2.2 事件綁定
2.2.1 事件分類
事件分為冒泡事件和非冒泡事件:
- 冒泡事件:當一個組件上的事件被觸發后,該事件會向父節點傳遞。
- 非冒泡事件:當一個組件上的事件被觸發后,該事件不會向父節點傳遞。
- 非冒泡事件:表單事件和自定義事件通常是非冒泡事件
事件列表
類型 | 觸發條件 | 最低版本 |
---|---|---|
touchstart |
手指觸摸動作開始 | - |
touchmove |
手指觸摸后移動 | - |
touchcncel |
手指觸摸動作被打斷,如來電提醒,彈窗等 | - |
touchend |
手指觸摸動作結束 | - |
tap |
手指觸摸后馬上離開 | - |
longpress |
手指觸摸后,超過350ms 再離開, 如果指定了事件回調函數並觸發了這個事件, tap 事件將不被觸發 |
1.5.0 |
longtap |
手指觸摸后, 超過350ms 再離開 (推薦使用longpress 事件代替) |
- |
transitionend |
會在 WXSS transition 或wx.createAnimation 動畫結束后觸發 |
- |
animationstart |
會在一個WXSS animation 動畫開始時觸發 |
- |
animationiteration |
會在一個WXSS animation 一次迭代結束時觸發 |
|
animationend |
會在一個WXSS animation 動畫完成時觸發 |
- |
touchforcechange |
在支持 3D Touch 的iPhone設備, 重按時會觸發 |
1.9.90 |
2.2.2 綁定事件
bind綁定
: 事件綁定不會阻止冒泡事件向上冒泡
演示: 分別在index.wxml
和index.js
定義以下代碼
<view class="goStudy" bindtap="clickParent">
<text catchtap="bindtap">{{message}}</text>
</view>
clickParent() {
console.log('clickParent()');
},
clickChild() {
console.log('clickChild()');
},
-
點擊
text標簽
之后我們查看調試器中信息, 可以看到外層的父元素的tap
事件也被觸發了
-
catch綁定
: 事件綁定可以阻止冒泡事件向上冒泡 -
演示: 我們將
index.wxml
代碼修改如下
<view class="goStudy" bindtap="clickParent">
<text catchtap="bindtap">{{message}}</text>
</view>
-
點擊
text標簽
之后我們查看調試器中信息
-
可以看到只打印了一個
clickChild()
, 說明我們的默認冒泡事件被阻止了
2.2.3 向事件對象傳參
- 在小程序開發的時候,有時候需要在點擊事件觸發之后拿到一個參數做為使用,小程序不像 Vue 可以直接點擊事件中放參數,而小程序它只能通過自定義屬性進行綁定參數使用。
- 語法:
data-KEY=VALUE
1.1 在index.wxml
中這樣寫
<text catchtap="clickChild" data-msg="傳遞的hello world">{{message}}</text>
- 獲取:
event.target.dataset.key || event.currentTarget.dataset.key
clickChild(e) {
console.log('clickChild()');
console.log(e.currentTarget.dataset.msg);
let newMsg = e.currentTarget.dataset.msg;
this.setData({message:newMsg});
},
Event.target
和event.currenTarget
的區別
3.1Event.target
是觸發事件的對象, 但不一定是綁定事件的對象, 如: 事件委托, 冒泡
3.2currentTarget
觸發事件的對象一定是綁定事件的對象, 沒有事件委托