前言：
隨著時代的發展，我們越來越多的感受到app不再是一個‘孤島’，而是圍繞app主要業務建立起了移動生態圈。移動8.0為客戶提供了從移動端、移動中臺服務、移動運營管理三大維度立體地打造企業自己移動生態圈的方案，而本文我們的關注點在於移動端維度是如何在移動生態大放異彩的。
目錄：
1、移動8.0移動端概述
2、移動8.0中微應用的實現方式
3、移動8.0中微應用的生命週期管理
4、展望
1.移動8.0移動端概述相信大家在日常生活中使用App的時候，都有這樣的體會，App的功能日益強大，我們不僅能從App中獲取到它提供的主要服務，往往還能在App中獲取到由它的主要業務衍生出來的眾多服務，而這些服務可能彼此相關，也可能相互獨立。
比如在門戶App中加入了請假、辦公、會議室、日程等功能，這些其實並不是一開始就固定在門戶App中的功能，而是基於每個使用者的資訊動態配置的上去的，根據後臺配置來控制消失、顯示，並且這些功能可以是由多廠商、多團隊提供的。
由此可見App的功能由單一變得複雜，這種改變並不是簡單的功能疊加，而是圍繞著應用主流業務的移動生態圈的構建，這其中我們需要解決不同團隊之間的差異化問題。
將眾多移動業務構建在一個穩定的移動生態圈中，是全面移動資訊化背景下的新趨勢，而這一理念的提出與實現可追溯到2016年微信生態中的微信小程式解決方案，到了2017年，風靡一時的微信‘跳一跳’小遊戲讓我們感受到小程式召之即來、麾之即去的無限魅力。
現在，隨著移動Mobile8.0的釋出，普元也有了自己的移動生態圈構建解決方案。
Mobile8.0移動端採用React Native的開發模式，利用了RN經濟高效的方式來構建和維護跨平臺，節省開發成本，相容了大量React Native生態中的三方元件，同時支援使用者自行整合三方元件，此外，Mobile8.0還相容了HTML5、Cordova等主流框架的整合，提供了跨生態的優勢。
Mobile8.0採用React Native技術作為客戶端跨平臺引擎，提供多Bundle的工程化支援，保障快速開發的同時，還能擁有良好使用者體驗。Mobile8.0構建的生態圈中業務聚合和管理的實現方式我們也將其稱之為微應用，相信很多人都早已聽說過，這其實並不是什麼新概念了，對應的便是微信生態中的微信小程式。
2.移動8.0中微應用的實現方式在Mobile8.0中，微應用是我們進行業務業務聚合及管理的最小粒度，本質上是一種開發、管理的模型，理論上微應用並不限定具體的開發語言和技術，只要實現了相應的微應用執行容器，我們就可以使用任何移動開發技術進行微應用的開發。
Mobile8.0微應用的藍圖中，平臺應支援的微應用型別包括以下幾個：
React-native微應用：使用React-native語言開發的微應用。原生微應用：使用iOS/Android原生言語開發的微應用。H5微應用：使用HTML5技術開發的微應用，常見的開發框架有Vue,React等,H5-微應用按載入方式，還可以分為線上H5微應用和離線H5微應用。Cordova微應用：使用Cordova技術開發的微應用。但是目前已釋出的普元Mobile8.0平臺中的微應用只支援HTML5一種實現方式，在後續的版本中我們還會加入由React Native、安卓/Ios原生等技術實現的微應用，從而更具市場競爭力。
為了使用者更快捷方便的開發微應用，Mobile8.0平臺還提供了一套微應用開發框架，其集成了當下熱門的Vue技術，並引入vant元件庫。
說完了微應用的實現技術，但是由H5構建的微應用又是如何執行在React Native中的呢？
這便要說到實現微應用的核心-微應用容器了，微應用容器是門戶應用也就是主應用能夠執行微應用的核心。門戶會根據微應用型別，使用對應的微應用容器會為每一個微應建立獨立的執行環境。如下圖所示：
H5微應用執行在H5容器中，H5容器根據平臺不同有著不同的實現。Android平臺使用其WebView，iOS上使用WKWebView。Android和iO在實現技術上雖略有不同，但其本質基本上是一樣的。我們以Android端的實現方式為例進行說明。
我們從程式碼層面能更直觀地分析門戶App與微應用的關係。Mobile8.0平臺下，在門戶App中開啟微應用相當簡單，只需要像下面的示例程式碼中直接呼叫SDK提供的介面並將微應用的相關引數傳遞過去，便能跳轉到對應微應用頁面中。如果你僅滿足於功能的開發，那麼會使用這個介面就可以了；但是如果你更關心Mobile8.0底層做了哪些工作、微應用的實現機制，就得順著它刨根問底了。
H5微應用執行在H5容器中，H5容器根據平臺不同有著不同的實現。Android平臺使用其WebView，iOS上使用WKWebView。Android和iO在實現技術上雖略有不同，但其本質基本上是一樣的。我們以Android端的實現方式為例進行說明。
我們從程式碼層面能更直觀地分析門戶App與微應用的關係。Mobile8.0平臺下，在門戶App中開啟微應用相當簡單，只需要像下面的示例程式碼中直接呼叫SDK提供的介面並將微應用的相關引數傳遞過去，便能跳轉到對應微應用頁面中。如果你僅滿足於功能的開發，那麼會使用這個介面就可以了；但是如果你更關心Mobile8.0底層做了哪些工作、微應用的實現機制，就得順著它刨根問底了。
primeton.app.openWebview({ url: item.h5Url, appId: item.microappId, subscribeKey: item.subscriptionKey, options: { showActionBar: true, actionBarColor: '#339FF4', autoTitle: true, needToken: true } })到這我們難免會好奇，openwebview介面做了什麼使我們能如此簡單就能使用微應用？
同樣的我們可以在原始碼中找到答案，openWebview介面其實只是Bundle中的一個函式，它的功能只是載入一個React Native頁面元件H5ViewComponent，並帶著引數跳轉到該頁面中。
primeton.app.openWebview = function(object){ var url = "H5ViewComponent.js"//載入H5頁面元件 var __selfRequire = require;var pageComponent = __selfRequire(url).pageComponent; _pmNavigator.push({//路由到該頁面 name: url, component: pageComponent, params: object });}跳轉到H5頁面元件後，便載入Native元件H5View，將引數進一步傳遞給該Native元件。這裡的H5View元件是我們實現跨平臺的關鍵，也是React Native與Android / iOS互動的橋樑。
export class pageComponent extends Component {... render() { return ( <View style={{ flex: 1 }}> <H5View url={this.state.url} showActionBar={this.state.showActionBar} autoTitle={this.state.autoTitle} actionBarColor={this.state.actionBarColor} title={this.state.title} needToken={this.state.needToken} ref="H5ViewRef" style={{ width: '100%', height: '100%'}}></H5View> </View> ); }}通過呼叫Native元件我們便可以與Android或iOS原生層實現的微應用容器打交道。以Android為例，在安卓平臺下我們使用Native元件H5View，實際上呼叫到的是由Android原生層封裝的H5View。
但這個Android的H5View就是所謂的微應用容器了嗎？
還不太準確，前面我們說到微應用容器在Android中是由webview實現的，而H5View是微應用容器的父容器。他們之間的關係如下圖所示：
除了微應用容器，H5View還包含了兩大模組，標題欄和底部選單欄。
標題欄負責微應用內的頁面導航，以及在關閉微應用時向主應用傳送關閉微應用通知事件。由於微應用是整合在React Native工程中的一個頁面元件，我們並不能在原生端主動關閉微應用，關閉事件是由React Native控制的，這裡我們用到了React Native的原生元件DeviceEventEmitter來新增微應用關閉事件的監聽。
webview是Android中微應用容器的具體實現，其內部封裝了瀏覽器的核心，是android系統提供的用來顯示網頁的元件。拿到門戶傳遞過來的引數後，webview通過載入微應用的url來開啟對應的H5微應用，並根據引數中的配置資訊將標題顯示在標題欄中。
以上便是Mobile8.0中微應用的實現方式，為了程式碼安全H5View元件的原始碼已被整合到jar檔案中，並且實際開發時也並不會直接與它接觸，這裡只是帶大家了解其實現機制。
3.移動8.0中微應用的生命週期管理
上面我們介紹了Mobile8.0中微應用的實現方式，簡單來說它是通過將Native元件放到一個H5ViewComponent元件中進行管理，從而實現微應用機制的。也就是說，只要我們能開發出對應的Native元件及底層實現，最終通過類似H5ViewComponent元件的容器進行管理，我們可以使用任何語言、任何技術開發微應用。
H5ViewComponent元件是由React Native程式碼編寫並放入bundle中，在使用時隱式呼叫，所以開發的時候並不會察覺到這個元件的存在。既然它是一個React Native元件，那麼它和普通的元件其實也並無二異，該具有的生命週期它也全有，接下來我們分析H5ViewComponent元件原始碼，窺探它在各個生命週期階段做了什麼。
在門戶App中呼叫primeton.app.openWebview開啟微應用，例項化H5ViewComponent元件並進入路由棧，微應用的生命週期由此開始。
H5ViewComponent元件的例項化階段我們通過defaultProps 為其設定預設屬性，如果呼叫openWebview時傳遞的引數為空，微應用容器將按下面配置載入微應用。
static defaultProps = { appId: '', url: '', options: { showActionBar: true, actionBarColor: '#5376AB', title: "我的頁面", autoTitle: true, needToken: false } }緊接著constructor將openwebview傳遞的引數裝配到state中，以便在執行期進行微應用引數的動態修改（但其實在H5實現的版本中，並沒有在執行期進行修改的情況）。
constructor(props) { super(props); this.state = { appId: this.props.appId, url: this.props.url, showActionBar: this.props.options.showActionBar, actionBarColor: this.props.options.actionBarColor, title: this.props.options.title, autoTitle: this.props.options.autoTitle, needToken: this.props.options.needToken }; page = this; }在componentWillMont中，我們添加了安卓物理返回鍵事件的監聽以及在Android/iOS原生層封裝的H5View關閉事件的監聽。這裡我們雖然使用的是componentWillMont，但這個生命週期並不推薦大家使用，因為React16.3版本以後componentWillMount及其他兩個生命週期函式就被標識為不安全的生命週期函式，在未來的版本中我們也會考慮將其遷移至componentDidMount裡去做這些事。
componentWillMount() { BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid); this.listener = DeviceEventEmitter.addListener('H5WebViewClose_Event', _H5WebViewClose); }第一次render後H5ViewComponent元件被掛載到DOM節點上，我們才真正的看到渲染出來的微應用介面。
在執行期間H5微應用沒有與門戶App資訊互動動態重新整理的過程，微應用的頁面跳轉也是在原生層進行的。當用戶關閉微應用時，原生層向React Native傳送關閉微應用事件通知，觸發關閉微應用事件並將H5ViewComponent移出路由棧，此時H5ViewComponent元件進入componentWillUnmount週期，即將從DOM節點樹解除安裝H5ViewComponent容器元件。
這一週期便是移除監聽事件，包括安卓物理返回和微應用關閉事件，避免不必要的錯誤。
componentWillUnmount() { BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid); // 移除監聽的關閉事件 if (this.listener) { this.listener.remove(); } }4.展望移動互聯在不經意間，已經正式邁入了第二個十年。第二個十年對於移動互聯來講，已經邁入到成熟期。野蠻的、高速的發展時期已經一去不復返，僅僅靠一個App就能成為高估值的公司的時代也已經不復存在，依託多團隊模型、讓更多的移動業務在生態中發展起來，全面推進企業移動資訊化，成為我們移動平臺建設的新目標。
關於作者：大撲稜魚，普元軟體產品部移動開發工程師，參與太保保險箱專案、移動8.0專案門戶App的開發，主要專注react native技術的運用，熟悉java及Android開發。