微信小程序開發(fā)項目實戰(zhàn)（微課版）課件 項目2 小程序編程基礎(chǔ)

項目二小程序編程基礎(chǔ)任務(wù)一小程序的執(zhí)行順序MiniProgram小程序包含哪些項目文件，每一個頁面包含哪些文件，把它寫在以下橫線里？想一想：Next》在app.js頁面，定義一個App()函數(shù)，還可用來注冊一個微信小程序。App()必須在app.js中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會出現(xiàn)無法預(yù)期的后果。App()函數(shù)里有一些生命周期函數(shù)。Next》小程序注冊函數(shù)App()屬性類型必填說明onLaunchfunction否生命周期回調(diào)——監(jiān)聽小程序初始化。onShowfunction否生命周期回調(diào)——監(jiān)聽小程序啟動或切前臺。onHidefunction否生命周期回調(diào)——監(jiān)聽小程序切后臺。onErrorfunction否錯誤監(jiān)聽函數(shù)。onPageNotFoundfunction否頁面不存在監(jiān)聽函數(shù)。onUnhandledRejectionfunction否未處理的Promise拒絕事件監(jiān)聽函數(shù)。onThemeChangefunction否監(jiān)聽系統(tǒng)主題變化其他any否開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)變量到Object參數(shù)中，用this可以訪問小程序注冊函數(shù)App()App({ onLaunch(options){console.log("啟動onLaunch")},onShow(options){console.log("啟動onShow")},onHide(){console.log("啟動onHide")},onError(msg){console.log(msg)},globalData:'Iamglobaldata'})小程序注冊函數(shù)App()執(zhí)行結(jié)果如下圖所示。Page(Objectobject)注冊小程序中的一個頁面。接受一個

Object

類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。頁面注冊函數(shù)Page()Next》屬性類型說明dataObject頁面的初始數(shù)據(jù)optionsObject頁面的組件選項，同中的options，需要基礎(chǔ)庫版本behaviorsStringArray類似于mixins和traits的組件間代碼復(fù)用機制，參見，需要基礎(chǔ)庫版本onLoadfunction生命周期回調(diào)—監(jiān)聽頁面加載onShowfunction生命周期回調(diào)—監(jiān)聽頁面顯示onReadyfunction生命周期回調(diào)—監(jiān)聽頁面初次渲染完成onHidefunction生命周期回調(diào)—監(jiān)聽頁面隱藏onUnloadfunction生命周期回調(diào)—監(jiān)聽頁面卸載onPullDownRefreshfunction監(jiān)聽用戶下拉動作onReachBottomfunction頁面上拉觸底事件的處理函數(shù)onShareAppMessagefunction用戶點擊右上角轉(zhuǎn)發(fā)其他any開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到Object參數(shù)中，在頁面的函數(shù)中用this可以訪問。這部分屬性會在頁面實例創(chuàng)建時進行一次深拷貝。頁面注冊函數(shù)Page()Next》感

謝

觀

看THANK項目二小程序編程基礎(chǔ)項目二小程序編程基礎(chǔ)任務(wù)二構(gòu)建頁面數(shù)據(jù)MiniProgram定義data數(shù)據(jù)：在頁面JS文件page函數(shù)中第一項為data屬性，在data中定義本頁面邏輯處理需要用到的數(shù)據(jù)，其中很大一部分?jǐn)?shù)據(jù)將用WXML文件的數(shù)據(jù)渲染。因為小程序JS文件是基于JavaScript編寫的，所以在JS文件中可以定義字符串、數(shù)字、布爾值、對象和數(shù)組等類型的數(shù)據(jù)。Next》頁面數(shù)據(jù)Page({

data:

{

text:

"This

is

page

data.",

sliderOffset:

0,

state:{

genre:[],

genre_index:

0,

model:[],

model_index:

0,

terminalStatus:'',

}

},})獲取data數(shù)據(jù)：獲取data中的text和genre_index值需要使用this。Next》頁面數(shù)據(jù)

