之前長(zhǎng)沙小程序開(kāi)發(fā)公司智企云給大家介紹了一些小程序開(kāi)發(fā)的學(xué)習(xí)分享的相關(guān)介紹，今天在此為大家繼續(xù)為大家詳細(xì)講講小程序的頁(yè)面和事件,，可能概括地不太好，不過(guò)大致內(nèi)容就是圍繞著這兩個(gè)方面展開(kāi)的,，主要是按照我們的學(xué)習(xí)路徑來(lái),，希望對(duì)大家能有所幫助。

　　頁(yè)面配置

　　小程序定義了一個(gè)單例變量App，可以通過(guò)getApp()來(lái)獲取,。這個(gè)App變量就是小程序?qū)嵗?，定義在app.js中。在App實(shí)例的構(gòu)造器中,，可以添加小程序生命周期相關(guān)的事件函數(shù)和全局變量,。

　　支持的生命周期相關(guān)事件有：

　　onLaunch: function(options) {}: 小程序初始化完成時(shí)觸發(fā)，且整個(gè)生命周期只會(huì)觸發(fā)一次

　　onShow: function(options) {}: 小程序啟動(dòng)或者是從后臺(tái)轉(zhuǎn)為前臺(tái)時(shí)觸發(fā)

　　onHide: function() {}: 小程序從從前臺(tái)轉(zhuǎn)為后臺(tái)時(shí)觸發(fā)

　　onError: function(msg) {}: 腳本錯(cuò)誤或者調(diào)用API出錯(cuò)會(huì)觸發(fā),，msg帶著報(bào)錯(cuò)信息

　　這里說(shuō)明一下onLaunch和onShow函數(shù)中的options常用的字段：

　　path：字符串,，表示打開(kāi)小程序的頁(yè)面路徑

　　query：Object類(lèi)型，表示打開(kāi)小程序的頁(yè)面參數(shù),，例如打開(kāi)小程序是指定了url: pages/index/index?id=1&name=John,。則query為{id:"1",name:"John"}

　　scene：數(shù)值，表示打開(kāi)小程序的場(chǎng)景值,，詳細(xì)場(chǎng)景值請(qǐng)參考小程序官方文檔

　　referrerInfo：Object類(lèi)型,，當(dāng)場(chǎng)景為由從另一個(gè)小程序或公眾號(hào)或App打開(kāi)時(shí)，返回此字段

　　referrerInfo.appId：字符串,，表示來(lái)源小程序或公眾號(hào)或App的 appId

　　referrerInfo.extraData：Object類(lèi)型,，表示來(lái)源小程序傳過(guò)來(lái)的數(shù)據(jù)，scene=1037或1038時(shí)支持

　　有時(shí)候需要定義一些在所有頁(yè)面都可以共享的變量,，直接在App構(gòu)造器里面增加即可,。如下圖，加了一個(gè)testGlobal字段：

　　可以在wxml頁(yè)面中直接{{testGlobal}}使用，也可以在js文件中通過(guò)getApp().testGlobal訪問(wèn)。更新數(shù)據(jù)的話可以用getApp().setData({testGlobal: "new value"}, function(){}) 來(lái)進(jìn)行,，function表示設(shè)置成功的回調(diào)函數(shù),。注意：直接用getApp().testGlobal = "new value"不會(huì)更新數(shù)據(jù)，并且還可以會(huì)產(chǎn)生不可預(yù)期的BUG,。

　　說(shuō)完了 全局的頁(yè)面設(shè)置,，下面來(lái)說(shuō)一下每個(gè)單獨(dú)的頁(yè)面。頁(yè)面文件都放在pages文件夾下面,，用到的頁(yè)面需要在app.json中聲明,，如下圖所示

　　如果是用開(kāi)發(fā)工具自動(dòng)生成的頁(yè)面,，會(huì)自動(dòng)在這里加上聲明，否則需要自己手動(dòng)加上,，不然不會(huì)識(shí)別到新添加的頁(yè)面,。小程序默認(rèn)聲明的第一個(gè)頁(yè)面為主頁(yè)，即默認(rèn)打開(kāi)頁(yè)面,。

