小程序宿主環境

Luffa Cloud小程序可運行在各類型移動應用中，在加載啟動小程序時，所需要的運行環境與能力需要由用戶端應用向小程序提供我們將這套環境稱為'宿主環境（宿主應用）'，小程序借助宿主環境提供的能力，可以完成許多普通網頁無法實現的功能。

1.渲染層和邏輯層

小程序的運行環境分成渲染層和邏輯層2個部分。

其中邏輯層用來加載小程序中負責處理業務邏輯的JS腳本，而渲染層則用來渲染WXML模版與WXSS樣式，顯示最終的頁面。

在小程序中，邏輯層與渲染層則分別由2個獨立線程進行管理。

• 邏輯層採用JS Core引擎運行JS腳本，用來處理業務邏輯；
• 渲染層介面使用WebView進行渲染（一個小程序中如果存在多個頁面，則會存在多個WebView線程）。

囙此一個小程序應用中只有一個JS Core線程，以及多個WebView線程，這兩個線程的通信會經由宿主用戶端（下文中也會採用Native來代指宿主用戶端）做中轉，邏輯層發送網絡請求也經由Native轉發。

小程序的通信模型下圖所示：

Luffa Cloud小程序可在多種平臺上運行：iOS/iPadOS用戶端、Android用戶端和用於調試的Luffa Cloud開發者工具等。

不同運行環境下，腳本執行環境和用於組件渲染的環境是不同的，效能表現也存在差异：

• 在iOS、iPadOS上，小程序邏輯層的JavaScript代碼運行在JavaScriptCore中，視圖層是由WKWebView來渲染的，環境有iOS 14、iPad OS 14等。
• 在Android上，小程序邏輯層的JavaScript代碼運行在V8中，視圖層是由基於Mobile Chromium內核的自研XWeb引擎來渲染的。
• 在開發工具上，小程序邏輯層的JavaScript代碼是運行在NW.js中，視圖層是由Chromium Webview來渲染的JavaScriptCore無法開啟JIT編譯（Just-In-Time Compiler），同等條件下的運行效能要明顯低於其他平臺。

2.程序與頁面

宿主用戶端在打開小程序之前，會把整個小程序的代碼包下載到本地然後通過解析app.json裏的pages欄位，就可以知道該小程序的所有頁面路徑：

{  
  "pages":[    
     "pages/index/index",    
     "pages/logs/logs"  
   ]
}

這個配置說明在項目中定義了兩個頁面，分別位於pages/index/index和pages/logs/logs而寫在pages欄位的第一個頁面就是這個小程序的首頁（打開小程序看到的第一個頁面）。

每個頁面的路徑，在代碼包裏都可以找到對應的文件路徑例如pages/index/index，在該路徑下，存在著這個頁面對應的WXML、WXSS、JS文件與JSON設定檔。

小程序啟動之後，在app.js定義的App實例的onLaunch回檔會被執行：

App({  
  onLaunch() {    
   // Triggered after the mini program is launched.  
  }
})

整個小程序只有一個App實例，是全部頁面共亯的，更多的事件回檔參攷文件 注册小程序

接下來我們簡單看看小程序的一個頁面是怎麼寫的

你可以觀察到pages/logs/logs下其實是包括了4種文件的，宿主用戶端會先根據logs.json配置生成一個介面，頂部的顏色和文字你都可以在這個json文件裡邊定義好緊接著用戶端就會裝載這個頁面的WXML結構和WXSS樣式最後用戶端會裝載logs.js，你可以看到logs.js的大體內容就是：

Page({  
  data: { // Data involved in page rendering    
    logs: []  
  },  
  onLoad() {    
    // After the page is rendered, execute the  
  }
})

Page是一個頁面構造器，這個構造器就生成了一個頁面，data表示的是該頁面需要用到的渲染數據在生成頁面的時候，小程序框架會把data數據和index.wxml一起渲染出最終的結構，於是就得到了你看到的小程序的樣子。

在渲染完介面之後，頁面實例就會收到一個onLoad的回檔，你可以在這個回檔處理你的邏輯。

TIP

有關於Page構造器更多詳細的文件參攷 注册頁面

3.組件

組件是小程序提供給開發者來創建頁面UI，自定義WXML的就像HTML的<div>，< p>等標籤一樣，在小程序裡邊，你只需要在WXML寫上對應的組件標籤名字就可以把該組件顯示在介面上例如：

<view>Welcome to TCMPP</view>

該頁面就顯示一行文案：Welcome to Luffa Cloud開發者可以通過style和class來控制該組件的樣式，來指定寬、高、顏色等。

TIP

更多的組件可以參考 組件概覽

4.API

為了讓開發者更方便的使用小程序所提供的能力，Luffa Cloud提供了多種API供開發者使用，開發者可以使用這些API對小程序介面進行修改，獲取設備當前位置，播放視頻、音訊等。

API分為同步與非同步兩種，同步API會直接返回結果，而非同步API會通過回檔返回結果開發者需要根據API的回檔管道處理邏輯，傳入正確的參數處理業務。

要獲取用戶地理位置時，只需要非同步調用wx.getLocation：

wx.getLocation({  
  type: 'wgs84',  
  success: (res) => {    
    var latitude = res.latitude // latitude     
    var longitude = res.longitude // longitude 
  }
})

要獲取設備資訊時，只需要同步或非同步調用wx.getSystemInfo:

// asynchronous
wx.getSystemInfo({  
  success (res) {    
    console.log(res.model)    
    console.log(res.pixelRatio)    
    console.log(res.windowWidth)    
    console.log(res.windowHeight)    
    console.log(res.language)    
    console.log(res.version)    
    console.log(res.platform)  
  }
})

// synchronous
try {
  wx.getSystemInfoSync();
} catch(e) {}

TIP

更多的API能力見 API概覽