onLoad:function(options){

var

gener_index=this.data.state.genre_index

console.log(gener_index)

var

text=this.data.text

console.log(text)

}頁面數(shù)據(jù)執(zhí)行效果如下圖所示。內(nèi)容綁定：WXML中的動態(tài)數(shù)據(jù)均來自對應(yīng)Page的data。數(shù)據(jù)綁定使用Mustache語法即{{}}語法將變量包起來。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<view>{{message}}</view>組件屬性：在小程序組件中,properties是組件的對外屬性,用來接收外界傳遞到組件中的數(shù)據(jù)。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<viewid="item-{{id}}"></view>控制屬性：在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下Next》數(shù)據(jù)綁定<view

wx:if="{{condition}}">hello,world</view>關(guān)鍵字：true：boolean類型的true，代表真值。false：boolean類型的false，代表假值。Next》數(shù)據(jù)綁定在index.wxml頁面數(shù)據(jù)綁定，示例代碼如下：<checkboxchecked="{{false}}"></checkbox>特別注意：不要直接寫checked="false"，其計算結(jié)果是一個字符串，轉(zhuǎn)成boolean類型后代表真值。感

謝

觀

看THANK項目二小程序編程基礎(chǔ)項目二小程序編程基礎(chǔ)任務(wù)三列表渲染MiniProgram在微信小程序中，列表渲染是一種常見的需求，它可以將一組數(shù)據(jù)以列表的形式呈現(xiàn)給用戶。列表渲染在小程序中的實現(xiàn)主要依賴于wx:for指令，它允許遍歷數(shù)組或?qū)ο螅γ總€元素進行操作。Next》列表渲染簡介在組件上使用

wx:for

控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。默認(rèn)數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為

index，數(shù)組當(dāng)前項的變量名默認(rèn)為

item。Next》wx:for和wx:key的使用Page({data:{array:[

{message:'foo'},

{message:'bar'}

]}})在index.wxml頁面實現(xiàn)列表渲染，示例代碼如下：<viewwx:for="{{array}}">{{index}}:{{item.message}}</view>wx:for和wx:key的使用示例代碼效果如下圖所示。使用

wx:for-item

可以指定數(shù)組當(dāng)前元素的變量名，使用

wx:for-index

可以指定數(shù)組當(dāng)前下標(biāo)的變量名。Next》wx:for和wx:key的使用<viewwx:for="{{array}}"wx:for-index="idx"wx:for-item="itemName">{{idx}}:{{itemName.message}}</view>將

wx:for

用在<block/>標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。Next》blockwx:for的使用<block

wx:for="{{[1,

2,

3]}}"

wx:key="*this">

<view>

{{index}}:

{{item}}

</view></block>將

wx:for

用在<block/>標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。Next》blockwx:for的使用<viewwx:for="array">{{item}}</view><viewwx:for="{{['a','r','r','a','y']}}">{{item}}</view>等同于blockwx:for的使用運行結(jié)果如下所示?；ɡㄌ柡鸵栔g如果有空格，將最終被解析成為字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用運行結(jié)果如下所示。感

謝

觀

看THANK項目二小程序編程基礎(chǔ)項目二小程序編程基礎(chǔ)任務(wù)四條件渲染MiniProgram在微信小程序中，條件渲染是一種非常實用的技術(shù)，它允許我們根據(jù)條件來決定是否顯示某個組件或頁面。通過條件渲染，開發(fā)者可以動態(tài)地呈現(xiàn)用戶界面，根據(jù)用戶的輸入、數(shù)據(jù)或其他條件來做出相應(yīng)的調(diào)整。Next》條件渲染簡介在框架中，使用wx:if=""來判斷是否需要渲染該代碼塊：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else來添加一個else塊：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>wx:if的使用示例代碼效果如下圖所示。因為wx:if是一個控制屬性，需要將它添加到一個標(biāo)簽上。如果要一次性判斷多個組件標(biāo)簽，可以使用一個<block/>標(biāo)簽將多個組件包裝起來，并在上邊使用wx:if控制屬性。Next》blockwx:if的使用<block/>并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性<blockwx:if="{{true}}"><view>view1</view><view>view2</view></block>blockwx:if的使用示例代碼效果如下圖所示。在框架中，使用wx:if=""來判斷是否需要渲染該代碼塊：Next》wx:if的使用<viewwx:if="{{condition}}">Helloworld</view>也可以用wx:elif和wx:else來添加一個else塊：<viewwx:if="{{length>5}}">1</view><viewwx:elif="{{length>2}}">2</view><viewwx:else>3</view>hidden也可以用來控制元素的顯示與隱藏，與wx:if不同，當(dāng)wx:if的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。同時wx:if也是惰性的，如果在初始渲染條件為false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。Next》hidden的使用<view

