Mars - 又雙叒叕一個多端開發框架？這次是 Vue 驅動，能完美適配 H5
Mars 是由 Vue 驅動的多端開發框架，其語法規範完全遵循 Vue，支援一套程式碼同時執行到百度小程式、微信小程式以及 H5 Web 端。
Mars 誕生於搜尋垂類產品對於小程式和 H5 Web 端相同的產品業務需求的場景下。從框架設計研發之初，就定位於解決小程式以及 H5 Web 端的複用和同構開發能力。Mars 來源於真實的業務場景和痛點，現在已經初步實現目標並將其開源，希望能解決大家的一些類似需求和問題，也希望傾聽大家的反饋。
2、又一個輪子？
隨著小程式生態的崛起，市面上各種小程式開發框架層出不窮，其中不乏基於 Vue 驅動的框架（如 mpvue、megalo 等），那麼 Mars 有何差異化呢？
a、Mars 支援了完整的原生自定義元件能力，相對於基於小程式模板能力的實現能支援更多的特性。
b、Mars 開發規範明確，其開發模式遵循 Vue 規範，基礎元件、API 規範遵循小程式規範。降低開發者學習成本的同時為多端適配提供了完整的規範支援。
c、Mars 提供了完整的 H5 Web 端適配解決方案，在框架、基礎元件及 API 上針對 H5 提供了極大程度的適配(包括 App 框架、路由、頁面轉場、生命週期、頁面方法及配置等)實現和打平，開發者只需在少數由於平臺差異無法適配的元件和 API 上進行較低成本的適配，即可完美執行在 H5 端（效果參見下方案例）。
d、效能優化。Mars 基於 Vue 的響應式系統實現了資料變更檢測，只有變化了的 data 和 computed 才會從 Vue 同步到小程式。
Mars 雖然是又一個小程式開發框架，但是對 H5 適配提供了強大的支援，主要是為了解決小程式 H5 端適配而誕生。Mars 非常適用於對小程式端和 H5 Web 端有同構開發需求的開發場景。
3、為什麼選擇 Vue 技術棧？
為什麼選擇 Vue 技術棧？主要是以下幾個考慮點：
a、搜尋垂類業務的技術棧是 Vue，選擇 Vue 技術棧能降低一些學習成本；
b、目前基於 Vue 的小程式框架還無法很好的解決 H5 端的同構開發的需求，而 React 技術棧已有 Taro 框架提供了 H5 端解決方案；
c、Vue 執行時提供了強大的資料驅動能力，Vue 的單檔案元件開發方式、模板語法具有很好的開發體驗，且易與小程式等平臺對接；其技術棧具備強大的生態、具有多端適配擴充套件能力和空間。
4、真的能完美適配 H5 嗎？
Mars 針對 H5 進行了最大程度的適配和體驗優化，可以看一下百度小程式和同構 H5 版本的兩個線上案例。達到案例中的體驗只需在少數由於平臺差異無法適配的元件和 API 上進行較低成本的適配，更多適配細節請檢視文件【多端適配】部分。
| 案例 | 百度智慧小程式 | H5 |
|---|---|---|
| 裝馨家 |
|
|
| 健康養生說 |
|
|
深入瞭解 Mars
設計思路
Mars 框架的設計思路是將跨多端的應用拆分為邏輯層和檢視層，邏輯層採用同一套核心執行時進行資料驅動以及生命週期管理，檢視層使用同一套模板語法，經過編譯轉換為特定平臺的檢視語言。
框架原理
考慮到學習成本、生態完善程度以及在多端上的擴充套件性、業務場景等原因，我們選擇了 Vue 技術棧，採用 Vue 單檔案元件和模板語法來書寫元件程式碼，引入標準基礎元件和 API 規範和標準生命週期規範。
在此開發規範之上，基於 Vue 的模板語法和基礎元件來構建檢視層，基於 Vue 資料驅動及標準生命週期規範來構建邏輯層，實現多端執行。框架總體原理圖如下：
特性
Vue 驅動
- 語法規範完全遵循 Vue
- Vue 特性在小程式端高度支援
H5 端完美體驗
- 小程式特性在 H5 端高度還原
- H5 Web 場景下細緻的體驗優化
現代化開發體驗
- 單檔案元件化開發
- CLI支援
- 自定義構建配置
H5 適配能力
Mars 在框架、基礎元件及 API 上針對 H5 提供了極大程度的適配，從而支援 H5 端低成本適配和良好的體驗。Taro 作為 React 技術棧多端開發的優秀框架，我們在 H5 適配設計上對其有所參考，也增加了一些特性的支援，目前 Mars 在 H5 端支援的配置和事件方法與 Taro 對比如下（Taro 支援度來自發稿時 Taro 官網）：
頁面
配置
| 配置屬性 | Mars | Taro | |
|---|---|---|---|
| navigationBarBackgroundColor | :heavy_check_mark: | :heavy_check_mark: | |
| navigationBarTextStyle | :heavy_check_mark: | :heavy_check_mark: | |
| navigationBarTitleText | :heavy_check_mark: | :heavy_check_mark: | |
| navigationStyle | ✘ | ✘ | |
| backgroundColor | :heavy_check_mark: | ✘ | |
| backgroundTextStyle | :heavy_check_mark: | ✘ | |
| enablePullDownRefresh | :heavy_check_mark: | ✘ | |
| onReachBottomDistance | :heavy_check_mark: | ✘ | |
| disableScroll | ✘ | ✘ |
頁面事件方法
| 頁面方法 | Mars | Taro | |
|---|---|---|---|
| onPullDownRefresh | :heavy_check_mark: | ✘ | |
| onReachBottom | :heavy_check_mark: | ✘ | |
| onPageScroll | :heavy_check_mark: | ✘ | |
| onTabItemTap | :heavy_check_mark: | ✘ | |
| onForceReLaunch | ✘ | ✘ | |
| onShareAppMessage | ✘ | ✘ |
基礎元件和 API
Mars 框架的基礎元件和 API 使用遵循小程式的元件和 API 定義與規範，請參考小程式文件。在小程式端及 Web 端的適配支援情況，請檢視文件【元件】和【API】部分。
多端適配
對於由於平臺差異無法適配的元件和 API，或者多端不同業務邏輯，Mars 框架提供以下適配方案。
1、JS
通過環境變數 process.env.MARS_ENV
if (process.env.MARS_ENV === 'h5') {
// 此程式碼塊裡的內容只渲染到h5端
// todo ...
}
else if (process.env.MARS_ENV === 'swan') {
// 此程式碼塊裡的內容只渲染到swan端
// todo ...
}
else if (process.env.MARS_ENV === 'wx') {
// 此程式碼塊裡的內容只渲染到wx端
// todo ...
}
複製程式碼
2、template
通過模板 <template-mars target="h5/swan/wx"></template-mars> 判斷
<template-mars target="h5" > ... </template-mars> <template-mars target="swan"> ... </template-mars> 複製程式碼
3、style
通過 <style target="h5/swan/wx"></style>
<style target="swan/wx"> // 此處的 style 只編譯到 swan/wx </style> <style target="h5"> // 此處的 style 只編譯到 H5 </style> 複製程式碼
如何跑起來
看到這裡，如果你已經想上手試試，可以這樣跑起來：
# 安裝 mars-cli npm install -g @marsjs/cli # 建立專案 mars create [projectName] # 可選項： # 是否支援 H5，如需支援 H5 請選擇：小程式和 H5 ? 選擇建立專案型別： (Use arrow keys) ❯ 小程式和 H5 僅小程式 # 啟動專案 (小程式需使用開發工具開啟對應的dist目錄，H5 直接訪問檢視) mars serve [--target, -t swan (預設) | wx | h5] 複製程式碼
想了解更多的框架介紹和開發指南，請移步:
- Mars 官網 max-team.github.io/Mars/
- Github github.com/max-team/Ma…