隨著手機(jī)的普及，移動(dòng)互聯(lián)網(wǎng)已經(jīng)成為了人們生活中不可或缺的一部分。為了更好地滿足用戶需要，越來(lái)越多的互聯(lián)網(wǎng)公司開(kāi)始開(kāi)發(fā)基于手機(jī)的H5頁(yè)面和APP。APP嵌套Vue做的H5，就是這樣一種結(jié)合了APP與H5頁(yè)面的新型應(yīng)用方式。
一、 什么是Vue
Vue是一款漸進(jìn)式JavaScript框架。作為Vue的核心，Vue的官方文檔為其定義為一款構(gòu)建用戶界面的漸進(jìn)式的框架。Vue.js的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的API實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。它相比于其他大型框架如AngularJS、React等更容易上手，學(xué)習(xí)曲線更加平緩，同時(shí)也更為輕量級(jí)。
二、 什么是APP嵌套Vue做的H5
在App開(kāi)發(fā)中，一個(gè)新的熱門(mén)方案是使用嵌入式H5。這種策略可以讓?xiě)?yīng)用程序使用Native的能力（如push notifications、定位服務(wù)等）。此時(shí)，APP依然是一個(gè)Native的應(yīng)用，但是它啟動(dòng)后會(huì)直接加載一個(gè)H5的首頁(yè)，子頁(yè)面也用H5來(lái)實(shí)現(xiàn)。
Vue作為一款常用的JavaScript框架，結(jié)合H5技術(shù)完全可以實(shí)現(xiàn)APP嵌套Vue做的H5。H5的技術(shù)優(yōu)點(diǎn)是支持跨平臺(tái)、前端實(shí)現(xiàn)等，而APP的技術(shù)優(yōu)點(diǎn)是原生編碼、能夠調(diào)用底層硬件（如拍照、打電話等）。在將APP嵌套Vue做的H5中，可以利用APP的能力，結(jié)合Vue的優(yōu)點(diǎn)，來(lái)實(shí)現(xiàn)更高效的移動(dòng)應(yīng)用。
三、APP嵌套Vue做的H5的原理
在實(shí)現(xiàn)APP嵌套Vue做的H5的過(guò)程中，需要采用WebView，這是一種基于WebKit引擎的跨平臺(tái)、支持多種編程語(yǔ)言、用于實(shí)現(xiàn)Web應(yīng)用程序運(yùn)行的組件。WebView類似于瀏覽器，但是它的用途是作為Native應(yīng)用的一部分來(lái)展示W(wǎng)eb內(nèi)容。
WebView提供的API可以被JavaScript腳本調(diào)用，并與原生應(yīng)用程序進(jìn)行通信。例如，JavaScript可以調(diào)用應(yīng)用程序的Java代碼，而Java代碼也可以回調(diào)JavaScript。這種協(xié)同工作多用于結(jié)合移動(dòng)端的提醒、推送、地理位置等硬件與APP深度交互的需求。而Vue和H5可以使用WebView來(lái)將H5代碼嵌入到Native應(yīng)用中，并與原生應(yīng)用進(jìn)行交互。
四、APP嵌套Vue做的H5的詳細(xì)介紹
1. Native應(yīng)用引入H5頁(yè)面
在Native應(yīng)用（如Android or iOS）的代碼中，可以包含WebView組件來(lái)引入H5頁(yè)面，通過(guò)xml創(chuàng)建webview，設(shè)置頁(yè)面參數(shù)，然后將webview添加到contentview中。
2. 加載和顯示Vue應(yīng)用
通過(guò)加載JavaScript文件，將Vue組件定義及一些其他資源資源文件加載到H5的WebView中，然后ViewModel去實(shí)例化相應(yīng)的Vue.
3. 實(shí)現(xiàn)Native與Vue的交互
Native和Vue之間需要實(shí)現(xiàn)雙向交互，Native去調(diào)用Vue，Vue回調(diào)Native。Android與iOS操作的方式不一致，所以在Vue方面需要提供兼容的API，同時(shí)還需要實(shí)現(xiàn)原生code的回調(diào)函數(shù)。通過(guò)不斷的交互，達(dá)到交互應(yīng)用的效果。
五、總結(jié)
APP嵌套Vue做的H5解決了Native開(kāi)發(fā)不能直接調(diào)用API的問(wèn)題，同時(shí)基于H5的開(kāi)發(fā)方式，在開(kāi)發(fā)效率方面也有很大的提高。但是需要注意的是，APP嵌套Vue做的H5在開(kāi)發(fā)過(guò)程中需要考慮到不能單純地將H5理解為Web頁(yè)面，它需要結(jié)合Native的各種能力，通過(guò)WebView將H5嵌入到Native中，并保證Native和H5的交互是無(wú)縫的。
