WEB前端系列課程-微信小程序實戰教程講解_WEB前端食療坊實戰項目講解_WEB小程序開發前端必備知識點_WEB前端小程序開發實戰課程_哔哩哔哩_bilibili

微信小程序開發工具的功能非常強大和便捷，其工具内部集成了代碼編輯、開發調試及程序發布等功能，

編輯區分為兩個部分，在右側的編輯區域可以對當前項目進行編寫、文件添加和删除以及重命名等基本操作。在左側的模拟器區域可以實時預覽編輯的情況。編輯器同時也提供了比較完善的自動補全和自動保存功能，編寫代碼後，工具會自動幫助用戶保存當前代碼為編輯狀态，如果直接關閉工具或者切換項目，也不會丢失當前代碼的編輯狀态。

但是要注意，處于編輯狀态的代碼隻保存到工具内部，并沒有寫到硬盤上，

隻有手動保存文件後，修改的内容才會寫到硬盤上，并觸發實時預覽。

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

編輯器項目選項卡主要用于顯示和設置項目的信息，其中顯示的信息包括圖标、AppID、本地開發目錄、最新更新時間、最近上傳時間以及代碼包大小。·

預覽：指上傳源碼到微信服務器并成功後會生成一個二維碼，開發者用最新版本的微信掃描二維碼後，即可在手機上體驗到最新的效果。

在創建小程序項目時，小程序開發工具會默認生成一些文件，這些文件就是小程序的基本結構。除此之外，在開發過程中，可以根據産品需求自定義小程序的目錄和文件。

全局配置

微信小程序的全局配置都要在app.JSON文件中進行。

這些配置可以決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多tab等。

pages配置項

pages接受一個數組值，每一項都是字符串，用來指定小程序由哪些頁面組成。

每一項代表對應頁面的[路徑 文件名]信息。

window配置項

window接受對象值，用來設置小程序的狀态欄、導航條、窗口頁面等對象的基本樣式屬性。

tabBar配置項

tabBar接受一個數組值，用來設置tab底部标簽欄的樣式表現，以及tab切換時顯示的對應頁面。

networkTimeout配置項

networkTimeout接受對象值，用來設置各種網絡請求對象超時時間。超時時間單位為毫秒，默認為60000。

debug配置項

debug接收一個Boolean值，用于設置開啟開發者工具的調試模式。默認是false，開啟後，在開發者工具的控制台面闆中，調試信息以info的形式給出，其信息有Page的注冊、頁面路由、數據更新、事件觸發。這樣可以幫助開發者快速定位一些常見的問題，但是，在正式發布時，應當關閉此配置項。

微信小程序除了app.json全局配置，還可以對每一個頁面的.json進行單獨配置。每個頁面的配置比app.json全局配置簡單得多，隻是設置app.json中的window配置項的内容，頁面中配置項會覆蓋app.json的window中相同的配置項。頁面的.json隻能設置window相關的配置項，以決定本頁面的窗口表現，所以無須寫window這個鍵。

每個微信小程序應用都有自己的生命周期，而微信小程序應用的每個頁面也有自己的生命周期，

頁面的數據處理

頁面的數據處理分兩個方面，首先是初始化數據，其次是對數據進行操作。

數據的初始化

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

頁面的棧

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

注意：

· 不要嘗試修改頁面棧，會導緻路由以及頁面狀态錯誤。

頁面的路由

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

簡單封裝與調用

文件作用域

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

不會互相影響。

通過全局函數getApp（）可以獲取全局的應用實例，如果需要全局的數據，

則可以在App（）中設置。

模塊化

在日常編程過程中，一般都會把一些可以複用的代碼提煉出來，放到一個公共文件中。在微信小程序中，可以将一些公共的代碼抽離成為一個單獨的JS文件，作為一個模塊。模塊隻有通過module.exports或者exports才能對外暴露接口。

微信小程序通過Flexbox模型布局對組件進行排列。相比普通的布局方式，Flexbox更容易實現寬高适合屏幕的布局，使用起來更靈活，非常适合于微信小程序的布局要求。

1 基本要素

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

2 容器屬性

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

3 子元素屬性

子元素屬性定義了伸縮項目的屬性，

4 position屬性

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

5 邊框、空隙與填充

邊框很好理解，空隙指的是組件之間的距離，而填充指的是組件的内容到其邊框的距離，

組件是視圖層的基本元素，是構建頁面的基礎。

每個組件都有自定義的屬性，可以對功能樣式進行修改，但隻支持以下七種數據類型

：1 視圖容器組件

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

2 基礎内容組件

基礎内容組件用于在界面中展示圖标、文字、滾動條信息等。

3 表單組件

表單組件用于構建與用戶交互的表單。

4 多媒體組件

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

5 地圖組件

地圖組件，微信小程序提供了地圖導航功能，使用地圖組件和地圖位置API就可以方便、快捷地實現地圖定位導航。

6 導航組件

導航組件，它是微信小程序中用來控制所有頁面順序的組件。可以幫助我們實現頁面的路由和跳轉，使用起來相當便捷。

7 畫布組件

畫布組件，它可用于實現一些小程序控件沒有提供的頁面元素，

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