微信小程序詳解004——小程序目錄結構及文件構成(下)

2021-01-08 小橋談編程

回顧

上一章，我們對開發者工具的界面和微信小程序的目錄樹進行了介紹，講解了app.js和app.json文件，這一章我們將介紹其他的目錄文件。

小程序的目錄樹，除了app.js和app.json文件外，還包含app.wxss、project.config.json文件，和pages目錄（utils目錄為工具目錄，暫時不講，後續用到再做介紹），下面我們就對剩餘的幾個文件和目錄做詳細介紹。

1.app.wxss

我們在第一篇文章中就介紹：.wxss文件就是對.css的封裝（筆者自己認為），從而實現對頁面布局的裝飾。如圖1所示：

圖1 .wxss文件代碼

代碼實現對class=container的標籤制定一些屬性。看到這裡，可能會有讀者問，app.wxss是全局屬性，萬一，我其中一個頁面的屬性想跟其他的不一樣，怎麼辦？沒關係，因為每一個頁面中私有的.wxss會覆蓋app.wxss中相同屬性的參數，這裡就涉及到一個優先級的問題，私有文件的.wxss的優先級更高。（所謂私有的.wxss文件，就是在pages目錄下，每一個頁面文件夾下的.wxss文件）

2.project.config.json

project.config.json文件是小程序開發時工具的配置信息。如果將項目拷貝到另一臺電腦，那麼這個文件能讓開發工具恢復到相應的設置，如果還不理解，看下面這幅圖：

圖2 project.config.json文件

通過與詳情頁對比，我們發現，project.config.json文件中很多信息都是詳情頁中的，而詳情頁中的配置是可以根據需求改動的。

3. pages目錄

在後續的開發過程中，我們做的最多的工作就是對pages目錄下的文件進行處理。下面對pages目錄下的文件進行詳細介紹。

圖3 pages目錄文件

可以看到pages文件夾下有很多的子文件夾（可以有很多個，文件夾的名字也可以隨意，但是必須在app.json中註冊），每一個子文件夾代表一個頁面（所謂的頁面，就是微信小程序展現出來的一頁布局，類似APP開發中的Activity），不同的頁面之間如何跳轉，我們將在後續的文章中詳細分析。

如圖3所示，可以發現，每一個頁面文件夾（比如index文件夾）中的文件類似，都包含四類文件（.js/.json/.wxml/.wxss），這裡我們只分析一個頁面中的這四個文件，其他的子文件夾下的文件情況類似。

已index文件夾為例，對文件夾下的四種文件進行介紹：

page.json

這裡的page.json是指在pages文件夾的子文件夾下的一系列.json結尾的配置文件。這一類文件是對app.json文件的一種補充，優先級比app.json高。

如果，開發的小程序的配置是一樣的，我們就可以在app.json中設置，如果需要對其中一個頁面的布局進行設置，就可以通過這個頁面的.json文件來實現。

例：如圖4所示：

圖4-1 app.json
圖4-2 index.json
圖4-3 logs.json

app.json中屬性navigationBarTitleText（頁面標題）設置為"wechart"；index.json沒有任何設置；logs.json設置為"查看啟動日誌"，所以就得到了如下效果圖：

圖5-1 index頁面標題
圖5-2 logs頁面標題

index.json文件中沒有設置屬性值，所以用的是app.json的全局屬性值，而logs.json設置了navigationBarTitleText的屬性值，由於頁面的優先級更高，所以將全局的app.json中的屬性值覆蓋了。

page.js/page.wxss/page.wxml

再看頁面文件夾中的.js/.wxss/.wxml文件。我們知道，在web前端設計中，網頁編程採用的是 HTML + CSS + JS 這樣的組合。相對應的，小程序wxml對應html文件、wxss對應css文件，後續的章節，我們對詳細探討這三個文件如何配套使用，從而實現小程序的開發。

小結

本篇文章介紹了小程序目錄樹中的其他文件，從而使讀者對小程序的結構框架，文件功能有所了解。下面的章節，我們會陸續展開對page.js/page.wxss/page.wxml文件的編寫。

