Mars - 又雙叒叕一個多端開發框架？此次是 Vue 驅動，能完美適配 H5

Mars 簡介

一、Mars 是什麼？

Mars 是由 Vue 驅動的多端開發框架，其語法規範徹底遵循 Vue，支持一套代碼同時運行到百度小程序、微信小程序以及 H5 Web 端。

Mars 誕生於搜索垂類產品對於小程序和 H5 Web 端相同的產品業務需求的場景下。從框架設計研發之初，就定位於解決小程序以及 H5 Web 端的複用和同構開發能力。Mars 來源於真實的業務場景和痛點，如今已經初步實現目標並將其開源，但願能解決你們的一些相似需求和問題，也但願傾聽你們的反饋。

二、又一個輪子？

隨着小程序生態的崛起，市面上各類小程序開發框架層出不窮，其中不乏基於 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 端有同構開發需求的開發場景。

三、爲何選擇 Vue 技術棧？

爲何選擇 Vue 技術棧？主要是如下幾個考慮點：

a、搜索垂類業務的技術棧是 Vue，選擇 Vue 技術棧能下降一些學習成本；

b、目前基於 Vue 的小程序框架還沒法很好的解決 H5 端的同構開發的需求，而 React 技術棧已有 Taro 框架提供了 H5 端解決方案；

c、Vue 運行時提供了強大的數據驅動能力，Vue 的單文件組件開發方式、模板語法具備很好的開發體驗，且易與小程序等平臺對接；其技術棧具有強大的生態、具備多端適配擴展能力和空間。

四、真的能完美適配 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	✔️	✔️
navigationBarTextStyle	✔️	✔️
navigationBarTitleText	✔️	✔️
navigationStyle	✘	✘
backgroundColor	✔️	✘
backgroundTextStyle	✔️	✘
enablePullDownRefresh	✔️	✘
onReachBottomDistance	✔️	✘
disableScroll	✘	✘

頁面事件方法

頁面方法	Mars	Taro
onPullDownRefresh	✔️	✘
onReachBottom	✔️	✘
onPageScroll	✔️	✘
onTabItemTap	✔️	✘
onForceReLaunch	✘	✘
onShareAppMessage	✘	✘

基礎組件和 API

Mars 框架的基礎組件和 API 使用遵循小程序的組件和 API 定義與規範，請參考小程序文檔。在小程序端及 Web 端的適配支持狀況，請查看文檔【組件】和【API】部分。

多端適配

對於因爲平臺差別沒法適配的組件和 API，或者多端不一樣業務邏輯，Mars 框架提供如下適配方案。

一、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 ...
}
複製代碼

二、template

經過模板<template-mars target="h5/swan/wx"></template-mars>判斷

<template-mars target="h5" >
    ...
</template-mars>

<template-mars target="swan">
    ...
</template-mars>
複製代碼

三、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]

複製代碼

想了解更多的框架介紹和開發指南，請移步:

• Github(歡迎關注和 Issue): github.com/max-team/Ma…
• Mars 官網: max-team.github.io/Mars/