　　每一個(gè)單獨(dú)的頁(yè)面分為三個(gè)部分：界面,、配置和業(yè)務(wù)邏輯。界面的話由xxx.wxml和xxx.wxss描述(xxx表示頁(yè)面命名);配置寫(xiě)在xxx.json中;業(yè)務(wù)邏輯在xxx.js中實(shí)現(xiàn),。這四個(gè)文件必須放在同一個(gè)文件夾中,，通常為了項(xiàng)目結(jié)構(gòu)美觀，建議每個(gè)頁(yè)面單獨(dú)放在page下面的一個(gè)文件夾中,。xxx.js和xxx.wxml是必須的,，其他兩個(gè)文件可選。

　　與App.js類(lèi)似,，頁(yè)面的對(duì)象定義在xxx.js中,，其中有一個(gè)Page的構(gòu)造器，在里面可以定義頁(yè)面的變量和一些生命周期相關(guān)的操作事件,。一個(gè)最簡(jiǎn)單的構(gòu)造器如下所示：

　　Page({ data: { diyData: "do it yourself" }, onLoad: function(options) { }, onReady: function() { }, onShow: function() { }, onHide: function() { }, onUnload: function() { }, onPullDownRefresh: function() { }, onReachBottom: function() { }, onShareAppMessage: function () { }, onPageScroll: function() { }})

　　下面詳細(xì)介紹下每一個(gè)字段及其用法

　　data表示頁(yè)面數(shù)據(jù),，跟App中的全局變量相比，這個(gè)就是頁(yè)面定義的局部變量,，只在當(dāng)前頁(yè)面中生效,。可以直接用this.diyData進(jìn)行訪問(wèn),，更新的話可以用this.setData({diyData: "new data"})來(lái)進(jìn)行更新,。切記：千萬(wàn)不要直接this.diyData="new data"這樣更新。

　　onLoad: 頁(yè)面加載時(shí)觸發(fā),，早于onReady和onShow,。options里面帶的字段就是轉(zhuǎn)到當(dāng)前頁(yè)面的query對(duì)應(yīng)的字段,，例如A通過(guò)wx.navigateTo函數(shù)轉(zhuǎn)到當(dāng)前頁(yè)面，url指定：pages/inexe/index?age=21&name=Cuihua,。則options= {age:"21",name:"Cuihua"}

　　onReady: 頁(yè)面初次渲染完成

　　onShow: 頁(yè)面顯示,，觸發(fā)事件早于onReady

　　onHide: 頁(yè)面隱藏:

　　onUnload: 頁(yè)面卸載:

　　onPullDownRefresh: 監(jiān)聽(tīng)用戶下拉動(dòng)作。需要在app.json的window選項(xiàng)中或頁(yè)面配置page.json中設(shè)置enablePullDownRefresh為true

　　onReachBottomFunction: 頁(yè)面上拉觸底事件的處理函數(shù)

　　onShareAppMessage: 用戶點(diǎn)擊右上角轉(zhuǎn)發(fā),。只有定義了此事件處理函數(shù),，右上角菜單才會(huì)顯示“轉(zhuǎn)發(fā)”按鈕，在用戶點(diǎn)擊轉(zhuǎn)發(fā)按鈕的時(shí)候會(huì)調(diào)用,，此事件需要return一個(gè)Object,，包含title和path兩個(gè)字段，用于自定義轉(zhuǎn)發(fā)內(nèi)容,。title表示標(biāo)題,，path的話表示要打開(kāi)的頁(yè)面的路徑，如pages/index/index

　　onPageScroll: 頁(yè)面滾動(dòng)觸發(fā)事件的處理函數(shù)

　　除了上面這些,，還可以在page的構(gòu)造器里面添加任意的字段，通過(guò)this.xxx訪問(wèn)(這么看來(lái)感覺(jué)page構(gòu)造器里面的data有點(diǎn)多余?大概是為了美觀吧,，放在一起 哈哈哈),。

　　頁(yè)面跳轉(zhuǎn)

　　這里默認(rèn)大家都知道棧這個(gè)數(shù)據(jù)結(jié)構(gòu)哈(畢竟作為一個(gè)產(chǎn)品經(jīng)理我都是知道的)。

　　頁(yè)面之間跳轉(zhuǎn)有三個(gè)方式進(jìn)行：wx.navigateTo({ url: 'page1' }),、wx.navigateBack() 和wx.redirectTo({ url: 'page2' }) ,。

　　navigateTo指定一個(gè)跳轉(zhuǎn)的頁(yè)面，如果用棧頂頁(yè)面表示當(dāng)前頁(yè)面的話,，相當(dāng)于把要跳轉(zhuǎn)的頁(yè)面入棧,，即[currentPage, targetPage]，棧的大小最大為10,。

