微信小程序——啟動(dòng)棍鳖,渲染與Page

四種文件格式:

.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)
  1. 通過(guò)wx.navigateTo跳轉(zhuǎn),只能打開(kāi)非 tabBar 頁(yè)面情龄。
    • 當(dāng)前頁(yè)面onHide迄汛,后頁(yè)面onLoad和onShow
  1. 通過(guò)wx.redirectTo跳轉(zhuǎn)捍壤,只能打開(kāi)非 tabBar 頁(yè)面。
    • 當(dāng)前頁(yè)面onUnload鞍爱,后頁(yè)面onLoad和onShow
  1. 通過(guò)wx.navigateBack返回頁(yè)面棧內(nèi)頁(yè)面鹃觉。
    • 當(dāng)前頁(yè)面onUnload,后頁(yè)面onShow
    • 可以通過(guò)getCurrentPages()獲取頁(yè)面棧
  1. 通過(guò)wx.switchTab進(jìn)入睹逃,只能打開(kāi) tabBar 頁(yè)面盗扇。
    • 所有非 tabBar 頁(yè)面onUnload
  1. 通過(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ā)

Page實(shí)例的生命周期
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末埋市,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子命贴,更是在濱河造成了極大的恐慌道宅,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件胸蛛,死亡現(xiàn)場(chǎng)離奇詭異污茵,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)葬项,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門泞当,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人民珍,你說(shuō)我怎么就攤上這事襟士〉领” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵陋桂,是天一觀的道長(zhǎng)逆趣。 經(jīng)常有香客問(wèn)我,道長(zhǎng)嗜历,這世上最難降的妖魔是什么宣渗? 我笑而不...
    開(kāi)封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮秸脱,結(jié)果婚禮上落包,老公的妹妹穿的比我還像新娘。我一直安慰自己摊唇,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布涯鲁。 她就那樣靜靜地躺著巷查,像睡著了一般。 火紅的嫁衣襯著肌膚如雪抹腿。 梳的紋絲不亂的頭發(fā)上岛请,一...
    開(kāi)封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天,我揣著相機(jī)與錄音警绩,去河邊找鬼崇败。 笑死,一個(gè)胖子當(dāng)著我的面吹牛肩祥,可吹牛的內(nèi)容都是我干的后室。 我是一名探鬼主播,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼混狠,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼岸霹!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起将饺,我...
    開(kāi)封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤贡避,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后予弧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體刮吧,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年掖蛤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了杀捻。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡坠七,死狀恐怖水醋,靈堂內(nèi)的尸體忽然破棺而出旗笔,到底是詐尸還是另有隱情,我是刑警寧澤拄踪,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布蝇恶,位于F島的核電站,受9級(jí)特大地震影響惶桐,放射性物質(zhì)發(fā)生泄漏撮弧。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一姚糊、第九天 我趴在偏房一處隱蔽的房頂上張望贿衍。 院中可真熱鬧,春花似錦救恨、人聲如沸贸辈。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)擎淤。三九已至,卻和暖如春秸仙,著一層夾襖步出監(jiān)牢的瞬間嘴拢,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工寂纪, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留席吴,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓捞蛋,卻偏偏與公主長(zhǎng)得像孝冒,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子襟交,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容