跨端方案背景

一

1

起因

由于客戶端Webview內嵌H5的各種受限，例如性能差、JS執行效率低以及伴隨著大量的機型兼容問題，于是有了各種混合跨端開發解決方案：Hybrid、React-Native、Weex、Flutter、小程序、快應用等。

2

優勢

我們知道各大應用市場對于app的發版都有規定的周期，常常各種端內需求需要集中在某一固定時間進行發版，而跨端方案可以隨時發版，不受應用市場的審核限制，然而這有一個前提，開發者所運用的解決方案所對應的Native(端內原生開發)的功能都已完備，且幾乎具有與Native一樣的能力，例如拍照、上傳等。

3

劣勢

目前市面上大量的跨端解決方案很難達到傳統Web開發語言的能力，例如組件方面僅提供了部分內置組件，暫不能支持所有html規范；樣式能力對于不同的客戶端也會出現一定的差異。總之在降低開發成本和提升效率的同時也帶來了無數細小的坑。

筆者作為剛開始應用Weex的小白以Weex為例跟大家分享一下自己理解的跨端方案。

WEEX

二

1

簡介

“Weex致力于使開發者能基于通用跨平臺的Web開發語言和開發經驗，來構建Android、iOS和Web應用。在集成WeexSDK之后，可以使用JavaScript語言和前端開發經驗來開發移動應用。”目前Vue.js和Rax這兩個前端框架被廣泛應用于Weex頁面開發。致力于將流行的Web開發技術與原生開發技術結合，在開發階段：一個Weex頁面就像開發一個普通網頁一樣；在運行時：Weex又充分利用了各種操作系統的原生組件和能力。

2

組件能力

Weex提供了一套基礎的內置組件，例如

為傳統的塊級元素，文本則必須用組件才能進行渲染，區別于標簽，weex則采用塊級組件進行代替。

在框架內容，Weex使用原生組件進行渲染，這一點極大的提升了各種平臺、系統、機型的兼容性，但正是因為原生組件，在不同平臺上會產生一定的視覺差異，例如組件在不同平臺的渲染效果有所差異。

3

模塊能力

通常通過 weex.requireModule("xxx")來引入相應的模塊，引入之后便可以調用該模塊提供的各種方法，Weex提供了網絡請求、動畫、導航、存儲等內置模塊。

除了內置模塊，Weex同時也支持端內封裝自定義模塊提供前端調用，利用JSBridge將JS與Native聯系起來。

4

JS與Native之間的通信原理

假設我們現在要在Weex頁面實現一個拍照功能，對于前端來說，只需要調用Native提供的API即可，使開發者可以在weex頁面內調用端內原生的拍照功能，而JSBridge便是Native能提供給API給JS調用的答案。簡單來說，JSBridge就是JS與Native之間的橋梁，讓兩者能夠互相調用