　　navigateBack返回上一個(gè)頁(yè)面,，相當(dāng)于棧頂頁(yè)面出棧。

　　redirectTo是直接替換當(dāng)前頁(yè)面的操作,，例如,，當(dāng)前棧的狀態(tài)是[A, B, C, D]，然后進(jìn)行wxredirectTo({url:'E'})操作,，則操作完之后的狀態(tài)是[A, B, C, E],。注意，因?yàn)闂５拇笮∽疃酁?0,，所以在進(jìn)行了10次navigateTo操作后,，再要跳轉(zhuǎn)頁(yè)面只能用wx.redirectTo了。

　　如果在App里面定義了toolbar(小程序底部Tab頁(yè)面,，例如微信底部的"微信",，"通訊錄"，"發(fā)現(xiàn)"和"我"四個(gè)Tab頁(yè)面)的話，還可以用wx.switchTab({ url: 'pageOther' })進(jìn)行頁(yè)面切換,，表示切換到pageOther所在的Tab,，并且打開(kāi)pageOther頁(yè)面。注意,，此時(shí)之前的頁(yè)面棧全部清空,，即當(dāng)前的頁(yè)面棧狀態(tài)為[pageOther]。

　　事件

　　事件表示對(duì)用戶在小程序UI界面上某些操作的響應(yīng),，比如用戶點(diǎn)擊某個(gè)按鈕或者長(zhǎng)按之類(lèi)的操作,，我們可以定義對(duì)應(yīng)的handler函數(shù)，若是有這些用戶操作發(fā)現(xiàn),，就會(huì)調(diào)用我們的handler,。

　　例如我們定義一個(gè)點(diǎn)擊事件，點(diǎn)擊之后用命令行打印出"hello, world"

　　Click me! // page.js Page({ tapName: function(event) { console.log("hello, world") }})

　　一般事件定義在組件的尖括號(hào)中,，定義一個(gè)bindXxx屬性(也可以用bind:xxx),，表示綁定Xxx事件，值表示handler函數(shù),，需要在對(duì)應(yīng)的js文件中定義,。

　　常見(jiàn)的事件有：

　　touchstart：手指觸摸動(dòng)作開(kāi)始

　　touchmove：手指觸摸后移動(dòng)

　　touchcancel：手指觸摸動(dòng)作被打斷，如來(lái)電提醒,，彈窗

　　touchend：手指觸摸動(dòng)作結(jié)束

　　tap：手指觸摸后馬上離開(kāi)

　　longpress：手指觸摸后,，超過(guò)350ms再離開(kāi)，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件,，tap事件將不被觸發(fā)

　　longtap手指觸摸后,，超過(guò)350ms再離開(kāi)(推薦使用longpress事件代替)

　　transitionend：會(huì)在 WXSS transition 或 wx.createAnimation 動(dòng)畫(huà)結(jié)束后觸發(fā)

　　animationstart：會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)

　　animationiteration：會(huì)在一個(gè) WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)

　　animationend：會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)完成時(shí)觸發(fā)

　　事件handler函數(shù)傳入的event包括如下字段：

　　type：字符串，表示事件類(lèi)型

　　timeStamp： 數(shù)值,，表示頁(yè)面打開(kāi)到觸發(fā)事件所經(jīng)過(guò)的毫秒數(shù)

　　target：Object類(lèi)型,，表示觸發(fā)事件的組件的一些屬性值集合

　　currentTarget：Object類(lèi)型，表示當(dāng)前組件的一些屬性值集合

　　detail：Object類(lèi)型額外的信息

　　touches：數(shù)組類(lèi)型,，表示觸摸事件,，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組

　　changedTouches：數(shù)組類(lèi)型，表示觸摸事件,，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)

　　這里的字段建議自己用console.log(event)打印出來(lái)自己看看啥意思比較容易理解,。

      以上就是長(zhǎng)沙小程序開(kāi)發(fā)智企云給我們帶來(lái)的小程序的頁(yè)面和事件方面的學(xué)習(xí)報(bào)道，希望大家對(duì)此能有所了解,，繼續(xù)深挖,，后續(xù)我們也會(huì)帶來(lái)更多關(guān)于小程序開(kāi)發(fā)的相關(guān)報(bào)道，敬請(qǐng)期待關(guān)注智企云,。