四種文件格式:
.js js操作
至少要寫Page({}),用于注冊(cè)一個(gè)頁(yè)面
.json 一些基礎(chǔ)設(shè)定
至少要一個(gè){}
均需使用雙引號(hào), 且不能有注釋碗旅,不能有多余的逗號(hào)
project.config.json 用于IDE的個(gè)性化配置
.wxml 代替html
推薦采用彈性盒模型
bind(冒泡階段)和catch(捕獲階段)都能綁定事件
.wxss 代替css
新單位:rpx 規(guī)定屏幕為750rpx
- 當(dāng)前支持的選擇器:
.class #id element
element, element
::after ::before
小程序的啟動(dòng)
- 客戶端下載小程序到本地
- app.js中的onLaunch事件回調(diào)
- 加載app.json中pages的第一條作為初始頁(yè)面渡处,根據(jù)其.json文件生成界面
- 依次裝載WXML和WXSS,最后加載.js文件并渲染data祟辟,完成后觸發(fā)onLoad的回調(diào)
App()參數(shù)設(shè)置
- onLaunch
- onShow 當(dāng)小程序啟動(dòng)医瘫,或從后臺(tái)進(jìn)入前臺(tái)時(shí)顯示
- onHide
- onError 發(fā)生腳本錯(cuò)誤或 api 調(diào)用失敗時(shí),會(huì)觸發(fā)并帶上錯(cuò)誤信息
- onPageNotFound 當(dāng)要打開(kāi)的頁(yè)面并不存在時(shí)
- 其他自定義函數(shù)/數(shù)據(jù)
在App函數(shù)內(nèi)用this獲取實(shí)例旧困,在外部可通過(guò)getApp()獲取
數(shù)據(jù)渲染
數(shù)據(jù)綁定 {{}}
- 所有數(shù)據(jù)都必須通過(guò){{}}綁定醇份,花括號(hào)和引號(hào)之間如果有空格,會(huì)被解析為字符串
列表渲染 wx:for
- 綁定一個(gè)數(shù)組吼具,默認(rèn)當(dāng)前項(xiàng)的下標(biāo)名為 index僚纷,變量名為 item
- 通過(guò)wx:for-index和wx:for-item可改變下標(biāo)和變量名
- 當(dāng) wx:for 的值為字符串時(shí),會(huì)將字符串解析成字符串?dāng)?shù)組
wx:key
數(shù)組動(dòng)態(tài)變化時(shí)拗盒,如果希望項(xiàng)目保持自己的特征和狀態(tài)怖竭,(如 <input/> 的內(nèi)容),需要指定唯一標(biāo)識(shí)符陡蝇。存在key的項(xiàng)目只會(huì)重新排序痊臭,沒(méi)有key的項(xiàng)目會(huì)被重新創(chuàng)建
- wx:key 的值以兩種形式提供
1.字符串,代表在 for 循環(huán)的 array 中 item 的某個(gè) property登夫,該 property 的值需要是列表中唯一的字符串或數(shù)字广匙,且不能動(dòng)態(tài)改變。
2.保留關(guān)鍵字 *this 恼策,代表在 for 循環(huán)中的 item 本身鸦致,這種表示需要 item 本身是一個(gè)唯一的字符串或者數(shù)字
條件渲染 wx:if
可使用包裝元素<block/>同時(shí)包含多個(gè)元素 ,block不會(huì)在頁(yè)面中做任何渲染戏蔑,只接受wx:for和wx:if這樣的控制屬性蹋凝。
wx:if vs hidden
- 當(dāng) wx:if 的條件值切換時(shí),框架有一個(gè)局部渲染的過(guò)程总棵,確保條件塊在切換時(shí)銷毀或重新渲染
- hidden 組件始終會(huì)被渲染鳍寂,只是簡(jiǎn)單的控制顯示與隱藏
因此頻繁切換時(shí)使用hidden,否則使用wx:if
Page
Page的跳轉(zhuǎn)
- 通過(guò)wx.navigateTo跳轉(zhuǎn),只能打開(kāi)非 tabBar 頁(yè)面情龄。
- 當(dāng)前頁(yè)面onHide迄汛,后頁(yè)面onLoad和onShow
- 通過(guò)wx.redirectTo跳轉(zhuǎn)捍壤,只能打開(kāi)非 tabBar 頁(yè)面。
- 當(dāng)前頁(yè)面onUnload鞍爱,后頁(yè)面onLoad和onShow
- 通過(guò)wx.navigateBack返回頁(yè)面棧內(nèi)頁(yè)面鹃觉。
- 當(dāng)前頁(yè)面onUnload,后頁(yè)面onShow
- 可以通過(guò)getCurrentPages()獲取頁(yè)面棧
- 通過(guò)wx.switchTab進(jìn)入睹逃,只能打開(kāi) tabBar 頁(yè)面盗扇。
- 所有非 tabBar 頁(yè)面onUnload
- 通過(guò)wx.reLaunch進(jìn)入,可以打開(kāi)任意頁(yè)面沉填。
- 所有已有頁(yè)面onUnload疗隶,后頁(yè)面onLoad和onShow
Page的生命周期
- onLoad
可獲取打開(kāi)當(dāng)前頁(yè)面所調(diào)用的 query 參數(shù)- onReady
對(duì)界面的設(shè)置如wx.setNavigationBarTitle應(yīng)在onReady后設(shè)置- onShow
每次進(jìn)入該頁(yè)面都會(huì)觸發(fā)一次- onHide
當(dāng)navigateTo或底部tab切換時(shí)調(diào)用。- onUnload
事件處理函數(shù)
- onPullDownRefresh 監(jiān)聽(tīng)下拉
需要在json中配置enablePullDownRefresh為true
- onReachBottom 監(jiān)聽(tīng)上拉觸底
可在json中配置onReachBottomDistance翼闹,表示觸發(fā)時(shí)距頁(yè)面底部距離斑鼻,單位px,默認(rèn)為50
- onShareAppMessage 設(shè)置轉(zhuǎn)發(fā)內(nèi)容猎荠,頁(yè)面內(nèi)有該函數(shù)時(shí)才允許轉(zhuǎn)發(fā)
- onPageScroll 頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)
- onTabItemTap 當(dāng)前是 tab 頁(yè)時(shí)坚弱,點(diǎn)擊 tab 時(shí)觸發(fā)
自定義事件處理函數(shù)(冒號(hào)可省略)
bind:tap="go" ( 在冒泡階段觸發(fā) )
catch:tap="go" ( 在冒泡階段觸發(fā),并阻止繼續(xù)冒泡 )
capture-bind:tap="go" ( 在捕獲階段觸發(fā) )
capture-catch:tap="go" ( 在捕獲階段觸發(fā)关摇,并阻止捕獲和冒泡 )
無(wú)法直接傳參荒叶,僅能獲取一個(gè)時(shí)間對(duì)象,可通過(guò)設(shè)置date-*屬性拒垃,并在event.target.dataset中獲取
- touchstart
- touchmove
- touchcancel 觸摸被彈窗停撞,來(lái)電提醒等打斷
- touchend
- tap 手指觸摸后馬上離開(kāi)
- longpress 長(zhǎng)按(350ms以上),會(huì)覆蓋tap
- transitionend 在 WXSS transition 或 wx.createAnimation 動(dòng)畫結(jié)束后觸發(fā)
- animationstart 在 WXSS animation 動(dòng)畫開(kāi)始時(shí)觸發(fā)
- animationiteration 在 WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)
- animationend 在 WXSS animation 動(dòng)畫完成時(shí)觸發(fā)
Page.prototype.route
獲取當(dāng)前路由
Page.prototype.setData(data悼瓮,callback戈毒?)
將數(shù)據(jù)從邏輯層發(fā)送到視圖層(異步),同時(shí)改變對(duì)應(yīng)的 this.data 的值(同步)
data單次設(shè)置的數(shù)據(jù)不能超過(guò)1024kB横堡,且不能有值為undefined
callback會(huì)在視圖層渲染完成之后觸發(fā)