以android為例，其核心原理為：(以下代碼源自Github：https://github.com/lzyzsd/JsBridge)

native端注冊函數供Javascript調用：

// 下面webview是一個自定義的WebView，繼承Android原生的WebView對象webView.registerHandler("submitFromWeb", new BridgeHandler() {@Overridepublic void handler(String data, CallBackFunction function) {Log.i(TAG, "handler = submitFromWeb, data from web = " + data);function.onCallBack("submitFromWeb exe, response data from Java");}});

上述則表明了，在Android端注冊了一個名為submitFromWeb的函數供Javascript調用，handler為具體的執行內容。String類型的data是JavaScript端調用時傳過來的參數，CallBackFunction類型的function是用來將執行的結果回傳給JavaScript。

JavaScript調用native端提供的函數

// WebViewJavascriptBridge是提前注入的一個全局變量用于javascript調用native提供的函數WebViewJavascriptBridge.callHandler('submitFromWeb',{'param': str},// 調用native函數成功后的回調函數function callback(responseData){document.getElementById("show").innerHTML = "send get responseData from java, data = " + responseData});

上述表明JS通過提前注入的WebViewJavascriptBridge對象調用native端提供的submitFromWeb函數，傳遞的參數為{'param':str}，調用結束后會回調callback函數。

應用

三

對于一般的app應用少不了網絡請求，因此筆者從網絡請求為例，簡單分享一下應用案例。

在Weex中提供了stram模塊來完成基本的網絡請求能力，例如GET、POST請求等，用于在組件的生命周期內與服務端進行交互。

API

fetch(options, callback, progressCallback)

options為請求配置項，包括Http請求方法、url、header、body、type等，callback為響應回調，包括狀態碼，響應數據等。

引入

var stream = weex.requireModule("stream");

請求封裝

對于一個長期維護的端內項目通常需要有一個低耦合的接口請求封裝函數，通常大部分請求參數需要帶上用戶的token信息、地理位置信息等，因此我們可以通過端內封裝的JSBridge直接獲取已經在端內登錄的用戶信息，地理信息同理。獲取這些信息之后再利用Promise.all()來處理最終的業務請求。

requestAgent(obj, isService = false) {var userLocationInfoPromise = new Promise(function (resolve, reject){bridge.getLocationInfo((data) => {resolve(data)});});var userInfoPromise = new Promise(function (resolve, reject){bridge.getUserInfo((data) => {resolve(data)});});Promise.all([userLocationInfoPromise, userInfoPromise]).then((items) => {var userLocationInfo = items[0];var userInfo = items[1];var method = obj.methodswitch (method) {case "GET":break;case "POST":break;}stream.fetch(options, ret => {if (!ret.ok) {obj.fail(ret.statusText)return}var bizRet = ret.dataif (bizRet.errno != 0) {obj.fail(bizRet.errmsg,bizRet.errno);} else {obj.success(bizRet.data);}});});},

調用示例

requestAgent({method: 'POST/GET',path: '/api/donut/uploadResource',headers: { "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", },body: obj.body,type: 'json',rawBody: raw,params: {key: value} //根據 GET 和 POST 自動放在 query 或 bodysuccess: function,fail: function});

上面的代碼我們可以看到，這樣的接口請求封裝不僅僅用到了weex的內置模塊stream，同樣也運用到了自定義模塊bridge，通過bridge模塊便可以實現JS與Native的通信，去獲取當前用戶的登錄信息和地理信息；避免在每個請求中都插入這些信息的請求函數，同樣也避免了定義冗余變量去存儲這些信息，也達到了降低耦合的效果。

WEEX跨端方案總結

四

前端頁面原生渲染，增強前端頁面體驗

一次開發支持多端(Android、iOS、H5)運行

頁面更新不依賴版本發布，提升迭代發布效率

單頁面開發能力強大

如果嘗試利用Weex獨立開發App比較困難，它的Native能力并沒有ReactNative那樣強大且全面，Weex更注重Web的開發體驗，強調像開發Web網頁一樣開發跨平臺APP頁面，官方也較推薦Weex和Native混合開發方式開發App，即將Weex作為一個組件融入到Native App中，替換傳統的Hybrid模式。

因此我們可以大膽猜測，類似上面的這樣一個頁面，底部導航可以利用Native進行維護，以達到更多機型的兼容，中間的Feed流部分可以選擇用Weex進行維護，可以根據業務需求在feed中插入相應的模塊需求(聚劃算、百億補貼…)，而對于每個feed item的落地頁，如果在不復雜的情況下完全可以利用H5進行維護。雖然看似同一個app運用了多種解決方案，但這樣便把不同的業務模塊根據規模和需求隔離開，交給不同的人員進行維護迭代，進一步提升開發迭代效率。

總的來說，weex是一套很好的跨端解決方案。雖然有很多細節不支持，但總體上提升了移動端的開發效率。

總結

以上是生活随笔為你收集整理的java程序编六角星_跨平台移动端解决方案—Weex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。