1.配置文件
page.json來決定
初始化項(xiàng)目的時(shí)候，文件自動(dòng)生成app.json來對小程序進(jìn)行全局配置扮念。
2.邏輯層（App Server）
小程序開發(fā)框架的邏輯層是由JavaScript編寫损搬。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋柜与。 在 JavaScript的基礎(chǔ)上，做了一些修改嵌灰，以方便地開發(fā)小程序弄匕。
1)增加 App 和 Page方法，進(jìn)行程序和頁面的注冊沽瞭。
App（）函數(shù)用來注冊一個(gè)小程序迁匠。接受一個(gè) object 參數(shù)，其指定小程序的生命周期函數(shù)等驹溃。
App.prototype.getCurrentPage()
getCurrentPage() 函數(shù)用戶獲取當(dāng)前頁面的實(shí)例城丧。
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
2）App()叫做注冊程序，Page()叫做注冊頁面
Page（）接受一個(gè) object參數(shù),
指定頁面的初始數(shù)據(jù)豌鹤、生命周期函數(shù)亡哄、事件處理函數(shù)等
3）初始化數(shù)據(jù)
初始化數(shù)據(jù)將作為頁面的第一次渲染。
data將會(huì)以 JSON 的形式由邏輯層傳至渲染層布疙，所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式：字符串蚊惯，數(shù)字愿卸，布爾值，對象截型，數(shù)組趴荸。
渲染層可以通過WXML 對數(shù)據(jù)進(jìn)行綁定。
eg:下面這個(gè)是一段wxml的代碼
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
下面這個(gè)是一段.js代碼宦焦，data是初始化頁面數(shù)據(jù)
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
4）頁面的生命周期函數(shù)
a)onLoad: 頁面加載
一個(gè)頁面只會(huì)調(diào)用一次发钝。
參數(shù)可以獲取wx.navigateTo和wx.redirectTo及<navigator/>中的 query。這個(gè)是什么意思呢波闹？
onLoad:function(options){
// options 就是參數(shù)
// options.redirect
}
b)onShow: 頁面顯示
每次打開頁面都會(huì)調(diào)用一次笼平。
c)onReady: 頁面初次渲染完成
一個(gè)頁面只會(huì)調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)舔痪，可以和視圖層進(jìn)行交互
對界面的設(shè)置如wx.setNavigationBarTitle請?jiān)?code>onReady之后設(shè)置
d)onHide: 頁面隱藏
當(dāng)navigateTo或底部tab切換時(shí)調(diào)用寓调。
e)onUnload: 頁面卸載
當(dāng)redirectTo或navigateBack的時(shí)候調(diào)用。
5)頁面相關(guān)事件處理函數(shù)
onPullDownRefresh: 下拉刷新
監(jiān)聽用戶下拉刷新事件锄码。
需要在config的window選項(xiàng)中開啟enablePullDownRefresh夺英。
6)事件處理函數(shù)
除了初始化數(shù)據(jù)和生命周期函數(shù)，Page 中還可以定義一些特殊的函數(shù)：事件處理函數(shù)滋捶。在渲染層可以在組件中加入事件綁定痛悯，當(dāng)達(dá)到觸發(fā)事件時(shí)，就會(huì)執(zhí)行Page 中定義的事件處理函數(shù)重窟。
eg:
// .wxml
<view bindtap="tap_view"> click me!</view>
// .js
Page({
tap_view:function(){
console.log('view taped!');
}
})
7)Page.prototype.setData()
setData函數(shù)用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層载萌，同時(shí)改變對應(yīng)的this.data的值。
注意：
1.直接修改 this.data無效巡扇，無法改變頁面的狀態(tài)扭仁，還會(huì)造成數(shù)據(jù)不一致。
2.單次設(shè)置的數(shù)據(jù)不能超過1024kB厅翔，請盡量避免一次設(shè)置過多的數(shù)據(jù)乖坠。
<!--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）.頁面的路由
小程序中所有頁面的路由全部由框架進(jìn)行管理
路由方式：
a.初始化
打開新頁面：調(diào)用 API wx.navigateTo 或使用組件<navigator />（節(jié)點(diǎn)方式）
b.打開新頁面,相當(dāng)于iOS中的nav的push
調(diào)用 API wx.navigateTo 或使用組件 <navigator />，調(diào)用后路由前頁面函數(shù)：onHide
c.頁面重定向
調(diào)用 API wx.redirectTo 或使用組件 <navigator />,調(diào)用后路由前頁面函數(shù)：onUnload
d.頁面返回
調(diào)用 API wx.navigateBack或用戶按左上角返回按鈕
e.Tab切換
多Tab模式下用戶切換Tab
9）文件作用域
在 JavaScript 文件中聲明的變量和函數(shù)只在該文件中有效刀闷；不同的文件中可以聲明相同名字的變量和函數(shù)熊泵，不會(huì)互相影響。
通過全局函數(shù) getApp() 可以獲取全局的應(yīng)用實(shí)例甸昏，如果需要全局的數(shù)據(jù)可以在 App() 中設(shè)置
10)模塊化
我們可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的js 文件顽分，作為一個(gè)模塊。模塊只有通過 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
小程序開發(fā)框架提供許多原生api卒蘸，可以方便的掉漆微信提供的功能，eg:獲取用戶信息花墩，本地存儲(chǔ)悬秉，微信支付等.
wx.on開頭的API是監(jiān)聽某個(gè)時(shí)間發(fā)生的API接口澄步，接受一個(gè)CALLBACK函數(shù)作為參數(shù)。當(dāng)該時(shí)間觸發(fā)的時(shí)候和泌，會(huì)調(diào)用callback函數(shù)村缸。
如果沒有特殊約定，其他的api接口都接受一個(gè)object作為參數(shù)武氓。
object中可以指定success, fail, complete來接收接口調(diào)用結(jié)果梯皿。
success Function 接口調(diào)用成功的回調(diào)函數(shù)
fail Function 接口調(diào)用失敗的回調(diào)函數(shù)
complete Function 接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）
這里舉例幾個(gè)常用的api接口：
wx.request 發(fā)起的是https請求县恕。**一個(gè)微信小程序东羹，同時(shí)只能有5個(gè)網(wǎng)絡(luò)請求連接。**
數(shù)據(jù) API 列表：
wx.getStorage // 獲取本地?cái)?shù)據(jù)緩存
wx.setStorage // 設(shè)置本地?cái)?shù)據(jù)緩存
wx.clearStorage // 清除本地?cái)?shù)據(jù)緩存
獲取網(wǎng)絡(luò)類型
wx.getNetworkType(OBJECT)
eg：
wx.getNetworkType({
success:function(res){
var networkType = res.networkType; // 返回網(wǎng)絡(luò)類型2g,3g,4g,wifi
}
})
界面 API 列表：
參考：https://mp.weixin.qq.com/debug/wxadoc/dev/api/
3.視圖層
框架的視圖層由WXML 與 WXSS編寫忠烛，由組件來進(jìn)行展示属提。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層美尸。
組件(Component)是視圖的基本組成單元冤议。
1)WXML
WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言，結(jié)合基礎(chǔ)組件师坎、事件系統(tǒng)恕酸，可以構(gòu)建出頁面的結(jié)構(gòu)。
wxml作用主要有：數(shù)據(jù)綁定胯陋、列表渲染蕊温、條件渲染、模板遏乔、事件义矛、引用
數(shù)據(jù)綁定：
// 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/>并不是一個(gè)組件，它僅僅是一個(gè)包裝元素按灶，不會(huì)在頁面中做任何渲染症革，只接受控制屬性
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
模板
總結(jié)：在屬性中的值都要加“”.<template is="staffName" data="{{...staffA}}"></template>
擴(kuò)展運(yùn)算符...來將一個(gè)對象展開
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傳入的數(shù)據(jù)鸯旁。
事件
eg:
<view bindtap="add">{{count}}</view>
Page({
data:{
count:1
}
add: function(e){
this.setData({
count:this.data.count + 1
})
}
})
2)wxml
為了適應(yīng)廣大的前端開發(fā)者，WXSS具有 CSS 大部分特性量蕊。 同時(shí)為了更適合開發(fā)微信小程序铺罢，對 CSS 進(jìn)行了擴(kuò)充以及修改。
尺寸單位
rpx（responsive pixel） 規(guī)定屏幕寬為750rpx
樣式導(dǎo)入
使用@import
語句可以導(dǎo)入外聯(lián)樣式表残炮，@import
后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑韭赘，用;
表示語句結(jié)束。
