小程序基礎
小程序官方地址，小程序開發者工具，點擊此處下載。在微信小程序中有一個配置文件project.config.json，此文件可以讓開發者在不同設備中進行開發。
微信小程序共支持5種文件，wxml，wxss，js，json，wxs以及圖片文件等。每一頁面都具有wxml，wxss，js，json文件，但比不是必須的，小程序和網頁類似，一種以html+css+js，而小程序則是wxml+wxss+js，如wxml用來描述頁面結構，wxss用例描述頁面的樣式，js用來添加邏輯信息的。
wxml
wxml用來構建頁面的結構
//數據綁定
// page.js
Page({
data: {
message: 'Hello world!'
}
})
學會用數據綁定，wxml中的動態數據都可來自對應的Page的data中的數據，如何綁定是很簡單易懂的。如
// 使用{{ ... }}
// 對應中的Page的data數據
Page({
data: {
id: 0
}
})
Page({
data: {
condition: true
}
})
重點
true：代表真值。
false：代表假值。
// 不可少的 {{ ... }}
// 必備掌握
Page({
data: {
object: {
key: 'Hello '
},
array: ['hh','da']
}
})
// 數組
Page({
data: {
zero: 0
}
})
// item，條目
Page({
data: {
a: 1,
b: 2
}
})
// {for: 1, bar: 2}
// 用...來將一個對象展開
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
// {a: 1, b: 2, c: 3, d: 4, e: 5}
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
// {foo: 'my-foo', bar:'my-bar'}
// 後邊的會覆蓋前面
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
},
a: 5
}
})
// {a: 5, b: 3, c: 6}
列表的渲染，通過wx:for，下標變量名為 index，數組當前項的變量名為 item。
{{index}}: {{item.message}}
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
wx:for-item
wx:for-index
{{indexcoding}}: {{itemcoding.message}}
// wx:if="{{condition}}" wx:else wx:elif
重點
wx:if 為 false，框架什麼也不做，只有為真的時候才開始局部渲染。
wx:if 有更高的切換消耗而， hidden 有更高的初始渲染消耗。
// 模板 template
Page({
data: {
item: {
msg: 'this is a template'
}
}
})
// 事件
bindtap="tapName"
Page({
tapName: function(event) {
console.log(event)
}
})
事件分類：（即區分父節點有事件也會被響應）
- 冒泡事件：會向父節點傳遞
- 非冒泡事件：不會向父節點傳遞
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
import和include
WXSS
wxss與css大部分相同，但wxss對css進行了修改和補充，wxss的特性有尺寸單位和樣式導入，在小程序中你會看到rpx這樣的尺寸單位，小程序開發初期是以iPhone 6標準的，固定750rpx為屏幕寬度。
尺寸單位，屏幕寬固定為750rpx，在iPhone6 上，屏幕寬度為375px，換算750rpx = 375px = 750物理像素。iPhone6中，1rpx = 0.5px。
樣式導入，使用@import語句，路徑為相對路徑；如：
/** index.wxss **/
.name {
padding:5px;
}
/** app.wxss **/
@import "index.wxss";
.age {
padding:15px;
}
選擇器
.class
#id
element
::after
::before
JS
在js中文件運用到API的調用，點擊傳送門
生命週期
不用馬上懂，別做項目別懂就行。
App()用來註冊一個小程序，接受一個object參數。
onLaunch 監聽小程序初始化
onShow 監聽小程序顯示
onHide 監聽小程序隱藏
getApp()用來獲取到小程序實例。
var app = getApp()
console.log(app.globalData)
頁面 Page
onLoad 監聽頁面加載
onShow 監聽頁面顯示
onReady 監聽頁面初次渲染完成
onHide 監聽頁面隱藏
onUnload 監聽頁面卸載
前臺、後臺定義：擊左上角關閉或者按了Home鍵離開，進入了後臺，只有當小程序進入後臺一定時間，或者系統資源佔用過高，才會被銷燬。
結語
- 本文主要講解 小程序基礎知識點講解-WXML + WXSS + JS，生命週期
下面我將繼續對小程序中的其他知識 深入講解 ，有興趣可以繼續關注 添加q群:810309655
閱讀更多 java高級面試 的文章
