小程式基礎
小程式官方位址，小程式開發者工具，點選此處下載下傳。在微信小程式中有一個配置檔案
project.config.json
，此檔案可以讓開發者在不同裝置中進行開發。
微信小程式共支援5種檔案，
wxml
，
wxss
js
json
wxs
以及
圖檔檔案
等。每一頁面都具有
wxml
wxss
js
json
檔案，但比不是必須的，小程式和網頁類似，一種以
html+css+js
，而小程式則是
wxml+wxss+js
，如
wxml
用來描述頁面結構，
wxss
用例描述頁面的樣式，
js
用來添加邏輯資訊的。
wxml
wxml
用來建構頁面的結構
//資料綁定
<!--wxml-->
<view> {{message}} </view> // page.js
Page({
data: {
message: 'Hello world!'
}
}) 學會用資料綁定，
wxml
中的動态資料都可來自對應的
Page
的
data
中的資料，如何綁定是很簡單易懂的。如
// 使用{{ ... }}
<view> {{ message }} </view>
<view id="item-{{id}}"> </view>
// 對應中的Page的data資料
Page({
data: {
id: 0
}
})
<view wx:if="{{condition}}"> </view>
Page({
data: {
condition: true
}
}) 重點
true：代表真值。
false：代表假值。
// 不可少的 {{ ... }}
<checkbox checked="{{ture}}"> </checkbox>
<view hidden="{{flag ? true : false}}"> Hidden </view> // 必備掌握
<view>{{object.key}} {{array[0]}}{{array[1]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['hh','da']
}
}) // 數組
<view wx:for="{{[zero, 1, 2, 3]}}"> {{item}} </view>
Page({
data: {
zero: 0
}
})
// item，條目 <template is="object" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})
// {for: 1, bar: 2} // 用...來将一個對象展開
<template is="object" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
c: 3,
d: 4
}
}
})
// {a: 1, b: 2, c: 3, d: 4, e: 5} <template is="object" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})
// {foo: 'my-foo', bar:'my-bar'} // 後邊的會覆寫前面
<template is="object" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2
},
obj2: {
b: 3,
c: 4
},
a: 5
}
})
// {a: 5, b: 3, c: 6} 清單的渲染，通過wx:for，下标變量名為 index，數組目前項的變量名為 item。
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
}) wx:for-item
wx:for-index <view wx:for="{{array}}" wx:for-index="indexcoding" wx:for-item="itemcoding">
{{indexcoding}}: {{itemcoding.message}}
</view> // wx:if="{{condition}}" wx:else wx:elif
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view> wx:if 為 false，架構什麼也不做，隻有為真的時候才開始局部渲染。
wx:if 有更高的切換消耗而， hidden 有更高的初始渲染消耗。
// 模闆 template
<template is=" ... " data="{{...item}}"/>
Page({
data: {
item: {
msg: 'this is a template'
}
}
}) // 事件
bindtap="tapName"
Page({
tapName: function(event) {
console.log(event)
}
}) 事件分類：（即區分父節點有事件也會被響應）
- 冒泡事件：會向父節點傳遞
- 非冒泡事件：不會向父節點傳遞
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
}) import和include
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/> <!-- 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
與
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，生命周期