用WEB技術棧開發NATIVE應用（二）：WEEX 前端SDK原理詳解

ls0609 發布于2019-08-22 15:00 / 1228人閱讀

摘要：依舊采取傳統的開發技術棧進行開發，同時在終端的運行體驗不輸。首先來看下前端開發框架目前與構成了三大最流行的前端開發框架，具有組件化以及三大特性，還學習的，引入了狀態管理模塊。

摘要： WEEX依舊采取傳統的web開發技術棧進行開發，同時app在終端的運行體驗不輸native app。其同時解決了開發效率、發版速度以及用戶體驗三個核心問題。那么WEEX是如何實現的？目前WEEX已經完全開源，并捐給Apache基金會，我們可以通過分析其源碼來一探究竟。

點此查看原文：http://click.aliyun.com/m/43048/

作者：阿里-移動云-大前端團隊

傳統的移動端開發，一個完整的業務需要維護三份終端代碼：Android、iOS、H5，這帶來了極大的開發成本以及維護成本。尤其是對處于業務初創期需要快速試錯的業務以及需要支持定期運營活動的業務。所以業界也一直在探索跨平臺方案，旨在通過一套代碼完成各個終端的業務邏輯。相關方案經過不斷演化，從早期的H5、Hybrid到如今的Cloud Native(云原生)，在開發效率和用戶體驗上都在一點點逼近最初的設想。

早期H5和Hybrid方案的核心是利用終端的內置瀏覽器（webview）功能，通過開發web應用滿足跨平臺需求。該方案可以解決跨平臺問題，同時可以提升發版效率。但其最大的弊端在于用戶體驗相較于native開發的app存在較大差距，經常出現頁面卡頓，加載慢等問題。

于是后來業界開始探索依舊利用web技術棧開發出媲美原生體驗app的方案，于是以WEEX為代表云原生開發框架開始出現。所謂云原生(Cloud Native)指可以通過云端快速發布（與遠程web應用發布流程類似），同時還可以達到媲美原生App體驗的方案。WEEX依舊采取傳統的web開發技術棧進行開發，同時app在終端的運行體驗不輸native app。其同時解決了開發效率、發版速度以及用戶體驗三個核心問題。那么WEEX是如何實現的？目前WEEX已經完全開源，并捐給Apache基金會，我們可以通過分析其源碼來一探究竟。

WEEX框架主要分為兩部分：

1.前端JavaScript框架
2.Native SDK

在上一篇博客中，我們介紹了Native SDK的原理，本文主要介紹其前端JavaScript框架原理。

1 整體架構
首先還是再來看下WEEX開發的整體架構：

可以看到在JS-Native Bridge將渲染指令發送給Android或者iOS渲染引擎之前，我們的業務代碼運行在JSCore/v8的執行引擎之中，而在該執行引擎之中除了執行業務JSBundle，還運行著JS Framework，JS Framework不僅提供了jsbundle必要的運行時環境，同時還提供了與native通信的接口。

而這個JS Framework就是我們今天介紹的重點。

這是前端框架的主要架構：

FRONTEND FRAMEWORK/DSL:這是WEEX的開發框架，目前WEEX主要是使用Vue.js進行開發
WEEX-VUE-LOADER：前端編譯器，將vue文件編譯成es5代碼
WEEX-VUE-FRAMWORK：WEEX核心框架，主要負責將virtual dom轉換成weex的native dom api
WEEX-RUNTIME:負責與native渲染引擎對接，將native dom api轉換成對應平臺（Android、iOS）的platform api,然后傳遞給native渲染引擎，由后者負責渲染工作。

2 Vue.js

首先來看下前端開發框架Vue.js,Vue.js目前與React 、 Angular構成了三大最流行的前端開發框架，Vue.js具有組件化、virtual dom以及MVVM三大特性，還學習React的Redux，引入了狀態管理模塊Vuex。同時相比起React主要基于JSX，Vue.js的開發模式更加清晰，簡單，上手速度更快。.vue 文件通常可以分為三部分：

GPU云服務器云服務器 web前端開發用什么語言用angularjs開發下一代web應用 android應用開發詳解 python開發技術詳解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93084.html

用WEB技術棧開發NATIVE應用：WEEX SDK原理詳解

摘要：于是后來業界開始探索依舊利用技術棧開發出媲美原生體驗的方案，于是以為代表云原生開發框架開始出現。依舊采取傳統的開發技術棧進行開發，同時在終端的運行體驗不輸。其同時解決了開發效率發版速度以及用戶體驗三個核心問題。摘要： WEEX依舊采取傳統的web開發技術棧進行開發，同時app在終端的運行體驗不輸native app。其同時解決了開發效率、發版速度以及用戶體驗三個核心問題。那么WEEX...

nanfeiyan 2019-06-24 17:56 評論0 收藏0
開源中國專訪：Chameleon原理首發，其它跨多端統一框架都是假的？

摘要：中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示，截至年月，我國網民規模達億人，微信月活億支付寶月活億百度月活億另一方面，中國手機占智能手機整體的比例超過，月活約億。在年末正式發布了面向未來的跨端的。開源中國專訪：Chameleon原理首發，其它跨多端統一框架都是假的？原創：嘉賓-張楠開源中國以往我們說某一功能跨多端，往往是指在諸如 PC、移動等不同類型的設備之...

GraphQuery 2019-08-23 15:29 評論0 收藏0