金于虎：微信小程序認(rèn)知、安裝與demo學(xué)習(xí)摘要
1. 技術(shù)架構(gòu)
2.前端的視圖
wxss
樣式定義類(lèi)似css的樣式表，定義頁(yè)面元素的樣式
wxml
標(biāo)簽語(yǔ)言對(duì)html的擴(kuò)展，定義我這里面會(huì)有那些組件，會(huì)有那些元素里面。更多的是做渲染
js 觸發(fā)事件
定義觸發(fā)后又后端的那些程序來(lái)處理
3.后端的server
很多接口以jsapi的方式提供
官網(wǎng)地址
二：組件和數(shù)據(jù)綁定
- 組件的基本使用
- 數(shù)據(jù)綁定
- 條件渲染
- 列表渲染 http://www.runoob.com/cssref/pr-border-collapse.html
三：下載安裝
1.下載和安裝開(kāi)發(fā)程序
下載地址：開(kāi)發(fā)者文檔
- 掃描登陸
- 添加項(xiàng)目 （條件：微信號(hào)是需要是微信開(kāi)發(fā)者）
- 無(wú)Appid（條件：需要Nodejs支持）
注意點(diǎn)：
- 在SDK中有些api是依賴nodejs的
- 部分功能受限 指的是無(wú)法再手機(jī)上看或者預(yù)覽
2. 熟悉開(kāi)發(fā)工具的使用
3. 熟悉目錄架構(gòu)
四：demo學(xué)習(xí)
1. 項(xiàng)目核心文件
app.js
app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽(tīng)并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，
app.json
app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
app.wxss
app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。
- 事件
- 全局函數(shù)
- 全局屬性
2. 頁(yè)面核心文件
頁(yè)面目錄和配置以及小程序首頁(yè)
微信小程序中的每一個(gè)頁(yè)面的【路徑+頁(yè)面名】都需要寫(xiě)在 app.json 的 pages 中，且 pages 中的第一個(gè)頁(yè)面是小程序的首頁(yè)。
頁(yè)面組成
每一個(gè)小程序頁(yè)面是由同路徑下同名的四個(gè)不同后綴文件的組成，如：
- index.js
- index.wxml
- index.wxss
- index.json
.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁(yè)面結(jié)構(gòu)文件。 注意：目錄名稱(chēng)和文件名稱(chēng)最好一樣
index.js
index.js 是頁(yè)面的腳本文件，在這個(gè)文件中我們可以監(jiān)聽(tīng)并處理頁(yè)面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁(yè)面交互事件等。
index.wxss
index.wxss 是頁(yè)面的樣式表，
樣式的覆蓋，繼承和和重寫(xiě)
頁(yè)面的樣式表是非必要的。當(dāng)有頁(yè)面樣式表時(shí)，頁(yè)面的樣式表中的樣式規(guī)則會(huì)層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁(yè)面的樣式表，也可以在頁(yè)面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。
index.json
index.json 是頁(yè)面的配置文件：
配置的覆蓋，繼承和重寫(xiě)
頁(yè)面的配置文件是非必要的。當(dāng)有頁(yè)面的配置文件時(shí)，配置項(xiàng)在該頁(yè)面會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。如果沒(méi)有指定的頁(yè)面配置文件，則在該頁(yè)面直接使用 app.json 中的默認(rèn)配置。
demo片段
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(
