詳解微信小程序目錄結構，淺析微信小程序技術架構

詳解微信小程序目錄結構，淺析微信小程序技術架構

我做的第一個微信小程序項目應該是19年上旬做的，到現在也有一年左右了，今天我就結合微信小程序官方文檔簡單分析總結一下微信小程序的目錄結構和運行原理。

1、 微信小程序目錄結構分析

新建一個微信小程序項目目錄結構如下：

小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
1.1 一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：

1.2 一個小程序頁面由四個文件組成，分別是：

1.3 utils目錄
將一些公共的代碼抽離成爲一個單獨的 js (utils.js)文件，其他js文件若要使用它需要先使用 module.exports 或者 exports 對外暴露接口，代碼如下

module.exports = {
  formatTime: formatTime
  //對外方法名: 本地方法名
}

在需要使用的js文件裏使用require(path) 將其引入，如下

var util= require('../../utils/util.js')

1.4 project.config.json文件
這個文件項目配置文件，我們可以直接通過開發者工具的面板進行設置，如圖：

代碼配置分析

{
    "description": "項目配置文件",  //描述
    "packOptions": {  //用以配置打包時對符合指定規則的文件或文件夾進行忽略
        "ignore": []
    },
    "setting": {  //項目設置
        "urlCheck": false,  //不檢查安全域名和 TLS 版本
        "es6": true,  //啓用 es6 轉 es5
        "postcss": true,  //上傳代碼時樣式自動補全
        "minified": true,  //上傳代碼時自動壓縮
        "newFeature": true  //新特徵，文檔中未描述
    },
    "compileType": "miniprogram",  //編譯類型，miniprogram爲普通小程序項目
    "libVersion": "2.3.0",  //基礎庫版本
    "appid": "touristappid",  //AppID
    "projectname": "%E6%B5%85%E8%93%9D%E5%95%86%E5%9F%8EPRO",  //項目名字，只在新建項目時讀取,urlDecode解碼(路徑解碼)
    "debugOptions": {
        "hidedInDevtools": []  //配置調試時於調試器 Sources 面板隱藏源代碼的hidedInDevtools 的配置規則和 packOptions.ignore 是一致的。
    },
    "scripts": {},  //自定義預處理的命令 beforeCompile編譯前預處理命令、beforePreview預覽前預處理命令、beforeUpload上傳前預處理命令
    "condition": {  //編譯模式，增加編譯模式時，會添加到下面的對應數組
        "search": {   
            "current": -1,
            "list": []
        },
        "conversation": {
            "current": -1,
            "list": []
        },
        "plugin": {  //插件
            "current": -1,
            "list": []
        },
        "game": {  //小遊戲
            "list": []
        },
        "miniprogram": {  //小程序
            "current": -1,
            "list": []
        }
    }
}

1.5 sitemap.json文件
這個文件的作用是默認收錄所有小程序的頁面內容，用於微信搜索場景，這意味者開發者的小程序的曝光將會變多了。目前搜索小程序是根據小程序的名稱和簡介來搜索，以後可以根據內容來出結果，這就更像網頁了。

2、 微信小程序的架構

我們使用小程序的時候都會有這樣的一個感受，第一次使用某個小程序的時候會非常慢，這個是因爲小程序第一次啓動會從CDN下載小程序的完整包，以後再打開就會快的多。（這是題外話了）
微信小程序結構上由兩個分層組成的，分別是視圖層(view)和邏輯層(service)構成，兩個分層獨立運行，互不影響。小程序架構圖如下：

由圖我們可以知道，小程序藉助的是JSBridge實現了對底層API接口的調用，
也就是說我們要做的其實就是上層開發，只需要做視圖層和邏輯層開發即可，底層的其他事情由微信官方提供API完成。