# 小程序宿主環境 我們稱微信客戶端給小程序所提供的環境為宿主環境。小程序借助宿主環境提供的能力，可以完成許多普通網頁無法完成的功能。 上一章中我們把小程序涉及到的文件類型闡述了一遍，我們結合 QuickStart 這個項目來講一下這些文件是怎么配合工作的。 ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E6%B8%B2%E6%9F%93%E5%B1%82%E5%92%8C%E9%80%BB%E8%BE%91%E5%B1%82)渲染層和邏輯層 首先，我們來簡單了解下小程序的運行環境。小程序的運行環境分成渲染層和邏輯層，其中 WXML 模板和 WXSS 樣式工作在渲染層，JS 腳本工作在邏輯層。 小程序的渲染層和邏輯層分別由2個線程管理：渲染層的界面使用了WebView 進行渲染；邏輯層采用JsCore線程運行JS腳本。一個小程序存在多個界面，所以渲染層存在多個WebView線程，這兩個線程的通信會經由微信客戶端（下文中也會采用Native來代指微信客戶端）做中轉，邏輯層發送網絡請求也經由Native轉發，小程序的通信模型下圖所示。  有關渲染層和邏輯層的詳細文檔參考?[小程序框架](https://www.w3cschool.cn/weixinapp/weixinapp-wpft38qt.html)?。 ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E7%A8%8B%E5%BA%8F%E4%B8%8E%E9%A1%B5%E9%9D%A2)程序與頁面 微信客戶端在打開小程序之前，會把整個小程序的代碼包下載到本地。 緊接著通過?app.json?的?pages?字段就可以知道你當前小程序的所有頁面路徑: ~~~ { "pages":[ "pages/index/index", "pages/logs/logs" ] } ~~~ 這個配置說明在 QuickStart 項目定義了兩個頁面，分別位于?pages/index/index?和?pages/logs/logs。而寫在?pages?字段的第一個頁面就是這個小程序的首頁（打開小程序看到的第一個頁面）。 于是微信客戶端就把首頁的代碼裝載進來，通過小程序底層的一些機制，就可以渲染出這個首頁。 小程序啟動之后，在?app.js?定義的?App?實例的?onLaunch?回調會被執行: ~~~ App({ onLaunch: function () { // 小程序啟動之后 觸發 } }) ~~~ 整個小程序只有一個 App 實例，是全部頁面共享的，更多的事件回調參考文檔?[注冊程序 App](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html)?。 接下來我們簡單看看小程序的一個頁面是怎么寫的。 你可以觀察到?pages/logs/logs?下其實是包括了4種文件的，微信客戶端會先根據?logs.json?配置生成一個界面，頂部的顏色和文字你都可以在這個?json?文件里邊定義好。緊接著客戶端就會裝載這個頁面的?WXML?結構和?WXSS?樣式。最后客戶端會裝載?logs.js，你可以看到?logs.js?的大體內容就是: ~~~ Page({ data: { // 參與頁面渲染的數據 logs: [] }, onLoad: function () { // 頁面渲染后 執行 } }) ~~~ Page?是一個頁面構造器，這個構造器就生成了一個頁面。在生成頁面的時候，小程序框架會把?data?數據和?index.wxml?一起渲染出最終的結構，于是就得到了你看到的小程序的樣子。 在渲染完界面之后，頁面實例就會收到一個?onLoad?的回調，你可以在這個回調處理你的邏輯。 有關于?Page?構造器更多詳細的文檔參考?[注冊頁面 Page](https://www.w3cschool.cn/weixinapp/weixinapp-a7qo38rn.html)?。 ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#%E7%BB%84%E4%BB%B6)組件 小程序提供了豐富的基礎組件給開發者，開發者可以像搭積木一樣，組合各種組件拼合成自己的小程序。 就像?HTML?的?div,?p?等標簽一樣，在小程序里邊，你只需要在?WXML?寫上對應的組件標簽名字就可以把該組件顯示在界面上，例如，你需要在界面上顯示地圖，你只需要這樣寫即可： ~~~ <map></map> ~~~ 使用組件的時候，還可以通過屬性傳遞值給組件，讓組件可以以不同的狀態去展現，例如，我們希望地圖一開始的中心的經緯度是廣州，那么你需要聲明地圖的 longitude（中心經度） 和 latitude（中心緯度）兩個屬性: ~~~ <map longitude="廣州經度" latitude="廣州緯度"></map> ~~~ 組件的內部行為也會通過事件的形式讓開發者可以感知，例如用戶點擊了地圖上的某個標記，你可以在?js?編寫?markertap?函數來處理： ~~~ <map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map> ~~~ 當然你也可以通過?style?或者?class?來控制組件的外層樣式，以便適應你的界面寬度高度等等。 ## [](https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/framework.html#API)API 為了讓開發者可以很方便的調起微信提供的能力，例如獲取用戶信息、微信支付等等，小程序提供了很多 API 給開發者去使用。 要獲取用戶的地理位置時，只需要： ~~~ wx.getLocation({ type: 'wgs84', success: (res) => { var latitude = res.latitude // 緯度 var longitude = res.longitude // 經度 } }) ~~~ 調用微信掃一掃能力，只需要： ~~~ wx.scanCode({ success: (res) => { console.log(res) } }) ~~~ 需要注意的是：多數 API 的回調都是異步，你需要處理好代碼邏輯的異步問題。 更多的 API 能力見?[小程序的API](https://www.w3cschool.cn/weixinapp/weixinapp-ercd38rr.html)。 通過這個章節你已經大概了解了小程序運行的一些基本概念，當你開發完一個小程序之后，你就需要發布你的小程序。在下個章節，你會知道發布前需要做什么準備。