學小程式還不懂程式碼結構？——每天三分鐘玩轉小程式2

• 2020 年 2 月 10 日
• 筆記

掃這裡的二維碼就可以了，手機上就能看了，還等什麼！

就是下面這個性感的介面，看到我騷氣的微信頭像了。

小程式有哪些目錄？

這一會我們來了解下小程式的項目結構。

小程式目錄結構非常的純粹，根目錄下就兩個目錄：

• pages 存放所有的頁面
• utils 存放工具函數，也就是公共函數，比如運算函數、獲取時間等工具。下面就一個utils文件，我就不做介紹了

pages 是放頁面的目錄

pages 下每個目錄就是一個頁面，比如上圖中就有兩個頁面，別看有個頁面叫logs，他就是披著羊皮的狼就是來誤導人的，他就是個頁面。

每個頁面一定有四個文件，他是約定好的，每個文件都有作用，創建頁面的時候自動生成四個文件，他們必須具有相同的路徑與文件名。

學過前端的都知道，js是寫動態效果的，css寫樣式的，html是頁面。這裡也不例外，只是改了個名字。

js 是這個頁面的後端

js 里，onLoad是頁面載入的時候會調用的函數，data存放頁面用到的數據，還有些自定義函數這個我們後面再說。

json 是微信提供的頁面配置

json是頁面配置，我搞一個豐富點的例子。

{    "navigationBarBackgroundColor": "#ffffff",    "navigationBarTextStyle": "black",    "navigationBarTitleText": "微信介面功能演示",    "backgroundColor": "#eeeeee",    "backgroundTextStyle": "light"  }

比如上面這個index.json文件，記錄了導航欄背景顏色、導航欄標題顏色、導航欄標題文字內容、窗口的背景色、下拉 loading 的樣式。詳細配置在這裡有記錄，我們只要知道這個文件是幹嘛的就可以了。

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html

wxml 和 html 的功能相同

wxml 就是寫標籤專用的，頁面展示的各種元素就在裡面了。

比如上面這張圖就是剛剛的頁面，唯一和 html 不同的是，這裡多了些微信官方提供的標籤。

wxss 是寫樣式的

沒錯這就是和css一樣的語法

utils 目錄就是專門放公共函數的

根目錄下的幾個系統文件

我們剛剛了解了 pages 下每個頁面的四個文件，utils 目錄的作用，會發現有幾個文件不在目錄里。

app.js 同頁面中的 js ，一個作用是配置小程式進來做哪些操作，比如獲取用戶登陸狀態。另一個作用是保存全局變數

app.json 一樣是整個小程式的配置，頁面配置可以覆蓋總配置，唯一不同的是要在這註冊各個頁面。

app.wxss 全局樣式，可能被頁面樣式覆蓋。

project.config.json 這是一個項目配置文件，比如項目的名字，appid等等,別管他具體配置了啥，全是自動的。只要這個文件在，你所有的個性化配置都會在。

sitemap.json 小程式內搜索用的，配置哪些頁面允許微信的爬蟲搜索。啥意思，就是在搜一搜裡面搜索的時候能發現你這個頁面。

以上。

實踐出真知！今天的任務是，打開自己的微信開發者工具，一個一個的點開示例文件，看看裡面的內容，相信你肯定能很快理解整個項目的運行流程了！