什么是微信小程序

按照微信之父張小龍的定義，小程序是一種不需要下載安裝即可使用的應(yīng)用。小程序?qū)崿F(xiàn)了應(yīng)用“觸手可及”的夢想，用戶掃一掃或搜一下即可打開應(yīng)用。同時，體現(xiàn)了“用完即走”的理念，用戶不用關(guān)心是否安裝太多應(yīng)用的問題。應(yīng)用將無處不在，隨時可用，但又無須安裝卸載。

微信團(tuán)隊原計劃稱之為微信應(yīng)用(App)號，不過由于Apple App Store的審核規(guī)則不允許包含應(yīng)用分發(fā)、應(yīng)用推薦，因此微信團(tuán)隊將之稱為“小程序”。

小程序的開發(fā)框架

小程序開發(fā)框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生App體驗的服務(wù)。

小程序底層實(shí)現(xiàn)

小程序的底層實(shí)現(xiàn)可以用一句話進(jìn)行概括：統(tǒng)一接口，不同實(shí)現(xiàn)。小程序到微信采用統(tǒng)一的接口，開發(fā)者只需考慮框架的語法和規(guī)則，不用關(guān)心底層如何實(shí)現(xiàn)。

小程序 VS HTML 5

1.開發(fā)語言不同

我們知道，小程序開發(fā)框架中腳本部分采用JavaScript語言進(jìn)行開發(fā)。不過與HTML 5不同的是，框架提供自己的視圖層描述語言WXML和WXSS，然后對這些文件進(jìn)行編譯，打包為類似于原生應(yīng)用的形式進(jìn)行分發(fā)。小程序的WXML標(biāo)簽語言和WXSS樣式語言并非標(biāo)準(zhǔn)的HTML 5和CSS 3。

2.組件封裝不同
小程序獨(dú)立出來很多原生App的組件。在HTML5需要模擬才能實(shí)現(xiàn)的功能，在小程序里可以直接調(diào)用組件，如預(yù)覽圖片、錄音等功能。

3.執(zhí)行效率不同

HTML 5在加載時受限于網(wǎng)絡(luò)環(huán)境，需要順序加載HTML、CSS、JS，然后返回數(shù)據(jù)，最后渲染頁面，并顯示在瀏覽器中。用戶經(jīng)常需要等待很長時間，體驗會受影響。

相比之下，小程序的兩個線程——Appservice Thread和View Thread會同時進(jìn)行、并行加載，甚至Appservice Thread會更早執(zhí)行。當(dāng)視圖線程加載完通知Appservice時，Appservice會把準(zhǔn)備好的數(shù)據(jù)用setData的方法返回給視圖線程。

小程序的這種優(yōu)化策略可以減少用戶的等待時間，加快小程序的響應(yīng)速度。

小程序結(jié)構(gòu)概覽

小程序由以下5個部分組成。

App：指小程序整個項目。

window：用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。

頁面：一個App包含若干頁面。微信規(guī)定，同時打開的頁面最多不超過5個。

組件：框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進(jìn)行快速開發(fā)。這些組件是構(gòu)成頁面的基本元素。

路由：不同頁面之間的跳轉(zhuǎn)稱為路由。

小程序的生命周期

生命周期分為3個階段：

第一階段是App啟動階段，主要加載小程序window配置，注冊程序和頁面；
第二階段是Page啟動階段，主要完成頁面資源加載、頁面渲染、頁面掛載；
第三階段是銷毀階段，主要完成頁面隱藏、卸載和銷毀。

小程序的項目架構(gòu)

pages文件夾用于放置頁面文件。

app.js是App的啟動腳本，可以處理一些App啟動過程中頁面加載之前要處理的事情。

app.json是App的配置文件，配置項包括window、頁面、tab菜單欄等。

app.wxss是App的公共樣式，類似于css。

一個App可包含多個頁面，頁面的相對訪問路徑被配置在app.json里，每個頁面可以包含[頁面名].js、[頁面名].wxml、[頁面名].wxxs以及配置文件[頁面名].json。其中，WXSS和json文件不是必要的。如果這兩個文件存在，就會覆蓋app.json和app.wxss的相同配置項。

一個框架程序主體部分由3個文件組成，必須放在項目的根目錄：

一個框架頁面由4個文件組成：

小程序配置

小程序有兩種配置：
(1)全局配置文件，用于小程序的全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時時間、設(shè)置多tab等。
(2)頁面配置文件，用于配置各個頁面，將覆蓋app.json的window配置項內(nèi)容。

全局配置

全局配置列表：

1.Pages

Pages設(shè)置程序中所有頁面，第一個頁面為初始頁面。
Pages每一項的命名為路徑+文件名，一般為pages/dictionary/file。不需要加文件后綴。

2.window

window設(shè)置程序中默認(rèn)頁面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等

注意，如果頁面需要啟動下拉刷新，務(wù)必將enablePullDownRefresh設(shè)置為true。可以用onPullDownRefresh監(jiān)聽用戶下拉刷新事件。

3.tarBar

tabBar可以配置多個tab頁面，配置項包括指定tab欄的表現(xiàn)和tab切換時顯示的對應(yīng)頁面。
tabBar的位置可以在頂部(top)或底部(bottom)

屬性表：

list屬性表

4.networkTimeout

設(shè)置各種網(wǎng)絡(luò)請求的超時時間

5.debug

可以在開發(fā)者工具中開啟debug模式，在開發(fā)者工具的控制臺面板調(diào)試信息以info的形式給出，信息有Page的注冊、頁面路由、數(shù)據(jù)更新、事件觸發(fā)等，可以幫助開發(fā)者快速定位一些常見問題。

頁面配置

每一個小程序頁面都可以使用.json文件對本頁面的窗口表現(xiàn)進(jìn)行配置，頁面的配置只能設(shè)置app.json中的window配置項的內(nèi)容，頁面中的配置項會覆蓋app.json的window中相同的配置項。頁面的.json只能設(shè)置window相關(guān)的配置項，以決定本頁面的窗口表現(xiàn)，所以無須寫window鍵。

小結(jié)

本次主要介紹了小程序框架的底層實(shí)現(xiàn)、配置和邏輯層，講解了小程序的項目目錄架構(gòu)、配置文件、生命周期、全局設(shè)置、頁面設(shè)置等知識點(diǎn)。

---

參考資料：《微信小程序開發(fā)詳解》

總結(jié)

以上是生活随笔為你收集整理的【微信小程序】初识小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。