想了解一下微信小程序的開(kāi)發(fā)，所以打開(kāi)了 微信小程序官方指南 邊學(xué)邊進(jìn)行記錄。
簡(jiǎn)介
小程序主要還是用JavaScript進(jìn)行開(kāi)發(fā)，需要一定css和js的基礎(chǔ)，作為java后端開(kāi)發(fā)，這些忘得都差不多了，但這正是我學(xué)習(xí)微信小程序的目的。在傳統(tǒng)網(wǎng)頁(yè)開(kāi)發(fā)中，渲染線程和腳本線程是互斥的，如果長(zhǎng)時(shí)間運(yùn)行腳本可能導(dǎo)致頁(yè)面失去響應(yīng)，但是在小程序中，這倆是分開(kāi)的，分別在不同線程運(yùn)行。邏輯層在JSCore中，所以有些庫(kù)(JQuery、Zepto...)沒(méi)法用。小程序的開(kāi)發(fā)主要面對(duì)兩個(gè)操作環(huán)境：IOS和安卓。還有一個(gè)輔助的小程序開(kāi)發(fā)者工具。
準(zhǔn)備工作
先去申請(qǐng)個(gè)賬號(hào)：小程序注冊(cè)
信息填好之后，能看到appID。
下一步就是安裝一個(gè) 開(kāi)發(fā)工具：開(kāi)發(fā)者工具
把a(bǔ)ppID填進(jìn)去就成功配對(duì)了。
代碼構(gòu)成
QuickStart之后會(huì)發(fā)現(xiàn)初始化了一個(gè)頁(yè)面，旁邊是項(xiàng)目，項(xiàng)目主要有這四種類型：
- .json后綴，是配置文件。
- .wxml后綴，是模板文件
- .wxss后綴，樣式文件
- .js后綴，腳本文件
JSON文件
json主要是做靜態(tài)配置。
1.app.json 小程序配置
這里面最基礎(chǔ)有兩個(gè)部分，一個(gè)pages，一個(gè)window。
pages字段：用于描述當(dāng)前小程序所有頁(yè)面，為了讓微信客戶端知曉小程序定義在哪個(gè)目錄。
window字段：定義小程序所有頁(yè)面的頂部顏色，文字顏色定義。
然后下方欄可以通過(guò)tabBar設(shè)置名稱和圖標(biāo)。具體在官方文檔的框架部分有教學(xué)，真的是怕你學(xué)不會(huì)。
2.project.config.json 工具配置
這個(gè)主要是針對(duì)個(gè)性化的配置，在工具上做的任何配置都會(huì)寫到里面，重新安裝工具或者換電腦的時(shí)候，載入到同一個(gè)項(xiàng)目的代碼包，工具就會(huì)恢復(fù)到自定的個(gè)性化配置。
3.page.json
小程序頁(yè)面相關(guān)配置，這個(gè)主要是對(duì)應(yīng)全局，比如在app.json設(shè)置全局是藍(lán)色，但是我某個(gè)頁(yè)面主題要紅色，這樣就可以進(jìn)行調(diào)整。
WXML 模板
web編程是通過(guò)Html+Css+js進(jìn)行組合。html是描述頁(yè)面結(jié)構(gòu)，css定制頁(yè)面的形象，js是處理用戶交互。那么wxml對(duì)應(yīng)的就是html。點(diǎn)開(kāi)之后讓我想起了vue。。。與傳統(tǒng)html不同的是，這邊已經(jīng)給封裝好了，常用組件已經(jīng)被包裝起來(lái)了。
然后看到的wx:if和wx:else讓我想起了EL表達(dá)式額。主要思想還是MVVM的渲染和邏輯分離。不讓js直接操控dom，js負(fù)責(zé)狀態(tài)管理。狀態(tài)和界面結(jié)構(gòu)之間的關(guān)系，通過(guò)模板語(yǔ)法去解決就可以了。
我們可以通過(guò){{ }}語(yǔ)法，把在js定義的變量綁定到界面，這叫數(shù)據(jù)綁定，除了這種簡(jiǎn)單的，我們可能需要描述稍微復(fù)雜的邏輯，比如if/else和for，這里我們就wx:開(kāi)頭的屬性來(lái)表達(dá)。
WXML 樣式
這個(gè)就對(duì)應(yīng)了CSS。
JS 邏輯交互
官方例子是：比如在wxml里面
<view>{{ msg }}</view>
<button bindtap="clickMe">點(diǎn)擊我</button>
然后點(diǎn)擊button想要顯示"Hello"，那么只需要在js文件里面聲明clinkMe方法對(duì)應(yīng)就可以。
Page({
clickMe: function() {
this.setData({ msg: "Hello World" })
}
})
這就完成了，但是這是對(duì)基礎(chǔ)的，想要實(shí)現(xiàn)中高級(jí)的功能要自己慢慢試。。。QuickStart 例子中，在 pages/index/index.js 就調(diào)用了 wx.getUserInfo 獲取微信用戶的頭像和昵稱，最后通過(guò) setData 把獲取到的信息顯示到界面上。
