小程序是什么史辙？
- 官方稱為"小程序"汹买，可理解為鑲嵌在微信的App
- 與訂閱號(hào)、服務(wù)號(hào)和企業(yè)號(hào)屬于同級(jí)體系聊倔。由此晦毙，小程序、訂閱號(hào)耙蔑、服務(wù)號(hào)见妒、企業(yè)號(hào)形成了并行的微信生態(tài)四大體系。
小程序優(yōu)勢(shì)
- 性能比WebApp好
- 無(wú)需安裝甸陌，不占內(nèi)存须揣，在微信內(nèi)即搜即用，使用成本相對(duì)于安裝App來(lái)說(shuō)降低了很多
- 學(xué)習(xí)開發(fā)門檻低钱豁，前端技術(shù)+熱更新
- 調(diào)用微信推送耻卡，地圖or定位，掃碼牲尺，支付等多種服務(wù)
應(yīng)用場(chǎng)景
橫軸=需求剛性卵酪，縱軸=需求頻次幌蚊，象限=需求類別
- 象限1：高頻、剛需溃卡，小程序不適用于高頻溢豆、剛需的需求場(chǎng)景，該場(chǎng)景下應(yīng)采用原生App
- 象限2：高頻瘸羡、非剛需漩仙，游戲，視頻等要求很高的交互犹赖、視覺體驗(yàn)和沉浸感讯赏，建議采用原生App；日常工具類產(chǎn)品冷尉，
在功能和性能滿足的前提下漱挎，基于開發(fā)成本和使用成本，建議采用小程序 - 象限3：低頻雀哨、非剛需磕谅，屬于小眾專業(yè)度很強(qiáng)的需求，不建議使用
- 象限4：低頻雾棺、剛需膊夹，小程序非常適用于低頻、剛需的長(zhǎng)尾生活服務(wù)需求
代碼構(gòu)成
- .json 后綴的 JSON 配置文件
- .wxml 后綴的 WXML 模板文件
- .wxss 后綴的 WXSS 樣式文件
- .js 后綴的 JS 腳本邏輯文件
小程序的啟動(dòng)
微信客戶端在打開小程序之前捌浩，會(huì)把整個(gè)小程序的代碼包下載到本地放刨。
緊接著通過(guò)配置 app.json 的 pages 字段就可以知道你當(dāng)前小程序的所有頁(yè)面路徑，寫在 pages 字段的第一個(gè)頁(yè)面就是這個(gè)小程序的首頁(yè)（打開小程序看到的第一個(gè)頁(yè)面）尸饺。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
小程序啟動(dòng)之后进统，在 app.js 定義的 App 實(shí)例的 onLaunch 回調(diào)會(huì)被執(zhí)行
App({
onLaunch: function () {
// 小程序啟動(dòng)之后 觸發(fā)
}
})
新建頁(yè)面
Page 是一個(gè)頁(yè)面構(gòu)造器，這個(gè)構(gòu)造器就生成了一個(gè)頁(yè)面浪听。在生成頁(yè)面的時(shí)候螟碎，小程序框架會(huì)把 data 數(shù)據(jù)和 .wxml 一起渲染出最終的結(jié)構(gòu)，于是就得到了你看到的小程序的樣子迹栓。
在渲染完界面之后掉分，頁(yè)面實(shí)例就會(huì)收到一個(gè) onLoad 的回調(diào)，你可以在這個(gè)回調(diào)處理你的邏輯克伊。
Page({
data: { // 參與頁(yè)面渲染的數(shù)據(jù)
logs: []
},
onLoad: function () {
// 頁(yè)面渲染后 執(zhí)行
}
})
生命周期
image
數(shù)據(jù)綁定
通過(guò)setData傳遞數(shù)據(jù)來(lái)刷新綁定的視圖酥郭，不支持雙向綁定
//.js
Page({
data: {
imgSrc: "http://www.google.cn/xxx.jpg",
}
})
//.wxml
<image src="{{imgSrc}}"></image>
列表渲染
//.js
Page({
data:{
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
//.wxml
<text wx:for="{{items}}" wx:for-index="itemIndex" wx:for-item="itemValue" >{{itemValue.message}}</text>
顯示與隱藏元素
使用wx-if和hidden控制元素的顯示和隱藏
<text wx-if="{{items.length > 0}}">大標(biāo)題</text>
事件處理
- 小程序中，全用bindtap(bind+event)愿吹，或者catchtap(catch+event)綁定事件
- 控件可添加data-"自定義參數(shù)"不从，通過(guò)function中"事件參數(shù)".currentTarget.dataset."自定義參數(shù)"獲取到值
//.wxml
<button bindtap="noWork" data-tag1="buttonA">明天不上班</button>
//.js
Page({
data: {
},
noWork:function (e) {
console.log(e.currentTarget.dataset.tag1);
}
})