相關焦點

  • 小程序入門簡介
    創建項目我們需要通過開發者工具，來完成小程序創建和代碼編輯。開發者工具安裝完成後，打開並使用微信掃碼登錄。選擇創建「項目」，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），比如「我的第一個項目」，並選擇一個本地的文件夾作為代碼存儲的目錄，點擊「新建項目」就可以了。
  • 騰訊NEXT團隊微信小程序開發課程
    本套課程是由騰訊NEXT團隊出品的微信小程序開發課程，大神之作，非常齊全且專業，主要的學習項目：認識微信小程序、頁面結構構建-認識
  • 從零開始:微信小程序新手入門寶典
    t=2017142：在微信下禁止的一些規則，在微信小程序中同樣不能涉及;比如誘導分享;3：暫未開放的類目，無法申請，詳情請在本站搜索「服務範圍」的文章查看最新服務類目推薦閱讀：跳坑指南《七十》如何讓微信小程序服務類目審核通過。　　1月4號更新圖：
  • 微信小程序開發系列二：微信小程序的視圖設計
    大家如果跟著我第一篇文章  一起動手，那麼微信小程序的開發環境一定搭好了。效果就是能把該小程序的體驗版以二維碼的方式發送給其他朋友使用。這個系列接下來的文章我們就來研究使用微信開發者工具自動生成的這個小程序的實現文件。
  • 詳解微信小程序自定義組件(一)
    好吧，突然發現學不完了，一下子，那就分開吧，由於時間太久，直接重新大致複習了一下微信小程序自定義組件微信小程序支持自定義組件下方的目錄其中，components為組件目錄，nodemodules為模塊目錄，pages為小程序的頁面目錄，utils為一些基礎功能的封裝。好比安裝的第三方百度統計功能在此。
  • 微信小程序開發《影視小程序》從0實戰-無需懂代碼
    最近圈子裡很火爆的就是微信小程序了···不知道大家是否有注意，影視類一直是比較容易獲得認可的資源種類。今天免費分享怎麼從0開始搭建所有資原始碼請在GZH「副業研習圈」獲取需要準備的東西：1、伺服器2、備案域名3、註冊微信小程序
  • 兩個步驟讓你獲取任何微信小程序源碼!
    在這裡把我重新簡化好的，快速地獲取一個微信小程序源碼的方式記錄下來。先來想想一個很簡單的問題，小程序的源文件存放在哪？但是在微信伺服器上，普通用戶想要獲取到，肯定是十分困難的，有沒有別的辦法呢？那麼如何才能在手機裡找到小程序的源文件包呢？微信小程序的格式就是:.wxapkg.wxapkg是一個二進位文件，有其自己的一套結構。
  • 微信小程序開發系列一：微信小程序的申請和開發環境的搭建
    我最近也剛剛開始微信小程序的開發，想把我自學的一些心得寫出來分享給大家。這是第一篇，從零開始學習微信小程序開發。主要是小程序的註冊和開發環境的搭建。首先我們要在下列網址申請一個屬於自己的微信小程序：https://mp.weixin.qq.com/cgi-bin/wx點擊按鈕「前往註冊」。注意我們需要使用一個沒有註冊過微信小程序或者微信公眾號的郵箱。我用的是網易郵箱。註冊之後，郵箱會收到一封激活郵件。激活之後，就可以進入小程序主體信息登記頁面了。
  • 騰訊NEXT團隊微信小程序開發課程,齊全且專業的課程
    本套課程是由騰訊NEXT團隊出品的微信小程序開發課程，大神之作，非常齊全且專業，主要的學習項目：認識微信小程序、頁面結構構建-認識
  • 實用技能 | 微信文件管理小程序
    手機電腦互相傳輸文件還在靠那一根數據線嗎？一個文件敲定細節還在兩個人線上發來發去嗎？一年前，小程序對我們來說，可能還只是「跳一跳」等微信小遊戲的代名詞，而如今，它們已足夠成為我們工作生活的一部分了。用戶可在微信通過官方小程序查閱和編輯在線文檔，騰訊文檔的入口還包括騰訊文檔獨立APP、QQ、TIM、Web官網等。在上述平臺，用戶可以將文檔同步分享給微信或QQ好友，並授權對方共同編輯，修改動作將實時同步到全部平臺。
  • 微信小程序模塊化開發實踐
    微信小程序目前版本的API實現需要兼顧方方面面, 所以仍然使用callback寫法, 眾所周知的Callback-Hell是傳統js語法上的歷史問題, 但畢竟稱手的工具是開發效率的源泉. 因此筆者對當前版本的微信小程序API做了簡單的封裝weapp.
  • 微信小程序開發教程,零基礎入門小程序雲開發視頻
    微信小程序開發教程，零基礎入門小程序雲開發，培訓課程視頻講座內容介紹
  • 微信小程序「反編譯」實戰(二):源碼還原
    類似地，在小程序中也有同樣的角色，一個小程序工程主要包括如下幾類文件：例如 知識小集 的小程序源碼工程結構如下：然而，根據上一篇文章介紹，對 知識小集 小程序的 .wxapkg 解包後得到如下文件：所以，我們先嘗試分析一下從 .wxapkg 提取出來的各個文件內容的結構及其用途，然後介紹如何用腳本工具把它們一鍵還原為「編譯」前的源碼，並在微信開發者工具中跑起來。文件分析本節主要以 知識小集 小程序的 .wxapkg 解包後的源碼文件為例，進行分析。你也可以跳過本節的分析，直接看下一節介紹用腳本「反編譯」還原源碼。
  • 微信小程序該如何開發？
    微信小程序是一種基於微信公眾平臺，且不需要下載安裝就可以使用的應用，它實現了應用「觸手可及」的夢想，用戶通過微信掃一掃或搜一下即可打開應用。那麼小程序該如何開?小程序是依託微信而生的，而微信屬於強社交平臺，所以其小程序自帶的一個天然強社交屬性。同時通過觀察小程序的設計，可以發現微信官方在分享這一功能上做了很大的創新，其不再局限於公眾號類的內容共享，更多的是一種全新的協作方式。
  • 清大矽谷51小程序 | 一篇文章,帶你從 0 到 1 開發小程序插件
    前不久,微信釋放了一個重磅新能力:微信小程序插件功能。有了它,小程序開發者就可以通過這個功能,強化自身小程序能力;小程序服務提供商也可以用它,為開發者、用戶提供強大的小程序功能支持,進一步拓展小程序能力。插件固然好,但如何從零開發一個插件呢?今天,知曉程序就來手把手,教你如何從零開發一款微信小程序插件。
  • Linux中的文件和目錄結構詳解
    ，深入了解linux文件目錄結構的標準和每個目錄的詳細功能，對於我們用好linux系統只管重要，下面我們就開始了解一下linux目錄結構的相關知識。        當在使用Linux的時候，如果您通過ls –l / 就會發現，在/下包含很多的目錄，比如etc、usr、var、bin ... ... 等目錄，而在這些目錄中，我們進去看看，發現也有很多的目錄或文件。
  • uni-app小程序開發指南
    以下全文使用wxapp指代小程序應用1.項目介紹wxapp是基於uni-app，使用vue.js語法進行開發的微信小程序項目。2.開發工具devtools：微信開發者工具。安裝完畢使用開發者帳號微信登陸微信開發者工具且到開發工具的安全設置中開放服務埠HBuilderX：由DCloud推出的web開發IDE。
  • 小程序雲端解決方案,微信小程序及後臺交互架構
    從微信的誕生，到微信公眾號、微信支付，再到小程序，騰訊生態在一次又一次影響用戶行為習慣的同時，也為開發者提供了新的思路和技能發展方向。無可置疑，微信小程序開發浪潮已經來臨，也將在 2018年成為各行業流量紅利的集中爆發入口。
  • 微信小程序教程入門篇_微信小程序開發
    一、怎麼創建微信小程序1、申請小程序帳號有認證的微信公眾號就在後臺直接快速註冊生成一個小程序，10分鐘左右就可以申請下來。如果是全新申請的小程序就需要單獨繳納300元認證費用。一般來說，通過認證的微信公眾號申請的小程序帳號是免費的，但是用第三方小程序生成平臺發布小程序，是需要收費的小程序費用。如果你懂代碼知識，可以使用微信官方開發者工具。這種開發方式可以讓你自由做出你想要的小程序效果，不過需要一定技術基礎，比較浪費時間。三、小程序正規價格表？
  • 微信小程序開發系列教程三：微信小程序的調試方法
    微信小程序開發系列教程這個教程的前兩篇文章，介紹了如何用下圖所示的微信開發者工具自動生成一個Hello World的微信小程序，並講解了這個自動生成的微信小程序的視圖開發原理。這個系列的下一步，會繼續介紹這個微信小程序的控制器index.js的實現。