? ?嘿，偷偷的告訴你

點(diǎn)擊左上角“程序員小鴻”關(guān)注我只需要幾秒鐘哦~

通過微信開發(fā)者工具新建小程序后，工具會初始化一套小程序默認(rèn)項(xiàng)目結(jié)構(gòu)，結(jié)構(gòu)如下：

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

---

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

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

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

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

wxml =?身體

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

wxss =?衣服

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

↓
js =?思想和行為

(會說話、會做動(dòng)作)

↓
json

(給ta起個(gè)名字)

這樣就構(gòu)成一個(gè)完整的頁面是不是很簡單明了呢

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

點(diǎn)亮在看，你最好看！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。