前言

每每有工具下載相關(guān)博客必有一句話：工欲善其事，必先利其器。
承接上文，本文將介紹微信開發(fā)者工具下載及小程序項(xiàng)目結(jié)構(gòu)與工具的詳細(xì)講解，使得更容易能夠在這個平臺上創(chuàng)造出優(yōu)秀的小程序產(chǎn)品。

1. 微信開發(fā)者工具下載

前往開發(fā)者工具下載頁面,根據(jù)自己的操作系統(tǒng)下載對應(yīng)的安裝包進(jìn)行安裝，有關(guān)開發(fā)者工具更詳細(xì)的介紹可以查看 。
微信開發(fā)者工具是微信官方推出的一款強(qiáng)大的開發(fā)輔助工具。它極大地簡化了微信小程序的開發(fā)流程，包括代碼的編寫、查看、編輯，以及小程序的預(yù)覽和發(fā)布等操作。為了滿足不同開發(fā)者的需求，微信開發(fā)者工具提供了三個版本，每個版本都有其特定的用途和目標(biāo)用戶：

1. 穩(wěn)定版（推薦）
   特點(diǎn)：如其名，穩(wěn)定版的最大特點(diǎn)是穩(wěn)定性高。它通過了廣泛的測試，確保了在正式發(fā)布之前各項(xiàng)功能都能穩(wěn)定運(yùn)行。
2. 預(yù)發(fā)布版
   特點(diǎn)：預(yù)發(fā)布版通常包含了即將推出的新特性，這些特性已經(jīng)通過了內(nèi)部測試，穩(wěn)定性較好，但仍可能存在一些未知的問題。
3. 開發(fā)版
   特點(diǎn)：開發(fā)版的更新頻率最高，它主要用于快速修復(fù)已知缺陷和上線新的小特性。由于重點(diǎn)在于快速迭代，穩(wěn)定性相對較差。

注意事項(xiàng):微信開發(fā)者工具必須聯(lián)網(wǎng)使用!

安裝過程十分簡單，省略不必要的贅述。

安裝后打開微信開發(fā)者工具，使用微信掃碼登錄即可。

2. 創(chuàng)建小程序項(xiàng)目

1. 打開微信開發(fā)者工具，左側(cè)選擇小程序，點(diǎn)擊+號即可新建項(xiàng)目。
   

2. 彈出新頁面，填寫項(xiàng)目相關(guān)信息（建議使用空目錄下創(chuàng)建）與申請的AppID（AppID不懂可看上一篇文章），點(diǎn)擊確認(rèn)。
   

3. 完成創(chuàng)建。
   

4. 視圖=>外觀,可把視圖調(diào)整到右側(cè)。
   

5. 設(shè)置=>編譯器設(shè)置，可調(diào)整代碼行高與間距。
   

3.文件目錄結(jié)構(gòu)介紹

使用過其他框架的同學(xué)們都知道，學(xué)習(xí)新框架了解其中目錄結(jié)構(gòu)是必不可少的。
在微信小程序開發(fā)中，一個完整的項(xiàng)目架構(gòu)被明確地分為兩大部分：主體文件（全局文件）和頁面文件。這種劃分有助于開發(fā)者更加系統(tǒng)地組織代碼和資源，確保小程序的開發(fā)既高效又易于管理。

3.1 主體文件

這些文件必須被放置在項(xiàng)目的根目錄下，以確保小程序在啟動時(shí)能夠正確地加載和解析它們。主體文件主要由以下三個部分組成：

1. app.js：這是小程序的入口文件。它的主要作用是初始化小程序?qū)嵗?，并提供一個全局的方法和屬性。在app.js中，開發(fā)者可以設(shè)置全局?jǐn)?shù)據(jù)和處理全局事件，如小程序啟動、前臺顯示、后臺隱藏等。
2. app.json：這是小程序的全局配置文件。它用于對小程序進(jìn)行全局性的設(shè)置，包括窗口表現(xiàn)、頁面路徑、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。app.json中的配置項(xiàng)會影響到小程序的多個方面，因此是控制小程序行為的關(guān)鍵文件。
3. app.wxss：這是小程序的全局樣式文件。與Web開發(fā)中的CSS文件相似，app.wxss允許開發(fā)者定義全局的樣式規(guī)則，這些規(guī)則將應(yīng)用于小程序內(nèi)的所有頁面。通過使用app.wxss，開發(fā)者可以確保小程序具有一致的視覺風(fēng)格，同時(shí)也可以減少頁面文件中樣式的重復(fù)定義。
   注意事項(xiàng):主體文件的名字必須是 app，app.js 和 app.json 文件是必須的!
   

3.2 頁面文件

頁面文件 是每個頁面所需的文件，小程序頁面文件都存放在 pages 目錄下，一個頁面一個文件夾。
每個頁面由四個文件構(gòu)成，這些文件僅對當(dāng)前頁面有效，它們協(xié)同工作，描述了頁面的結(jié)構(gòu)、樣式、邏輯和配置：

