微信小程序，簡稱小程序，其英文名為Mini Program。如今，幾乎每臺(tái)智能手機(jī)上都會(huì)安裝微信應(yīng)用程序，微信的用戶也遍布全球。而微信小程序?qū)崿F(xiàn)了在微信內(nèi)部不需要下載安裝，用戶掃一掃或搜索一下即可打開應(yīng)用程序。

1 界面與操作

微信小程序開發(fā)工具的功能非常強(qiáng)大和便捷，其工具內(nèi)部集成了代碼編輯、開發(fā)調(diào)試及程序發(fā)布等功能，

2 編輯功能

編輯區(qū)分為兩個(gè)部分，在右側(cè)的編輯區(qū)域可以對當(dāng)前項(xiàng)目進(jìn)行編寫、文件添加和刪除以及重命名等基本操作。在左側(cè)的模擬器區(qū)域可以實(shí)時(shí)預(yù)覽編輯的情況。編輯器同時(shí)也提供了比較完善的自動(dòng)補(bǔ)全和自動(dòng)保存功能，編寫代碼后，工具會(huì)自動(dòng)幫助用戶保存當(dāng)前代碼為編輯狀態(tài)，如果直接關(guān)閉工具或者切換項(xiàng)目，也不會(huì)丟失當(dāng)前代碼的編輯狀態(tài)。

但是要注意，處于編輯狀態(tài)的代碼只保存到工具內(nèi)部，并沒有寫到硬盤上，

只有手動(dòng)保存文件后，修改的內(nèi)容才會(huì)寫到硬盤上，并觸發(fā)實(shí)時(shí)預(yù)覽。

3 調(diào)試功能

調(diào)試工具分為七大功能模塊：Console、Sources、Network、Storage、AppData、Wxml和Sensor，

4 項(xiàng)目功能

編輯器項(xiàng)目選項(xiàng)卡主要用于顯示和設(shè)置項(xiàng)目的信息，其中顯示的信息包括圖標(biāo)、AppID、本地開發(fā)目錄、最新更新時(shí)間、最近上傳時(shí)間以及代碼包大小?！?/p>

預(yù)覽：指上傳源碼到微信服務(wù)器并成功后會(huì)生成一個(gè)二維碼，開發(fā)者用最新版本的微信掃描二維碼后，即可在手機(jī)上體驗(yàn)到最新的效果。

5 項(xiàng)目的目錄與文件結(jié)構(gòu)

在創(chuàng)建小程序項(xiàng)目時(shí)，小程序開發(fā)工具會(huì)默認(rèn)生成一些文件，這些文件就是小程序的基本結(jié)構(gòu)。除此之外，在開發(fā)過程中，可以根據(jù)產(chǎn)品需求自定義小程序的目錄和文件。

微信小程序開發(fā)基礎(chǔ)

全局配置

微信小程序的全局配置都要在app.json文件中進(jìn)行。

這些配置可以決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、設(shè)置多tab等。

pages配置項(xiàng)

pages接受一個(gè)數(shù)組值，每一項(xiàng)都是字符串，用來指定小程序由哪些頁面組成。

每一項(xiàng)代表對應(yīng)頁面的[路徑+文件名]信息。

window配置項(xiàng)

window接受對象值，用來設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、窗口頁面等對象的基本樣式屬性。

tabBar配置項(xiàng)

tabBar接受一個(gè)數(shù)組值，用來設(shè)置tab底部標(biāo)簽欄的樣式表現(xiàn)，以及tab切換時(shí)顯示的對應(yīng)頁面。

networkTimeout配置項(xiàng)

networkTimeout接受對象值，用來設(shè)置各種網(wǎng)絡(luò)請求對象超時(shí)時(shí)間。超時(shí)時(shí)間單位為毫秒，默認(rèn)為60000。

debug配置項(xiàng)

debug接收一個(gè)Boolean值，用于設(shè)置開啟開發(fā)者工具的調(diào)試模式。默認(rèn)是false，開啟后，在開發(fā)者工具的控制臺(tái)面板中，調(diào)試信息以info的形式給出，其信息有Page的注冊、頁面路由、數(shù)據(jù)更新、事件觸發(fā)。這樣可以幫助開發(fā)者快速定位一些常見的問題，但是，在正式發(fā)布時(shí)，應(yīng)當(dāng)關(guān)閉此配置項(xiàng)。

頁面配置

微信小程序除了app.json全局配置，還可以對每一個(gè)頁面的.json進(jìn)行單獨(dú)配置。每個(gè)頁面的配置比app.json全局配置簡單得多，只是設(shè)置app.json中的window配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋app.json的window中相同的配置項(xiàng)。頁面的.json只能設(shè)置window相關(guān)的配置項(xiàng)，以決定本頁面的窗口表現(xiàn)，所以無須寫window這個(gè)鍵。