hidden="{{flag}}">

flag為true值時，隱藏評論</view>Page({

data:

{

flag:true

}})在JS中定義flag的值blockwx:for的使用運行結(jié)果如下所示?；ɡㄌ柡鸵栔g如果有空格，將最終被解析成為字符串。Next》blockwx:for的使用<viewwx:for="{{[1,2,3]}}">{{item}}</view><viewwx:for="{{[1,2,3]+''}}">{{item}}</view>等同于blockwx:for的使用運行結(jié)果如下所示。感

謝

觀

看THANK項目二小程序編程基礎(chǔ)項目二小程序編程基礎(chǔ)任務(wù)五事件渲染MiniProgram事件是視圖層到邏輯層的通訊方式，可以將用戶的行為反饋到邏輯層進行處理。事件可以綁定在組件上，當(dāng)達到觸發(fā)事件，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)。事件對象可以攜帶額外信息，如id,dataset,touches。小程序中綁定事件，通過bind關(guān)鍵字來實現(xiàn)。如bindinput，bindtap(綁定點擊事件)，bindchange等。Next》事件綁定簡介通過bind+“事件名稱”為組件綁定事件，如bindchange、bindtap等，當(dāng)用戶點擊該組件的時候會在該頁面對應(yīng)的Page中找到相應(yīng)的事件處理函數(shù)。在大多數(shù)組件和自定義組件中，

bind

后也可以緊跟一個冒號，其含義不變，如

bind:tap。Next》事件的使用方式（1）不帶參數(shù)的事件綁定在wxml中定義組件。Next》事件的使用方式在JS頁面定義事件處理函數(shù)。Page({data:{num:0},changeinput:function(e){console.log(this.setData({num:e.detail.value}));}})<inputtype="text"bindchange="changeinput"/>（2）帶參數(shù)的事件綁定在wxml中定義組件。Next》事件的使用方式在JS頁面定義事件處理函數(shù)。Page({

data:

{

},

tapEvent:function(e){

console.log(e)

//獲取事件詳情

console.log(e.currentTarget.dataset.hi)//獲取數(shù)據(jù)綁定data-的數(shù)據(jù)

console.log(e.currentTarget.dataset.id)

}})<view

data-hi="WeChat"

data-id="01"

bindtap="tapEvent"

>Click

me</view>事件分為冒泡事件和非冒泡事件：冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞。非冒泡事件：當(dāng)一個組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞。Next》事件分類運行環(huán)境渲染層touchstart手指觸摸動作開始touchmove手指觸摸后移動touchcancel手指觸摸動作被打斷，如來電提醒，彈窗touchend手指觸摸動作結(jié)束tap手指觸摸后馬上離開longpress手指觸摸后，超過350ms再離開，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，tap事件將不被觸發(fā)longtap手指觸摸后，超過350ms再離開（推薦使用longpress事件代替）transitionend會在WXSStransition或wx.createAnimation動畫結(jié)束后觸發(fā)animationstart會在一個WXSSanimation動畫開始時觸發(fā)animationiteration會在一個WXSSanimation一次迭代結(jié)束時觸發(fā)animationend會在一個WXSSanimation動畫完成時觸發(fā)touchforcechange在支持3DTouch的iPhone設(shè)備，重按時會觸發(fā)WXML的冒泡事件列表：觸摸類事件支持捕獲階段。捕獲階段位于冒泡階段之前，且在捕獲階段中，事件到達節(jié)點的順序與冒泡階段恰好相反。需要在捕獲階段監(jiān)聽事件時，可以采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。Next》