小程序
項目結構與頁面結構
對應我們的項目：
對於小程序的全局配置文件 app.json、app.wxss（遵循css語法），參照官方文檔進行配置：全局配置、全局樣式。
對於 app.js 會調用 App 方法創建小程序的實例對象，並定義應用的生命週期事件：
圖中在 App 方法中還添加了一個對象，並在對象中編寫了一個 onLaunch 方法（程序啓動時執行），我們可以改成如下的形式同樣會執行：
總結如下：
邏輯層
邏輯層指的是：json 和 js文件。
json文件： 實現標籤欄
js文件：
小程序額外提供的成員
- App 方法：定義應用程序對象
- Page 方法：定義頁面對象
- getApp 方法：獲取全局應用程序對象（App）
- getCurrentPages 方法：獲取當前頁面的調用棧（數組）
- 調用棧：訪問頁面的記錄，最後的就是當前頁面
小程序額外提供的對象：
- wx 對象：提供核心 api，參考 api
此外小程序 js 還支持 commonJS 規範：
界面層
數據綁定：首先參考官方文檔.
簡單綁定
- 內容
<view class="container">
<text>{{messages}}</text>
<text>{{person.name}}</text>
</view>
Page({
data: {
message: 'Hello Moke!',
person: {
name: "MOKE",
sex: "male"
}
}
})
- 組件屬性
<view class="{{uiView}}"></view>
data: {
uiView: "hello"
}
.hello {
width: 100px;
height: 100px;
background: red
}
- 布爾類型：如果不用 mustache，屬性值默認識別爲字符串
<checkbox checked="{{false}}"> </checkbox>
- 此外還可以用於：邏輯判斷、算術/字符串運算、三元運算等等。
列表渲染
//定義一個數組
data: {
toDo: [
{ name: "JavaSE", finish: true },
{ name: "HTML", finish: false },
{ name: "Spring", finish: false },
]
}
<!--可以通過 wx:for-item 改掉默認的 item 標籤(wx:for-index)-->
<view wx:for="{{toDo}}">
<checkbox checked="{{item.finish}}"></checkbox>
<text>{{index}}</text><!-- 下標 -->
<text>{{item.name}}</text>
</view>
事件處理
<!-- 不同標籤有不同的 bindxxx 事件屬性 -->
<button bindtap="buttonShownum">顯示</button>
buttonShownum: function (e) {
console.log(123)
console.dir(e)//以樹狀形式打印對象
}
事件冒泡
<!-- 嵌套的 bindtao 會產生冒泡，內部需要使用 catchtap -->
<view bindtap="outterHandler" style="width:200px;height:200px;background-color:red">
<view catchtap="innerHandler" style="width:100px;height:100px;background-color:blue"></view>
</view>
outterHandler: function () {
console.log(1)
},
innerHandler: function () {
console.log(2)
}
事件傳參
<!-- data-xxx 來定義傳遞的參數（可以有多個），名稱帶 - 會自動使用駝峯命名法 -->
<button bindtap="buttonShownum" data-name="moke">顯示</button>
通過系統爲我們提供的 e 參數進行傳遞
buttonShownum: function (e) {
console.dir(e.target.dataset)
}
單向數據流
<!-- input 輸入修改後，messages 會改變 -->
<view class="container">
<input value="{{messages}}" bindinput="inputHandler"></input>
<text>{{messages}}</text>
</view>
inputHandler: function (e) {
console.dir(e.detail)
//區別於 this.messages = xxx，setData可以通知界面重新綁定數據
this.setData({
messages: e.detail.value
})
}
條件渲染
<view class="xxx1" wx:if="{{ 1 < 2}}">123</view>
<view class="xxx2" wx:if="{{ 1 < 2}}">456</view>
<!-- 也可以使用如下形式，block 可以作爲 控制屬性（wx:） 的載體，在渲染時沒有實際意義-->
<block wx:if="{{ 1 < 2}}">
<view class="xxx1">123</view>
<view class="xxx2">456</view>
</block>
區別於 hidden 屬性：hidden 只是隱藏代碼還在，而 wx:if 不成立時代碼不存在（未被渲染）。
WXSS與CSS的區別
樣式導入其實 css 也可以實現，這裏主要看下不同的尺寸單位：
- rpx（responsive pixel）: 可以根據屏幕寬度進行自適應
如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
UI組件
詳細可以看 官方文檔，這裏我們介紹一些使用較多的組件。
組件的效果可以在 WeUI，官方提供的預覽界面看到。
基礎內容組件
- icon： 圖標組件
- progress： 進度條組件
- rich-text： 富文本
- text： 文本
示例
<view class="container">
<!-- icon、progress、rich-text、text -->
<icon type="success"></icon>
<view class="test"><!-- 進度條不能在 class爲默認容器下顯示 -->
<progress percent="80" active />
</view>
<rich-text><h3>測試富文本</h3></rich-text>
<text>測試文本</text>
</view>
表單組件
- button： 按鈕
- checkbox： 複選框
- radio： 單選
- form： 表單
- input： 輸入框
操作反饋組件
例如底部彈起的操作按鈕組件，在 官方擴展組件中。
導航組件
- navigator： 頁面鏈接，用於實現頁面跳轉
- 頁面傳值：
頁面跳轉傳值：<naigator url="…/index2?id=1"></naigator>
頁面獲取值：
Page({
data: {}
onLoad: function(options){
//初始化頁面函數，options 就是頁面帶過來的參數
}
})- 也可以通過 wx.navigateTo 函數進行跳轉
佈局組件
view 是常用的視圖容器，可以使用CSS3中出現的伸縮佈局：
- 設置：display: flex;
- 橫向：flex-direction:row
- 縱向：flex-direction:column
swiper 可以實現選項卡或者輪播圖等。
API
小程序官方給我們提供了許多 API，只需在調用時查看即可，這裏看下常用的。
參考小程序開發文檔：API
發送請求： 參考
onLoad: function(options){
wx.request({
url: 'https://api.douban.com/v2/movie/in_theaters',
header: {
'Content-Type': 'json'
},
success: function (res){
console.log(res)
}
})
}