頁面的生命周期

每個(gè)微信小程序應(yīng)用都有自己的生命周期，而微信小程序應(yīng)用的每個(gè)頁面也有自己的生命周期，

頁面的數(shù)據(jù)處理

頁面的數(shù)據(jù)處理分兩個(gè)方面，首先是初始化數(shù)據(jù)，其次是對數(shù)據(jù)進(jìn)行操作。

數(shù)據(jù)的初始化

初始化數(shù)據(jù)將作為頁面的第一次渲染。data會(huì)以JSON的形式由邏輯層傳至視圖層（也就是從.js文件傳入到.wxml文件中，視圖層可以通過WXML對數(shù)據(jù)進(jìn)行綁定），所以其數(shù)據(jù)必須是可以轉(zhuǎn)成JSON的格式的字符串、數(shù)字、布爾值、對象、數(shù)組。

頁面的棧

微信小程序提供的框架是以棧的形式維護(hù)所有頁面。

注意：

· 不要嘗試修改頁面棧，會(huì)導(dǎo)致路由以及頁面狀態(tài)錯(cuò)誤。

頁面的路由

在微信小程序中，所有頁面的路由全部由框架進(jìn)行管理。

簡單封裝與調(diào)用

文件作用域

在.js文件中聲明的變量和函數(shù)只在該文件中有效；在不同的文件中可以聲明相同名字的變量和函數(shù)，

不會(huì)互相影響。

通過全局函數(shù)getApp（）可以獲取全局的應(yīng)用實(shí)例，如果需要全局的數(shù)據(jù)，

則可以在App（）中設(shè)置。

模塊化

在日常編程過程中，一般都會(huì)把一些可以復(fù)用的代碼提煉出來，放到一個(gè)公共文件中。在微信小程序中，可以將一些公共的代碼抽離成為一個(gè)單獨(dú)的JS文件，作為一個(gè)模塊。模塊只有通過module.exports或者exports才能對外暴露接口。

Flexbox布局

微信小程序通過Flexbox模型布局對組件進(jìn)行排列。相比普通的布局方式，F(xiàn)lexbox更容易實(shí)現(xiàn)寬高適合屏幕的布局，使用起來更靈活，非常適合于微信小程序的布局要求。

1 基本要素

Flexbox布局的主要思想為通過設(shè)定容器（flex container即伸縮容器）與子元素（flex item即伸縮項(xiàng)目）的規(guī)則，使所有view組件在主軸（main axis）與側(cè)軸（cross axis）上合理地自動(dòng)分配

2 容器屬性

容器屬性指的是包裹子元素的容器（flex container）屬性

3 子元素屬性

子元素屬性定義了伸縮項(xiàng)目的屬性，

4 position屬性

position屬性用于指定一個(gè)元素在文檔中的定位方式

5 邊框、空隙與填充

邊框很好理解，空隙指的是組件之間的距離，而填充指的是組件的內(nèi)容到其邊框的距離，

組件的開發(fā)應(yīng)用

組件是視圖層的基本元素，是構(gòu)建頁面的基礎(chǔ)。

每個(gè)組件都有自定義的屬性，可以對功能樣式進(jìn)行修改，但只支持以下七種數(shù)據(jù)類型

：1 視圖容器組件

微信小程序具有豐富的用戶界面組件，借助這些組件，開發(fā)者可以很方便地搭建用戶界面。

2 基礎(chǔ)內(nèi)容組件

基礎(chǔ)內(nèi)容組件用于在界面中展示圖標(biāo)、文字、滾動(dòng)條信息等。

3 表單組件

表單組件用于構(gòu)建與用戶交互的表單。

4 多媒體組件

多媒體組件可以在頁面中加載圖片、音頻、視頻，并且能夠控制顯示方式和進(jìn)程，使頁面更加多元化，更具吸引力。

5 地圖組件

地圖組件，微信小程序提供了地圖導(dǎo)航功能，使用地圖組件和地圖位置API就可以方便、快捷地實(shí)現(xiàn)地圖定位導(dǎo)航。

6 導(dǎo)航組件

導(dǎo)航組件，它是微信小程序中用來控制所有頁面順序的組件?？梢詭椭覀儗?shí)現(xiàn)頁面的路由和跳轉(zhuǎn)，使用起來相當(dāng)便捷。

7 畫布組件

畫布組件，它可用于實(shí)現(xiàn)一些小程序控件沒有提供的頁面元素，

開發(fā)者可以自由地使用畫布畫出想要的頁面效果。