1.配置文件
page.json
來決定
初始化項目的時候,文件自動生成app.json
來對小程序進行全局配置。
2.邏輯層(App Server)
小程序開發框架的邏輯層是由JavaScript
編寫。
邏輯層
將數據進行處理后發送給視圖層
,同時接受視圖層
的事件反饋。 在 JavaScript
的基礎上,做了一些修改,以方便地開發小程序。
1)增加 App
和 Page
方法,進行程序
和頁面
的注冊。
App()
函數用來注冊一個小程序。接受一個 object
參數,其指定小程序的生命周期函數
等。
App.prototype.getCurrentPage()
getCurrentPage() 函數用戶獲取當前頁面的實例。
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
2)App()
叫做注冊程序,Page()
叫做注冊頁面
Page()
接受一個 object
參數,
指定頁面的初始數據、生命周期函數、事件處理函數等
3)初始化數據
初始化數據將作為頁面的第一次渲染。
data
將會以 JSON
的形式由邏輯層傳至渲染層,所以其數據必須是可以轉成JSON
的格式:字符串,數字,布爾值,對象,數組
。
渲染層可以通過WXML
對數據進行綁定。
eg:下面這個是一段wxml
的代碼
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
下面這個是一段.js
代碼,data
是初始化頁面數據
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
4)頁面的生命周期函數
a)onLoad
: 頁面加載
一個頁面只會調用一次。
參數可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。這個是什么意思呢?
onLoad:function(options){
// options 就是參數
// options.redirect
}
b)onShow
: 頁面顯示
每次打開頁面都會調用一次。
c)onReady
: 頁面初次渲染完成
一個頁面只會調用一次,代表頁面已經準備妥當,可以和視圖層進行交互
對界面的設置如wx.setNavigationBarTitle
請在onReady
之后設置
d)onHide
: 頁面隱藏
當navigateTo
或底部tab
切換時調用。
e)onUnload
: 頁面卸載
當redirectTo
或navigateBack
的時候調用。
5)頁面相關事件處理函數
onPullDownRefresh
: 下拉刷新
監聽用戶下拉刷新事件。
需要在config
的window
選項中開啟enablePullDownRefresh
。
6)事件處理函數
除了初始化數據和生命周期函數,Page
中還可以定義一些特殊的函數:事件處理函數
。在渲染層可以在組件中加入事件綁定
,當達到觸發事件時,就會執行Page
中定義的事件處理函數
。
eg:
// .wxml
<view bindtap="tap_view"> click me!</view>
// .js
Page({
tap_view:function(){
console.log('view taped!');
}
})
7)Page.prototype.setData()
setData
函數用于將數據
從邏輯層
發送到視圖層
,同時改變對應的this.data
的值。
注意:
1.直接修改 this.data
無效,無法改變頁面的狀態,還會造成數據不一致。
2.單次設置的數據不能超過1024kB
,請盡量避免一次設置過多的數據。
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
data: {
text: 'init data',
array: [{text: 'init data'}],
object: {
text: 'init data'
}
},
changeText: function() {
// this.data.text = 'changed data' // bad, it can not work
this.setData({
text: 'changed data'
})
},
changeItemInArray: function() {
// you can use this way to modify a danamic data path
this.setData({
'array[0].text':'changed data'
})
},
changeItemInObject: function(){
this.setData({
'object.text': 'changed data'
});
},
addNewField: function() {
this.setData({
'newField.text': 'new data'
})
}
})
這里的this
指的是.js
文件
8).頁面的路由
小程序
中所有頁面的路由全部由框架
進行管理
路由方式:
a.初始化
打開新頁面:調用 API wx.navigateTo
或使用組件<navigator />
(節點方式)
b.打開新頁面,相當于iOS中的nav
的push
調用 API wx.navigateTo
或使用組件 <navigator />
,調用后路由前頁面函數:onHide
c.頁面重定向
調用 API wx.redirectTo
或使用組件 <navigator />
,調用后路由前頁面函數:onUnload
d.頁面返回
調用 API wx.navigateBack
或用戶按左上角返回
按鈕
e.Tab切換
多Tab
模式下用戶切換Tab
9)文件作用域
在 JavaScript
文件中聲明的變量
和函數
只在該文件中有效;不同的文件中可以聲明相同名字的變量和函數,不會互相影響。
通過全局函數 getApp()
可以獲取全局的應用實例
,如果需要全局的數據可以在 App()
中設置
10)模塊化
我們可以將一些公共的代碼抽離成為一個單獨的js
文件,作為一個模塊。模塊只有通過 module.exports
才能對外暴露接口。
module.exports = {
sayHello: sayHello
}
function sayHello(name){
console.log('Hello' + name + '!');
}
// 使用
var common = require('common.js');
Page({
helloMaer:function(){
common.sayHello('Maer');
}
})
11)API
小程序開發框架提供許多原生api
,可以方便的掉漆微信提供的功能,eg
:獲取用戶信息,本地存儲,微信支付等.
wx.on
開頭的API
是監聽某個時間發生的API
接口,接受一個CALLBACK
函數作為參數。當該時間觸發的時候,會調用callback
函數。
如果沒有特殊約定,其他的api
接口都接受一個object
作為參數。
object
中可以指定success
, fail
, complete
來接收接口調用結果。
success Function 接口調用成功的回調函數
fail Function 接口調用失敗的回調函數
complete Function 接口調用結束的回調函數(調用成功、失敗都會執行)
這里舉例幾個常用的api
接口:
wx.request 發起的是https請求。**一個微信小程序,同時只能有5個網絡請求連接。**
數據 API 列表:
wx.getStorage // 獲取本地數據緩存
wx.setStorage // 設置本地數據緩存
wx.clearStorage // 清除本地數據緩存
獲取網絡類型
wx.getNetworkType(OBJECT)
eg:
wx.getNetworkType({
success:function(res){
var networkType = res.networkType; // 返回網絡類型2g,3g,4g,wifi
}
})
界面 API 列表:
參考:https://mp.weixin.qq.com/debug/wxadoc/dev/api/
3.視圖層
框架的視圖層由WXML
與 WXSS
編寫,由組件
來進行展示。
將邏輯層
的數據反應成視圖,同時將視圖層
的事件發送給邏輯層。
組件
(Component
)是視圖的基本組成單元。
1)WXML
WXML(WeiXin Markup Language)是框架設計的一套標簽語言,結合基礎組件、事件系統,可以構建出頁面的結構。
wxml作用主要有:數據綁定、列表渲染、條件渲染、模板、事件、引用
數據綁定:
// wxml
<view>{{message}}</view>
// page.js
Page({
data:{
message: 'Hello world'!
}
})
列表渲染
// wxml
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data:{
array:[0, 1, 2, 3, 4]
}
})
條件渲染
<!--wxml--><view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
<block/>
并不是一個組件,它僅僅是一個包裝元素
,不會在頁面中做任何渲染
,只接受控制屬性
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
模板
總結:在屬性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template>
擴展運算符...
來將一個對象展開
Page({
data:{
staffA:{firstname:'a', lastname:'b'}
}
})
注意: 如果
js:
Page({
data:{
foo:'a',
bar:'b'
}
})`
<template data={{foo, bar}}>
data組合對象為:{foo:'a', bar:'b'}
<template data={{'A':foo, 'B':bar}}>
data組合對象為:{'A':'a', 'B':'b'}
模板擁有自己的作用域,只能使用data
傳入的數據。
事件
eg:
<view bindtap="add">{{count}}</view>
Page({
data:{
count:1
}
add: function(e){
this.setData({
count:this.data.count + 1
})
}
})
2)wxml
為了適應廣大的前端開發者,WXSS
具有 CSS
大部分特性。 同時為了更適合開發微信小程序,對 CSS
進行了擴充以及修改。
尺寸單位
rpx(responsive pixel)
規定屏幕寬為750rpx
樣式導入
使用@import
語句可以導入外聯樣式表
,@import
后跟需要導入的外聯樣式表
的相對路徑,用;
表示語句結束。