? ?嘿，偷偷的告訴你

點擊左上角“程序員小鴻”關注我只需要幾秒鐘哦~

通過微信開發者工具新建小程序后，工具會初始化一套小程序默認項目結構，結構如下：

├──??pages?????????????????#?主頁面相關文件│???├──?index??????????????#?頁面目錄資源文件(js,json,wxml,wxss)│???├──???├──?index.js?????#?局部index邏輯文件│ ├── ├── index.json # 局部index配置文件│???├──???├──?index.wxml???# 局部index視圖文件│???├──???├──?index.wxss # 局部index樣式文件│ ├── logs # 頁面目錄資源文件(js,json,wxml,wxss)├──??utils?????????????????#?工具相關目錄，里面各種工具類方法等│???├──?util.js????????????#?工具類js文件├── app.js # 小程序全局公共邏輯├──??app.json??????????????#?全局公共配置文件├──??app.wxss??????????????#?全局公共樣式文件├──??project.config.json???#?項目配置文件├──??sitemap.json??????????#?小程序頁面索引文件面試時偶爾會提起原生小程序新建項目結構有哪些目錄和文件，在我工作的第一家公司就有出過此筆試題，記好筆記。

---

????目錄和文件的作用??

• pages：?存放著小程序所有的頁面(主包)，新建項目會創建默認的兩個頁面模板，分別是index(首頁)和logs(日志頁)。

• 原生開發正常來說一個頁面會包含4個文件，以上述的index首頁為例(logs頁面也是一樣)，會包含如下4個文件(后綴名)

• wxml：結構層，是頁面的骨架，用來定義頁面所呈現的內容，我們在屏幕看到的每一行文字，每一張圖片的時候由結構層去顯示的；
• wxss：表示層，用來修飾結構層(wxml)的每一個元素，使頁面呈現在用戶眼中顯得更加美觀，可以修改頁面上每一行文字的大小、顏色、字重，修改圖片的寬高；
• js：行為層，為頁面添加各式各樣的動態功能，比如用戶注冊登錄功能，可以與后臺進行數據交互，沒有此文件頁面相當于就是個靜態頁面；
• json：頁面配置文件，可以配置當前頁面(index頁面)的頁面標題、頂部欄顏色、文字顏色等；

wxml =?身體

(手、腳、耳朵等各個組成部分)↓

wxss =?衣服

(穿上衣服顯得格外的好看)

↓
js =?思想和行為

(會說話、會做動作)

↓
json

(給ta起個名字)

這樣就構成一個完整的頁面是不是很簡單明了呢

• utils：存放工具類相關的文件夾。
• utils.js：工具類，將一些公共的代碼抽離成為一個單獨的 js。utils.js默認生成的代碼包含時間轉換，然后對外暴露方法，可以在pages任何頁面進行調用。
• app.js：全局公共邏輯js，每個小程序都需要在?app.js?中調用?App?方法注冊小程序實例，綁定生命周期回調函數、錯誤監聽和頁面不存在監聽函數等。
• app.json：來對微信小程序進行全局配置，決定頁面文件的路徑、窗口表現、設置網絡超時時間、設置多 tab 等。在index頁面也有json文件，那個是對局部配置的，而app.json是對全局配置的。
• app.wxss：全局樣式表，小程序任何頁面的樣式都可以在全局樣式表進行設置，局部的wxss文件只能對局部wxml進行設置，都是用于描述wxml的樣式。
• project.config.json：小程序開發者工具在每個項目的根目錄都會生成一個project.config.json，在工具上做的任何配置都會寫入到這個文件，當重新安裝工具或者換電腦工作時，只要載入同一個項目的代碼包，開發者工具就自動會幫你恢復到當時你開發項目時的個性化配置，其中會包括編輯器的顏色、代碼上傳時自動壓縮等等一系列選項。
• sitemap.json：配置小程序的頁面是否允許被微信索引，當開發者允許，微信會通過爬蟲的形式，微信小程序的頁面建立索引，當用戶的搜索詞條觸發該索引時，小程序的頁面將可能展示在搜索結果中。

點亮在看，你最好看！

總結

以上是生活随笔為你收集整理的不起作用 微信小程序 顶部json_微信小程序之 新建项目默认结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。