小程式開發 學習筆記-1 (邏輯層、檢視層)
1、小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page。
2、頁面的.json只能設定 window 相關的配置項,以決定本頁面的視窗表現,所以無需寫 window 這個鍵
邏輯層(App Service)
1、小程式開發框架的邏輯層由 JavaScript 編寫。
2、邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。
3、由於框架並非執行在瀏覽器中,所以 JavaScript 在 web 中一些能力都無法使用,如 document,window 等。
4、開發者寫的所有程式碼最終將會打包成一份 JavaScript,並在小程式啟動的時候執行,直到小程式銷燬。類似 ServiceWorker,所以邏輯層也稱之為 App Service。
註冊程式:
App() —— App() 必須在 app.js 中註冊,且不能註冊多個。
App() 函式用來註冊一個小程式。接受一個 object 引數,其指定小程式的生命週期函式等。
註冊頁面:
Page
Page() 函式用來註冊一個頁面。接受一個 object 引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。
1、生命週期函式:
onLoad: 頁面載入
一個頁面只會呼叫一次,可以在 onLoad 中獲取開啟當前頁面所呼叫的 query 引數。
onShow: 頁面顯示
每次開啟頁面都會呼叫一次。
onReady: 頁面初次渲染完成
一個頁面只會呼叫一次,代表頁面已經準備妥當,可以和檢視層進行互動。
對介面的設定如wx.setNavigationBarTitle請在onReady之後設定。詳見生命週期
onHide: 頁面隱藏
當navigateTo或底部tab切換時呼叫。
onUnload: 頁面解除安裝
當redirectTo或navigateBack的時候呼叫。
2、頁面相關事件處理函式:*
onPullDownRefresh: 下拉重新整理
需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh
。
當處理完資料重新整理後,wx.stopPullDownRefresh
可以停止當前頁面的下拉重新整理。
onReachBottom: 上拉觸底
可以在app.json的window選項中或頁面配置中設定觸發距離onReachBottomDistance
在觸發距離內滑動期間,本事件只會被觸發一次。
onPageScroll: 頁面滾動
onShareAppMessage: 使用者轉發
Page.prototype.route
route 欄位可以獲取到當前頁面的路徑。
Page.prototype.setData()
setData 函式用於將資料從邏輯層傳送到檢視層(非同步),同時改變對應的 this.data 的值(同步)。
注意:
1、直接修改 this.data 而不呼叫 this.setData 是無法改變頁面的狀態的,還會造成資料不一致。
2、單次設定的資料不能超過1024kB,請儘量避免一次設定過多的資料。
3、請不要把 data 中任何一項的 value 設為 undefined ,否則這一項將不被設定並可能遺留一些潛在問題。
模組化:
可以將一些公共的程式碼抽離成為一個單獨的 js 檔案,作為一個模組。模組只有通過 module.exports
(推薦使用)或者 exports
才能對外暴露介面。
檢視層
框架的檢視層由 WXML 與 WXSS 編寫,由元件來進行展示。
將邏輯層的資料反應成檢視,同時將檢視層的事件傳送給邏輯層。
WXML(WeiXin Markup language) 用於描述頁面的結構。
WXS(WeiXin Script) 是小程式的一套指令碼語言,結合 WXML,可以構建出頁面的結構。
WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。
元件(Component)是檢視的基本組成單元。
WXML
WXML(WeiXin Markup Language)是框架設計的一套標籤語言,結合基礎元件、事件系統,可以構建出頁面的結構。
資料繫結:
WXML 中的動態資料均來自對應 Page
的 data
。
三元運算:
<view hidden="{{flag ? true : false}}"> Hidden </view>
列表渲染:
wx:for
在元件上使用 wx:for 控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。
wx:for 也可以巢狀,下邊是一個九九乘法表:
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block wx:for
類似 block wx:if,也可以將 wx:for 用在標籤上,以渲染一個包含多節點的結構塊。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中專案的位置會動態改變或者有新的專案新增到列表中,並且希望列表中的專案保持自己的特徵和狀態(如 中的輸入內容, 的選中狀態),需要使用 wx:key 來指定列表中專案的唯一的識別符號。
條件渲染:
wx:if
在框架中,使用 wx:if="{{condition}}"
來判斷是否需要渲染該程式碼塊:
也可以用 wx:elif
和 wx:else
來新增一個 else 塊:
block wx:if
因為 wx:if
是一個控制屬性,需要將它新增到一個標籤上。如果要一次性判斷多個元件標籤,可以使用一個 <block/>
標籤將多個元件包裝起來,並在上邊使用 wx:if
控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
wx:if
vs hidden
:
如果需要頻繁切換的情景下,用 hidden
更好,
如果在執行時條件不大可能改變則 wx:if
較好。
模板(template):
WXML提供模板(template),可以在模板中定義程式碼片段,然後在不同的地方呼叫。
使用 is 屬性,宣告需要的使用的模板,然後將模板所需要的 data 傳入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is 屬性可以使用 Mustache 語法,來動態決定具體需要渲染哪個模板
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
事件:
1、事件是檢視層到邏輯層的通訊方式。/2、事件可以將使用者的行為反饋到邏輯層進行處理。/3、事件可以繫結在元件上,當達到觸發事件,就會執行邏輯層中對應的事件處理函式。/4、事件物件可以攜帶額外資訊,如 id, dataset, touches。
1、使用方式
如bindtap
,當用戶點選該元件的時候會在該頁面對應的Page中找到相應的事件處理函式。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
在相應的Page定義中寫上相應的事件處理函式,引數是event。
Page({
tapName: function(event) {
console.log(event)
}
})
2、事件分類
事件分為冒泡事件和非冒泡事件:
冒泡事件:當一個元件上的事件被觸發後,該事件會向父節點傳遞。
非冒泡事件:當一個元件上的事件被觸發後,該事件不會向父節點傳遞。
3、事件繫結和冒泡
事件繫結的寫法同組件的屬性,以 key、value 的形式。
key
以bind
或catch
開頭,然後跟上事件的型別,如bindtap
、catchtouchstart
。
bind
事件繫結不會阻止冒泡事件向上冒泡,catch
事件繫結可以阻止冒泡事件向上冒泡。
自基礎庫版本 1.5.0 起,bind和catch後可以緊跟一個冒號,其含義不變,如bind:tap
、catch:touchstart
。
value
是一個字串,需要在對應的 Page
中定義同名的函式。不然當觸發事件的時候會報錯。
4、事件的捕獲階段
需要在捕獲階段監聽事件時,可以採用capture-bind
、capture-catch
關鍵字,後者將中斷捕獲階段和取消冒泡階段。
在下面的程式碼中,點選 inner view 會先後呼叫handleTap2
、handleTap4
、handleTap3
、handleTap1
。
<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
outer view
<view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
inner view
</view>
</view>
如果將上面程式碼中的第一個capture-bind
改為capture-catch
,將只觸發handleTap2。
5、事件物件
如無特殊說明,當元件觸發事件時,邏輯層繫結該事件的處理函式會收到一個事件物件。
BaseEvent基礎事件物件屬性列表
type
String,事件型別
timeStamp
Integer,事件生成時的時間戳
target
Object,觸發事件的元件的一些屬性值集合
currentTarget
Object,當前元件的一些屬性值集合、事件繫結的當前元件。
CustomEvent 自定義事件物件屬性列表(繼承 BaseEvent)
detail
Object, 額外的資訊
TouchEvent 觸控事件物件屬性列表(繼承 BaseEvent):
touches
Array,觸控事件,當前停留在螢幕中的觸控點資訊的陣列
changedTouches
Array,觸控事件,當前變化的觸控點資訊的陣列
6、dataset
書寫方式: 以data-
開頭,多個單詞由連字元-連結,不能有大寫(大寫會自動轉成小寫)如data-element-type
,最終在 event.currentTarget.dataset
中會將連字元轉成駝峰elementType。
引用:
WXML 提供兩種檔案引用方式import
和include
。
import
import
可以在該檔案中使用目標檔案定義的template
import
有作用域的概念,即只會 import
目標檔案中定義的 template
,而不會 import
目標檔案 import
的 template
。
如:C import B,B import A,在C中可以使用B定義的template,在B中可以使用A定義的template,但是C不能使用A定義的template。
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>
include
include
可以將目標檔案除了 <template/> <wxs/>
外的整個程式碼引入,相當於是拷貝到 include
位置,如:
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
<!-- header.wxml -->
<view> header </view>
<!-- footer.wxml -->
<view> footer </view>
WXSS
WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述 WXML 的元件樣式。
1、尺寸單位
rpx(responsive pixel)
: 可以根據螢幕寬度進行自適應。
1rpx = 0.5px = 1物理畫素
。
2、樣式匯入–外聯樣式表
使用@import
語句可以匯入外聯樣式表,@import
後跟需要匯入的外聯樣式表的相對路徑,用;
表示語句結束。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
2、樣式匯入–內聯樣式表
框架元件上支援使用 style
、class
屬性來控制組件的樣式。
style
:靜態的樣式統一寫到 class
中。style
接收動態的樣式,在執行時會進行解析,請儘量避免將靜態的樣式寫進 style
中,以免影響渲染速度。
<view style="color:{{color}};" />
class:用於指定樣式規則,其屬性值是樣式規則中類選擇器名(樣式類名)的集合,樣式類名不需要帶上.,樣式類名之間用空格分隔。
<view class="normal_view" />
3、全域性樣式與區域性樣式
定義在 app.wxss
中的樣式為全域性樣式,作用於每一個頁面。
在 page
的 wxss
檔案中定義的樣式為區域性樣式,只作用在對應的頁面,並會覆蓋 app.wxss
中相同的選擇器