1. js：頁面邏輯文件。用于定義頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)等。
2. wxml：頁面結(jié)構(gòu)文件。采用類似HTML的標(biāo)記語言編寫，描述頁面的結(jié)構(gòu)。
3. wxss：頁面樣式文件。用于定義當(dāng)前頁面的專屬樣式，它擴(kuò)展自CSS，有些許差異但基本兼容CSS。
4. json：小頁面配置文件。用于定義當(dāng)前頁面的一些配置信息，如頁面標(biāo)題、窗口背景色等。
   注意事項(xiàng):js 文件和 .wxml 文件是必須存在的!
   

3.3 公共文件

components文件夾 它用于存放小程序中的自定義組件。自定義組件是微信小程序提供的一種重要的代碼復(fù)用機(jī)制，允許開發(fā)者將頁面的一部分封裝成獨(dú)立的組件，這些組件可以在不同的頁面中被重復(fù)使用。

3.4 渲染模式

微信小程序支持兩種主要的渲染模式：Skyline渲染模式和WebView渲染模式。這兩種模式各有特點(diǎn)和應(yīng)用場景，理解它們的差異對于優(yōu)化小程序性能和用戶體驗(yàn)非常重要。

3.4.1 Skyline 渲染模式

Skyline渲染模式是微信小程序較新引入的一種渲染方式，它通過提升JS的執(zhí)行效率和渲染性能來優(yōu)化小程序的運(yùn)行速度和流暢度。Skyline模式采用了更接近原生的渲染技術(shù)，能夠?qū)崿F(xiàn)更高效的頁面渲染和更流暢的用戶交互體驗(yàn)，也是目前初始的默認(rèn)模式。
主要特點(diǎn)：

1. 提高了JavaScript的執(zhí)行效率。
2. 適用于對性能要求較高的小程序，如游戲或者復(fù)雜的應(yīng)用。

3.4.2 WebView 渲染模式

WebView渲染模式是微信小程序最初使用的渲染方式，它基于WebView組件來渲染小程序的頁面。WebView是一種瀏覽器內(nèi)核組件，可以用來加載和顯示網(wǎng)頁內(nèi)容。在這種模式下，小程序的每個頁面都在一個WebView中運(yùn)行，這使得開發(fā)者可以使用Web技術(shù)（HTML、CSS、JavaScript）來開發(fā)小程序。
主要特點(diǎn)：

1. 依賴于WebView組件，與傳統(tǒng)的Web開發(fā)體驗(yàn)相似。
2. 兼容性好，能夠較好地支持各種HTML和CSS特性，方便使用現(xiàn)有的Web技術(shù)棧。
   

3.4.3 切換渲染模式

顯然WebView渲染模式更適合小程序開發(fā)，我們需要把默認(rèn)的Skyline模式進(jìn)行切換。

第一步，左側(cè)目錄中打開app.json文件。

第二步，找到renderer 、rendererOptions、componentFramework三個配置項(xiàng)全部去掉并刷新項(xiàng)目即可。
保存（刷新）項(xiàng)目：Ctrl+S鍵

4.新建頁面

4.1 第一種方法

第一步，找到主目錄中的pages文件夾=>右鍵新建文件夾。

第二步，找到新建的文件夾=>右鍵新建page(注意：不要輸入任何后綴名)。

第三步，創(chuàng)建成功。

4.2 第二種方法

找到主目錄中app.json文件，并在page配置項(xiàng)中新增保存項(xiàng)目即可。
保存（刷新）項(xiàng)目：Ctrl+S鍵

5.小程序基礎(chǔ)庫

小程序調(diào)試基礎(chǔ)庫是指在微信開發(fā)者工具中可以選擇的微信基礎(chǔ)庫版本。微信基礎(chǔ)庫為小程序提供了運(yùn)行所需的各種API和工具，包括但不限于界面渲染、數(shù)據(jù)通訊、本地存儲等功能，以及基礎(chǔ)框架和運(yùn)行邏輯等。
小程序開發(fā)者可以在微信開發(fā)者工具中選擇所需的微信基礎(chǔ)庫版本，作為運(yùn)行和調(diào)試小程序時(shí)的運(yùn)行環(huán)境。
每個小程序有自己所允許使用的基礎(chǔ)庫最低版本要求，開發(fā)者需要選擇要兼容的基礎(chǔ)庫版本，從而確保小程序的功能正常運(yùn)行。

5.1 調(diào)試基礎(chǔ)庫

找到右上角詳情=>切換本地設(shè)置=>調(diào)整基礎(chǔ)庫版本即可。

在工作中如果遇到某個API無法實(shí)現(xiàn)，首先排查基礎(chǔ)庫是否正確。
假設(shè)工作中使用分享到朋友圈功能，根據(jù)微信開發(fā)者文檔描述，最低需要從基礎(chǔ)庫 2.11.3 開始支持。

6.小程序調(diào)試

