微信小程序，簡(jiǎn)稱(chēng)Mini ，英文名稱(chēng)為Mini。 如今，幾乎每部智能手機(jī)都安裝了微信應(yīng)用程序，用戶遍布全球。 微信小程序?qū)崿F(xiàn)微信內(nèi)部無(wú)需下載安裝，用戶掃一掃或搜索即可打開(kāi)應(yīng)用。

WEB前端系列課程-微信小程序?qū)崙?zhàn)教程講解_WEB前端食療工作坊實(shí)戰(zhàn)項(xiàng)目講解_WEB前端小程序開(kāi)發(fā)必備知識(shí)點(diǎn)_WEB前端小程序開(kāi)發(fā)實(shí)戰(zhàn)教程_嗶哩嗶哩

1 界面與操作

微信小程序開(kāi)發(fā)工具的功能非常強(qiáng)大和方便。 該工具集代碼編輯、開(kāi)發(fā)調(diào)試、程序發(fā)布等功能于一體。

2 編輯功能

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

但需要注意的是，編輯狀態(tài)下的代碼只是保存在工具內(nèi)部，并沒(méi)有寫(xiě)入硬盤(pán)。

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

3 調(diào)試功能

調(diào)試工具分為七個(gè)功能模塊：,,,,, Wxml 和,

4 項(xiàng)目功能

編輯器項(xiàng)目選項(xiàng)卡主要用于顯示和設(shè)置項(xiàng)目信息，包括圖標(biāo)、AppID、本地開(kāi)發(fā)目錄、最新更新時(shí)間、最新上傳時(shí)間、代碼包大小。 ·

預(yù)覽：將源碼上傳至微信服務(wù)器并成功生成二維碼后，開(kāi)發(fā)者用最新版微信掃描二維碼即可在手機(jī)端體驗(yàn)最新效果。

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

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

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

全局配置

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

這些配置可以決定頁(yè)面文件的路徑、窗口性能、設(shè)置網(wǎng)絡(luò)超時(shí)、設(shè)置多個(gè)標(biāo)簽頁(yè)等。

頁(yè)面配置項(xiàng)

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

每一項(xiàng)代表對(duì)應(yīng)頁(yè)面的【路徑+文件名】信息。

配置項(xiàng)

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

配置項(xiàng)

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

配置項(xiàng)

對(duì)象值，用于設(shè)置各種網(wǎng)絡(luò)請(qǐng)求對(duì)象的超時(shí)時(shí)間。 超時(shí)單位為毫秒，默認(rèn)為60000。

調(diào)試配置項(xiàng)

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

頁(yè)面配置

除了全局配置app.json，微信小程序還可以單獨(dú)配置每個(gè)頁(yè)面的.json。 每個(gè)頁(yè)面的配置比app.json的全局配置要簡(jiǎn)單的多。 它只是設(shè)置app.json中配置項(xiàng)的內(nèi)容，頁(yè)面中的配置項(xiàng)會(huì)覆蓋app.json中相同的配置項(xiàng)。 頁(yè)面的.json只能設(shè)置相關(guān)的配置項(xiàng)來(lái)決定這個(gè)頁(yè)面的窗口性能，所以不需要寫(xiě)這個(gè)key。

頁(yè)面生命周期

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

頁(yè)面數(shù)據(jù)處理

頁(yè)面的數(shù)據(jù)處理分為兩個(gè)方面，第一是對(duì)數(shù)據(jù)進(jìn)行初始化，第二是對(duì)數(shù)據(jù)進(jìn)行操作。

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

初始化數(shù)據(jù)將用作頁(yè)面的第一次呈現(xiàn)。 數(shù)據(jù)會(huì)以JSON的形式從邏輯層傳遞到視圖層（即從.js文件傳遞到.wxml文件，視圖層可以通過(guò)WXML綁定數(shù)據(jù)），所以數(shù)據(jù)必須是轉(zhuǎn)換成 JSON 格式的字符串、數(shù)字、布爾值、對(duì)象、數(shù)組。

一堆書(shū)頁(yè)

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

注意：

· 不要試圖修改頁(yè)面堆棧，這會(huì)導(dǎo)致路由和頁(yè)面狀態(tài)錯(cuò)誤。

頁(yè)面路由

在微信小程序中，所有頁(yè)面的路由都是由框架管理的。

簡(jiǎn)單的封裝和調(diào)用

文件范圍

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

不會(huì)互相影響。

全局應(yīng)用實(shí)例可以通過(guò)全局函數(shù)()獲取，如果需要全局?jǐn)?shù)據(jù)，

然后就可以在App()中設(shè)置了。

模塊化的

在日常的編程過(guò)程中，通常會(huì)提取一些可重用的代碼，放到一個(gè)公共文件中。 在微信小程序中，可以將一些常用的代碼提取到一個(gè)單獨(dú)的JS文件中，作為一個(gè)模塊。 模塊只能通過(guò).or暴露接口。

布局

微信小程序按模型布局排列組件。 相比普通的布局方式，更容易實(shí)現(xiàn)寬高適配屏幕的布局，使用起來(lái)也更靈活，非常適合微信小程序的布局需求。

1 基本要素

布局的主要思想是通過(guò)設(shè)置容器（flex即柔性容器）和子元素的規(guī)則，使所有視圖組件合理自動(dòng)分配在主軸（main axis）和交叉軸（cross axis）上（flex item就是靈活的項(xiàng)目）

2 容器屬性

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

3個(gè)子元素屬性

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

4個(gè)屬性

屬性用于指定元素在文檔中的位置

5 邊框、間隙和填充

邊界很好理解。 gap是指組件之間的距離，是指組件內(nèi)容到其邊框的距離。

組件開(kāi)發(fā)與應(yīng)用

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

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

:1 查看容器組件

微信小程序擁有豐富的界面組件，借助這些組件，開(kāi)發(fā)者可以輕松構(gòu)建界面。

2 基本內(nèi)容組件

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

3 表單組件

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

4 多媒體組件

多媒體組件可以在頁(yè)面中加載圖片、音頻、視頻，并可以控制顯示方式和過(guò)程，使頁(yè)面更加多樣化和美觀。

5 地圖組件

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

6 導(dǎo)航組件

導(dǎo)航組件，是微信小程序中用來(lái)控制所有頁(yè)面順序的組件。 可以幫助我們實(shí)現(xiàn)頁(yè)面的路由和跳轉(zhuǎn)，使用起來(lái)還是比較方便的。

7 畫(huà)布組件

組件，可以用來(lái)實(shí)現(xiàn)一些小程序控件沒(méi)有提供的頁(yè)面元素，

開(kāi)發(fā)者可以自由使用畫(huà)布繪制出想要的頁(yè)面效果。