調(diào)試是開發(fā)過程中不可或缺的一環(huán)，對于微信小程序開發(fā)而言，微信開發(fā)者工具提供了強(qiáng)大的調(diào)試功能，使得開發(fā)者能夠有效地檢測和修正代碼中的錯誤。

6.1 模擬器

我們能夠通過模擬器實(shí)時(shí)預(yù)覽自己寫的頁面結(jié)構(gòu)效果。

6.2 調(diào)試器

通過上方工具欄打開小程序調(diào)試器。

1. Wxml面板允許開發(fā)者查看和調(diào)試小程序的WXML結(jié)構(gòu)。它提供了一個實(shí)時(shí)的DOM樹視圖，開發(fā)者可以在這里檢查元素的布局、綁定的數(shù)據(jù)和事件處理器。
2. Console面板用于顯示由console對象方法輸出的信息，包括日志、錯誤、警告等。這是調(diào)試JavaScript代碼中非常重要的一個工具。(System信息可右鍵隱藏)
3. Network面板用于監(jiān)控小程序發(fā)出的所有網(wǎng)絡(luò)請求，包括API調(diào)用、資源加載等。
4. AppData面板允許開發(fā)者查看和管理小程序的數(shù)據(jù)存儲，包括頁面數(shù)據(jù)、全局?jǐn)?shù)據(jù)等。
5. storage面板是微信小程序的一個本地存儲系統(tǒng)，允許開發(fā)者在用戶的設(shè)備上保存數(shù)據(jù)。這個功能類似于Web開發(fā)中的LocalStorage。
   

6.3 編譯

點(diǎn)擊工具欄編譯,如果以后寫好頁面和樣式后發(fā)現(xiàn)模擬器沒有改變，則需要重新編譯。

6.4 預(yù)覽

1. 點(diǎn)擊工具欄預(yù)覽按鈕 -> 彈出彈框 -> 點(diǎn)擊繼續(xù)預(yù)覽小程序 -> 生成二維碼。
   

2. 使用微信掃碼 -> 點(diǎn)擊右上角三個點(diǎn) -> 點(diǎn)擊開發(fā)調(diào)試 -> 開啟調(diào)試。
   

3. 重新掃碼進(jìn)入 -> 點(diǎn)擊左上角綠色vConsole按鈕 -> 打開調(diào)試界面。
   

   

6.5 真機(jī)調(diào)試

點(diǎn)擊工具欄真機(jī)調(diào)試按鈕 -> 生成二維碼。
注意：真機(jī)調(diào)試需選擇掃碼手機(jī)系統(tǒng)后再掃碼

掃碼后手機(jī)與電腦皆會彈出調(diào)試窗口，該調(diào)試窗口會互為聯(lián)動。
例如電腦中調(diào)整樣式、手機(jī)中發(fā)送請求雙方皆有影響。

6.6 清緩存

因?yàn)槲⑿砰_發(fā)者工具，緩存問題非常嚴(yán)重?。?！
常常寫好的代碼，即使刷新和重新編譯還是與預(yù)期不同。
這時(shí)可使用清緩存來按需清除。

總結(jié)

微信開發(fā)者工具極大簡化了微信小程序的開發(fā)流程，從項(xiàng)目創(chuàng)建到代碼編寫、調(diào)試及發(fā)布，提供全面支持。項(xiàng)目結(jié)構(gòu)清晰分為主體和頁面文件，便于管理。支持Skyline和WebView兩種渲染模式，滿足不同開發(fā)需求。多樣的調(diào)試工具如模擬器、真機(jī)調(diào)試等，加上可選的微信基礎(chǔ)庫版本，使得開發(fā)、測試和優(yōu)化過程高效、直觀。這些工具和功能共同為開發(fā)者打造了一個便捷、高效的小程序開發(fā)環(huán)境。

引用資料

• 微信開發(fā)者文檔
• CSDN-微信小程序真機(jī)調(diào)試技巧，解決各種疑難雜癥

最后

非常感謝大家抽出寶貴的時(shí)間閱讀這篇關(guān)于微信小程序開發(fā)前期準(zhǔn)備工作的文章。如果你覺得這篇文章有所啟發(fā)，請不吝賜予我一個贊??????，也歡迎你關(guān)注我，你的支持是我持續(xù)創(chuàng)作的最大動力！

這篇文章可能還有很多不足之處，因此非常歡迎誠摯的批評和建議。請隨時(shí)通過私信或留言的方式與我交流，你的每一點(diǎn)反饋都是我成長的寶貴資源。

感謝觀看，這是博主第二次寫博客記錄學(xué)習(xí)過程,并以此作為分享，希望能夠?yàn)槟鉀Q一些困惑，也希望我們能夠一起成長，共同探索微信小程序帶來的無限可能。文章來源地址http://www.zghlxwxcb.cn/news/detail-847806.html

到了這里，關(guān)于微信開發(fā)者工具下載及小程序項(xiàng)目的創(chuàng)建與調(diào)試（完整圖文教程）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！