整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
人學(xué)習(xí)手機(jī) App 開(kāi)發(fā)，一開(kāi)始總要選擇一條學(xué)習(xí)路徑。
如果你熟悉 Java 語(yǔ)言，可以學(xué)習(xí)安卓開(kāi)發(fā)；如果熟悉腳本語(yǔ)言（比如 Python 或 Ruby），可以學(xué)習(xí) Swift 語(yǔ)言，進(jìn)行 iOS 開(kāi)發(fā)；如果像我一樣，比較熟悉 Web 網(wǎng)頁(yè)技術(shù)，那么 H5 開(kāi)發(fā)是最容易上手的。
這個(gè)系列教程的第一篇，已經(jīng)介紹過(guò)了手機(jī) App 的種類[1]。所謂的 H5 頁(yè)面，其實(shí)就是混合 App 的前端，外面是一個(gè)原生的殼，里面是 Web 網(wǎng)頁(yè)。本文緊接上一篇，介紹手機(jī) App 開(kāi)發(fā)的技術(shù)棧，尤其是跟 H5 開(kāi)發(fā)相關(guān)的技術(shù)。
本文由國(guó)內(nèi)最大的在線教育平臺(tái)之一“騰訊課堂”[2]贊助。他們現(xiàn)在啟動(dòng)了“騰訊課堂101計(jì)劃”[3]，推廣優(yōu)質(zhì)課程資源。希望學(xué)習(xí)和提高手機(jī) App 開(kāi)發(fā)技術(shù)的朋友，可以留意一下本文結(jié)尾的安卓課程信息。
手機(jī) App 的技術(shù)棧可以分成三類。
（1）原生 App 技術(shù)棧（native technology stack）
原生技術(shù)棧指的是，只能用于特定手機(jī)平臺(tái)的開(kāi)發(fā)技術(shù)。比如，安卓平臺(tái)的 Java 技術(shù)棧，iOS 平臺(tái)的 Object-C 技術(shù)棧或 Swift 技術(shù)棧。
這種技術(shù)棧只能用在一個(gè)平臺(tái)，不能跨平臺(tái)。
（2）混合 App 技術(shù)棧（hybrid technology stack）
混合技術(shù)棧指的是開(kāi)發(fā)混合 App 的技術(shù)，也就是把 Web 網(wǎng)頁(yè)放到特定的容器中，然后再打包成各個(gè)平臺(tái)的原生 App。所以，混合技術(shù)棧其實(shí)是 Web 技術(shù)棧 + 容器技術(shù)棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。
如果已經(jīng)掌握了 Web 技術(shù)，這個(gè)技術(shù)棧就主要學(xué)習(xí)容器提供的 API Bridge，網(wǎng)頁(yè)通過(guò)它們?nèi)フ{(diào)用底層硬件的 API。
（3）跨平臺(tái) App 技術(shù)棧（cross-platform technology stack）
跨平臺(tái)技術(shù)棧指的是使用一種技術(shù)，同時(shí)支持多個(gè)手機(jī)平臺(tái)。它與混合技術(shù)棧的區(qū)別是，不使用 Web 技術(shù)，即它的頁(yè)面不是 HTML5 頁(yè)面，而是使用自己的語(yǔ)法寫(xiě)的 UI 層，然后編譯成各平臺(tái)的原生 App。
這個(gè)技術(shù)棧就是純粹的容器技術(shù)棧，React Native、Xamarin、Flutter 都屬于這一類。學(xué)習(xí)時(shí)，除了學(xué)習(xí)容器的 API Bridge，還要學(xué)習(xí)容器提供的 UI 層，即怎么寫(xiě)頁(yè)面。
（4）小結(jié)
H5 開(kāi)發(fā)主要用在混合技術(shù)棧。但是，跨平臺(tái)技術(shù)棧的某些容器也會(huì)用到（比如 React Native），因?yàn)樗鼈兊?UI 層借鑒了 Web 模型。
另外，混合技術(shù)棧和跨平臺(tái)技術(shù)棧的基礎(chǔ)，都是原生技術(shù)棧，因?yàn)樽罱K都要編譯成原生App。所以，不管使用哪一種技術(shù)棧，多多少少要了解一些各平臺(tái)的原生技術(shù)。
下面就依次介紹上面三類技術(shù)棧，每個(gè)技術(shù)棧都會(huì)給出一個(gè)最簡(jiǎn)單的例子：加載網(wǎng)頁(yè)。通過(guò)各種技術(shù)棧加載網(wǎng)頁(yè)的不同做法，幫助大家理解它們的特點(diǎn)，對(duì) App 的技術(shù)實(shí)現(xiàn)有一個(gè)總體的認(rèn)識(shí)。
講解具體的技術(shù)棧之前，大家需要知道，不管什么技術(shù)，最終在 App 里面顯示網(wǎng)頁(yè)，一定需要一個(gè)網(wǎng)頁(yè)引擎，這樣才能解析網(wǎng)頁(yè)。
通常情況下，App 內(nèi)部會(huì)使用 WebView 控件作為網(wǎng)頁(yè)引擎。這是系統(tǒng)自帶的控件，專門(mén)用來(lái)顯示網(wǎng)頁(yè)。應(yīng)用程序的界面，只要放上 WebView，就好像內(nèi)嵌了瀏覽器窗口，可以顯示網(wǎng)頁(yè)。
不同的 App 技術(shù)棧要顯示網(wǎng)頁(yè)，區(qū)別僅僅在于怎么處理 WebView 這個(gè)原生控件。
?原生技術(shù)棧：需要開(kāi)發(fā)者自己把 WebView 控件放到頁(yè)面上。?混合技術(shù)棧：頁(yè)面本身就是網(wǎng)頁(yè)，默認(rèn)在 WebView 中顯示。?跨平臺(tái)技術(shù)棧：提供一個(gè) WebView 的語(yǔ)法，編譯的時(shí)候?qū)⑵鋼Q成原生的 WebView。
注意，不同系統(tǒng)的 WebView 控件名稱不一樣，安卓系統(tǒng)就叫 WebView，iOS 系統(tǒng)有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強(qiáng)弱。
原生技術(shù)棧分成 iOS 和安卓?jī)蓚€(gè)平臺(tái)。
簡(jiǎn)單說(shuō)，iOS 的原生技術(shù)棧就是使用 Object-C 語(yǔ)言或 Swift 語(yǔ)言，在 Xcode 開(kāi)發(fā)環(huán)境中編程。安卓的原生技術(shù)棧，則是使用 Java 語(yǔ)言或 Kotlin 語(yǔ)言，開(kāi)發(fā)環(huán)境是 Android Studio。
下面就來(lái)看看，它們?cè)趺醇虞d網(wǎng)頁(yè)。
iOS 開(kāi)發(fā)需要安裝 Xcode。它是一種集成開(kāi)發(fā)環(huán)境（IDE），也是蘋(píng)果公司指定的 iOS 官方開(kāi)發(fā)工具，所有蘋(píng)果手機(jī)的 App 都由它打包生成。
它可以在 Mac 電腦上通過(guò)應(yīng)用商店免費(fèi)安裝。注意，Xcode 只支持 Mac 系統(tǒng)，不支持其他系統(tǒng)。
安裝完成后，打開(kāi)新建一個(gè)項(xiàng)目，類型是單視圖 App，然后系統(tǒng)會(huì)詢問(wèn)一些項(xiàng)目參數(shù)和儲(chǔ)存位置，這里就不詳細(xì)說(shuō)明了。
然后，就進(jìn)入了開(kāi)發(fā)環(huán)境。
左側(cè)的目錄樹(shù)里面，找到ViewController.swifter文件，它負(fù)責(zé)視圖邏輯。按照官方文檔[4]，填入下面的代碼。
上面代碼的意思是，啟動(dòng) App 加載視圖的時(shí)候（loadView()），新建一個(gè) WebView 控件的實(shí)例。視圖加載成功后（viewDidLoad()），WebView 再去加載外部網(wǎng)頁(yè)（紅框部分）。
然后，就可以查看代碼運(yùn)行結(jié)果。點(diǎn)擊工具欄的運(yùn)行按鈕，Xcode 就會(huì)彈出一個(gè) iPhone 模擬器，里面就是當(dāng)前代碼的運(yùn)行結(jié)果。
如果一切正常，就可以讓 Xcode 對(duì)源碼打包，生成 App 的二進(jìn)制安裝文件。
安卓的官方開(kāi)發(fā)工具是 Android Studio，可以去官網(wǎng)[5]下載。
安裝完成后，打開(kāi)新建一個(gè)項(xiàng)目，類型是“Empty Activity”。
Android Studio 會(huì)詢問(wèn)項(xiàng)目參數(shù)，包括項(xiàng)目名稱、開(kāi)發(fā)語(yǔ)言（Java）等，然后就進(jìn)入了開(kāi)發(fā)環(huán)境。因?yàn)樗腔?Java IDE 修改的，懂 Java 的朋友應(yīng)該對(duì)這個(gè)界面比較熟悉。
按照網(wǎng)上的這篇教程[6]，接下來(lái)需要修改三個(gè)文件，其中最主要的是把MainActivity.java文件改成下面這樣。
上面紅框處的代碼，就是在頁(yè)面上添加并設(shè)置 WebView 實(shí)例，指定生成視圖的時(shí)候（onCreate()），WebView 實(shí)例去加載外部網(wǎng)頁(yè)。
運(yùn)行代碼之前，Android Studio 要求必須連接真機(jī)，或安裝安卓模擬器。完成以后后，在工具欄上點(diǎn)擊運(yùn)行按鈕，就可以運(yùn)行代碼查看效果了。
如果一切正常，就可以讓 Android Studio 打包，生成 App 的二進(jìn)制安裝文件。
上面的原生技術(shù)棧需要自己新建 WebView 實(shí)例，相比之下，混合技術(shù)棧就簡(jiǎn)單多了。因?yàn)轫?yè)面就是網(wǎng)頁(yè)，所以容器已經(jīng)設(shè)置好了 WebView，開(kāi)發(fā)者直接寫(xiě)頁(yè)面即可。
混合技術(shù)棧的各種容器框架之中，歷史最悠久是 PhoneGap[7]，誕生于2009年。后來(lái)在2011年被 Adobe 公司收購(gòu)，改名為 Adobe PhoneGap。
Adobe 公司將 PhoneGap 的核心代碼，后來(lái)都捐給了 Apache 基金會(huì)，作為一個(gè)全新的開(kāi)源項(xiàng)目，名為 Apache Cordova[8]。
PhoneGap 和 Cordova 現(xiàn)在是兩個(gè)獨(dú)立發(fā)展的開(kāi)源項(xiàng)目，但是彼此有密切的關(guān)系，可以簡(jiǎn)單理解成 Cordova 是 PhoneGap 的內(nèi)核，PhoneGap 是 Cordova 的發(fā)行版。
后來(lái)，其他人也開(kāi)始基于 Cordova 封裝自己的框架，所以市場(chǎng)上有許多基于 Cordova 的開(kāi)源框架，比較著名的有 Ionic[9]、Monaca[10]、Framework7[11]等。
所有這些框架的共同點(diǎn)，都是使用 Web 技術(shù)（HTML5 + CSS + JavaScript）開(kāi)發(fā)頁(yè)面，再由框架分別打包成 iOS 和安卓的 App 安裝包。它們的優(yōu)點(diǎn)是開(kāi)發(fā)簡(jiǎn)單、周期短、成本低，缺點(diǎn)是功能和性能都很有限。
基于 Cordova 的框架，用法都大同小異，下面就以 Ionic 為例，演示如何加載外部網(wǎng)頁(yè)。
首先，根據(jù)官方文檔[12]，生成項(xiàng)目的腳手架。
$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myApp
接著打開(kāi)src/pages/Home.tsx文件，插入<iframe>標(biāo)簽即可。
上面代碼中，由于頁(yè)面本身就是網(wǎng)頁(yè)，所以可以直接用<iframe>標(biāo)簽插入外部網(wǎng)頁(yè)。
然后，在本機(jī)起一個(gè) Web 服務(wù)，看看 Demo 的效果。
$ ionic serve上面命令會(huì)自動(dòng)打開(kāi)瀏覽器窗口，訪問(wèn)本機(jī)的8100端口，在瀏覽器中顯示網(wǎng)頁(yè)效果。
如果一切正常，在命令行窗口按 Ctrl+c，退出服務(wù)。編譯成 App 安裝包的方法可以參考官方文檔[13]。
上面的混合技術(shù)棧使用 HTML 語(yǔ)言編寫(xiě)頁(yè)面，再用 WebView 控件加載頁(yè)面，所以只寫(xiě)一次頁(yè)面，就能支持多個(gè)平臺(tái)。跨平臺(tái)技術(shù)棧也能做到多平臺(tái)支持，但是原理完全不同。
跨平臺(tái)技術(shù)棧的框架，都是使用自己的語(yǔ)法編寫(xiě)頁(yè)面，不使用 Web 技術(shù)，編譯的時(shí)候再將其轉(zhuǎn)為原生控件，或者使用自己的底層控件，生成原生 App。這樣就完全解決了 Web 頁(yè)面性能不佳的問(wèn)題。下面介紹三個(gè)這樣的框架。
?React Native: 使用 JavaScipt 語(yǔ)言編寫(xiě)頁(yè)面?Xamarin：使用 C# 語(yǔ)言編寫(xiě)頁(yè)面?Flutter：使用 Dart 語(yǔ)言編寫(xiě)頁(yè)面
（1）原理
2013年， Facebook 公司發(fā)布了 React 框架。這個(gè)框架是為網(wǎng)頁(yè)開(kāi)發(fā)設(shè)計(jì)的，核心思想是在網(wǎng)頁(yè)之上，建立一個(gè) UI 的抽象層，所有數(shù)據(jù)操作都在這個(gè)抽象層完成（即在內(nèi)存里面完成），然后再渲染成網(wǎng)頁(yè)的 DOM 結(jié)構(gòu)，這樣就提升了性能。
很快，工程師們就意識(shí)到了，UI 抽象層本質(zhì)上是一種數(shù)據(jù)結(jié)構(gòu)，與底層設(shè)備無(wú)關(guān)，不僅可以渲染成網(wǎng)頁(yè)，也可以渲染成手機(jī)的原生頁(yè)面。這樣的話，只要寫(xiě)一次 React 頁(yè)面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項(xiàng)目的由來(lái)。
注意，React Native 雖然也使用 JavaScript 語(yǔ)言，并且寫(xiě)法看上去像 Web 頁(yè)面，但其實(shí)所有控件都是自己定義的，編譯時(shí)再一一翻譯為對(duì)應(yīng)的原生控件。舉例來(lái)說(shuō)，React Native 的文本渲染控件是<Text>，翻譯成 iOS 控件為UIView，翻譯成安卓控件為TextView。這種做即保證了性能，又做到了跨平臺(tái)支持，所以一誕生就引起開(kāi)發(fā)者的關(guān)注，成了熱門(mén)技術(shù)。
還有一個(gè) NativeScript[14]框架，跟 React Native 很像，也是使用 JavaScript 語(yǔ)言，然后編譯成原生控件。不過(guò)，它的開(kāi)發(fā)模型是基于 Angular.js，而不是 React。
（2）實(shí)例
下面就是 React Native 加載外部網(wǎng)頁(yè)的實(shí)例。為了方便使用，官方團(tuán)隊(duì)提供了一個(gè)封裝好的工具集，叫做 Expo[15]。第一步，在手機(jī)安裝 Expo 的 App 客戶端（App Store[16]，Google Play[17]）。
然后，在命令行安裝腳手架工具expo-cli，新建一個(gè)示意項(xiàng)目。
$ npm install -g expo-cli$ expo init rnDemo
新建項(xiàng)目時(shí)，會(huì)要求你選擇項(xiàng)目模板，可以選minimum模板。然后，還會(huì)要求你填寫(xiě)項(xiàng)目描述displayName，這個(gè)可以隨便寫(xiě)。
然后，安裝 React Native 自己的 WebView 控件。
$ cd rnDemo$ npm install --save react-native-webview
接著，打開(kāi)主頁(yè)面的腳本文件App.js，將其改成下面的代碼。
上面代碼中，React Native 自身的WebView控件，編譯時(shí)會(huì)分別轉(zhuǎn)為 iOS 和安卓的原生 WebView 控件。
接下來(lái)，預(yù)覽頁(yè)面效果。可以先把它編譯成 Web 版，在瀏覽器預(yù)覽，這樣比較快，立刻就能看到效果。
$ npm run web運(yùn)行上面的命令，命令行會(huì)出現(xiàn)一個(gè)二維碼。
這時(shí)可以打開(kāi)手機(jī)端的 Expo 客戶端，掃描這個(gè)二維碼，就會(huì)顯示 App 的頁(yè)面。注意，計(jì)算機(jī)和手機(jī)必須在同一個(gè)局域網(wǎng)。
（3）React Native 的問(wèn)題
React Native 的想法雖然很美好，但是實(shí)際開(kāi)發(fā)中出現(xiàn)了各種各樣的問(wèn)題。
最主要的一個(gè)問(wèn)題是， UI 抽象層翻譯出來(lái)的 iOS 和安卓原生頁(yè)面，做不到完全一致，尤其是復(fù)雜頁(yè)面，樣式或功能存在差異。編譯出來(lái)兩個(gè)平臺(tái)的原生 App 往往是一個(gè)正常，另一個(gè)會(huì)出現(xiàn)各種奇怪的小毛病。React Native 的底層還是沒(méi)有做到無(wú)縫適配，它至今沒(méi)有發(fā)布 1.0 版（2019年底是 0.61 版），這多多少少也說(shuō)明了一些問(wèn)題。
如果你想用 React Native 做到 iOS 和安卓體驗(yàn)一致，并且充分發(fā)揮原生控件的功能，就需要同時(shí)熟悉 React Native、iOS、安卓三個(gè)平臺(tái)，這對(duì)開(kāi)發(fā)者的要求實(shí)在太高了。Airbnb 公司在使用 React Native 兩年后，宣布放棄，改用原生技術(shù)棧。他們寫(xiě)了一篇很長(zhǎng)的文章[18]，解釋為什么這么做，React Native 到底有什么問(wèn)題，大家可以參考那篇文章。
Xamarin 是微軟公司的跨平臺(tái) App 開(kāi)發(fā)框架，原理跟 React Native 很相似，只不過(guò)它的語(yǔ)言是 C#。
它的使用需要 Visual Studio，這里就不舉例了。根據(jù)官方文檔[19]，WebView 的用法如下。
上面代碼中，首先新建了一個(gè) WebView 控件的實(shí)例，然后把這個(gè)實(shí)例放到布局上，跟原生 App 的語(yǔ)法很像。
Flutter[20]是谷歌公司最新的跨平臺(tái)開(kāi)發(fā)框架。它為了解決 React Native 的平臺(tái)差異問(wèn)題，采用了一個(gè)完全不同的方案。
它自己實(shí)現(xiàn)了一套控件。打包的時(shí)候，會(huì)把這套控件打包進(jìn)每一個(gè) App，因此不存在調(diào)用原生控件的問(wèn)題。不管什么平臺(tái)，都調(diào)用內(nèi)嵌的自己那套控件，就能做到 iOS 和安卓體驗(yàn)完全一致。
Flutter 歷史還不長(zhǎng)，應(yīng)用還不廣泛，API 也沒(méi)穩(wěn)定下來(lái)。但是很值得關(guān)注。
加載外部網(wǎng)頁(yè)的實(shí)例，可以參考 Flutter 官方團(tuán)隊(duì)的這篇文章[21]。核心代碼如下：
上面代碼使用的是 Dart 語(yǔ)言。它是 Flutter 的官方語(yǔ)言，接近 JavaScript 語(yǔ)法，但是多了靜態(tài)類型支持。
通過(guò)上面的介紹，希望大家已經(jīng)了解了各種技術(shù)棧的特點(diǎn)。
（1）原生技術(shù)棧的技能和體驗(yàn)最好，對(duì)于復(fù)雜的大型 App，如果條件允許，應(yīng)該采用這種方式開(kāi)發(fā)。
（2）混合技術(shù)棧的成本低，靈活性好，對(duì)性能要求不高的簡(jiǎn)單 App，尤其是純展示性的頁(yè)面，可以采用這種方式開(kāi)發(fā)。
（3）跨平臺(tái)技術(shù)棧適用于，存在外部或內(nèi)部條件的限制，只有一個(gè)團(tuán)隊(duì)開(kāi)發(fā)跨平臺(tái) App 的情況。
（正文完）
手機(jī) App 的 UI（用戶界面），往往是 App 成功的關(guān)鍵因素：產(chǎn)品的外觀是否漂亮，點(diǎn)擊和滑動(dòng)是否流暢，意圖是否清晰，都會(huì)影響到用戶的留存率。一個(gè)好的 UI 不僅體現(xiàn)了產(chǎn)品經(jīng)理和開(kāi)發(fā)者的素質(zhì)，還可以有效降低拉新成本。
一般的開(kāi)發(fā)者接到產(chǎn)品的 UI 設(shè)計(jì)方案之后，可能就會(huì)去網(wǎng)上找類似的效果，看看有沒(méi)有開(kāi)源代碼。但是，優(yōu)秀的開(kāi)發(fā)者會(huì)努力思考，如何通過(guò)完全自定義來(lái)實(shí)現(xiàn)這個(gè)效果，做到功能和性能的最佳狀態(tài)。
這就要求開(kāi)發(fā)者具有實(shí)現(xiàn)高級(jí) UI 的開(kāi)發(fā)能力，理解安卓 UI 的底層實(shí)現(xiàn)原理，比如自定義 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互設(shè)計(jì)（touch事件）。
怎樣才能高效地學(xué)習(xí)安卓高級(jí) UI 開(kāi)發(fā)，早日進(jìn)階成為高級(jí)安卓工程師呢？這里介紹享學(xué)課堂的一門(mén)課程 《高級(jí)安卓 UI ——自定義 ViewGroup 與 UI 性能優(yōu)化》，它帶大家一行一行代碼去實(shí)現(xiàn)一個(gè)京東自定義ViewGroup，研究系統(tǒng)的FrameLayout與ViewPager的源碼，最后通過(guò)閱讀源碼，分析ViewPager設(shè)計(jì)過(guò)程中的顯示問(wèn)題和性能問(wèn)題。下圖是課程介紹（點(diǎn)擊看大圖）。
這個(gè)課程是直播課程，在線實(shí)時(shí)答疑，特別邀請(qǐng)了 Alvin 老師（前三星/小米高級(jí)研發(fā)經(jīng)理）主講，只需要0.1元就能參與。聽(tīng)課之后覺(jué)得滿意，還可以學(xué)習(xí)其他 Android 高級(jí)進(jìn)階的實(shí)戰(zhàn)課程。
（完）
[1]手機(jī) App 的種類:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html
[2]“騰訊課堂”:https://ke.qq.com/
[3]“騰訊課堂101計(jì)劃”:https://edu.qq.com/a/20190119/005414.htm
[4]官方文檔:https://developer.apple.com/documentation/webkit/wkwebview
[5]官網(wǎng):https://developer.android.com/studio
[6]這篇教程:https://codingislove.com/android-web-view/
[7]PhoneGap:https://phonegap.com/
[8]Apache Cordova:https://cordova.apache.org/
[9]Ionic:https://ionicframework.com/
[10]Monaca:https://monaca.io/
[11]Framework7:https://framework7.io/
[12]官方文檔:https://ionicframework.com/docs/react/your-first-app
[13]官方文檔:https://ionicframework.com/docs/react/your-first-app#build-a-native-app
[14]NativeScript:https://www.nativescript.org/
[15]Expo:https://expo.io/
[16]App Store:https://itunes.apple.com/app/apple-store/id982107779
[17]Google Play:https://play.google.com/store/apps/details?id=host.exp.exponent
[18]很長(zhǎng)的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
[19]官方文檔:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms
[20]Flutter:https://flutter.dev/
[21]這篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2
eruda和vConsole是兩個(gè)針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。讓移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)調(diào)試變得更加簡(jiǎn)便，前端開(kāi)發(fā)者都知道在PC端瀏覽器調(diào)試非常方便，可以隨時(shí)查看調(diào)試信息等，而移動(dòng)端就沒(méi)這么方便了。因此eruda和vConsole也就孕育而生！eruda和vConsole是兩個(gè)不同的產(chǎn)品，本文分別來(lái)介紹它們！
https://github.com/liriliri/eruda
https://github.com/Tencent/vConsole
Eruda 是一個(gè)專為手機(jī)網(wǎng)頁(yè)前端設(shè)計(jì)的調(diào)試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、捕獲XHR請(qǐng)求、顯示本地存儲(chǔ)和 Cookie 信息等等。
通過(guò)CDN使用或者通過(guò)npm安裝：
npm install eruda --save
在頁(yè)面中加載腳本：
<script src="node_modules/eruda/eruda.min.js"></script> <script>eruda.init();</script>
Js文件對(duì)于移動(dòng)端來(lái)說(shuō)略重（gzip后大概100kb）。建議通過(guò)url參數(shù)來(lái)控制是否加載調(diào)試器，比如：
;(function () {
var src = 'node_modules/eruda/eruda.min.js';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
初始化時(shí)可以傳入配置：
let el = document.createElement('div');
document.body.appendChild(el);
eruda.init({
container: el,
tool: ['console', 'elements'],
useShadowDom: true
});
插件
如果你想要自己編寫(xiě)插件，可以查看Github提供的教程
vConsole是由騰訊出品的一個(gè)輕量、可拓展、針對(duì)手機(jī)網(wǎng)頁(yè)的前端開(kāi)發(fā)者調(diào)試面板。
特性:
安裝使用:
使用 npm 安裝：
npm install vconsole
引入 dist/vconsole.min.js 到項(xiàng)目中：
<script src="path/to/vconsole.min.js"></script>
<script>
// 初始化
var vConsole = new VConsole();
console.log('Hello world');
</script>
對(duì)于 TypeScript，可引入 d.ts 文件：
import 'path/to/vconsole.min.d.ts';
PS:你還可以編寫(xiě)自己的插件,具體的詳細(xì)文檔可查閱Github
eruda和vConsole都是移動(dòng)瀏覽器端網(wǎng)頁(yè)調(diào)試的調(diào)試?yán)?更加方便準(zhǔn)確的調(diào)試移動(dòng)端,尤其是在APP內(nèi)置的webView上加載我們的頁(yè)面，想要查看手機(jī)瀏覽器信息是非常不容易的一件事情,有了它們,這些問(wèn)題都將不復(fù)存在,有需要的朋友不要錯(cuò)過(guò),Enjoy it!
誼Shawn
本文使用安卓自帶的webview嵌入app內(nèi)，將app的UI全都交給webview。這樣可以使用HTML+CSS+JS來(lái)開(kāi)發(fā)app。配置好環(huán)境后，前端程序員只需要半個(gè)小時(shí)就能開(kāi)發(fā)一款簡(jiǎn)單的安卓應(yīng)用。
準(zhǔn)備環(huán)境
由于安卓官方網(wǎng)站需要fq，可以訪問(wèn)這個(gè)網(wǎng)站下載Android Studio和sdk:http://www.androiddevtools.cn/
在以下位置下載Android Studio：
安裝完畢后按照網(wǎng)站提供的網(wǎng)址設(shè)置SDK代理，以方便下載SDK和虛擬機(jī)。
創(chuàng)建項(xiàng)目
新建一個(gè)項(xiàng)目，可以不用修改設(shè)置，一路下一步。
創(chuàng)建好項(xiàng)目后，在main文件夾里添加assets文件夾，里面可以放置本地html文件。
如圖，我在里面放置了shop.html文件用以加載。
Ctrl+鼠標(biāo)左鍵點(diǎn)擊紅色區(qū)域打開(kāi)xml布局文件，在布局文件里輸入：
然后回到j(luò)ava文件，輸入：
讓webview加載本地文件。
也可以加載遠(yuǎn)程URL,如webView.loadUrl("http://192.168.0.105:8080/support/template/shopping.html");這樣就完成了，是不是很簡(jiǎn)單？
運(yùn)行APP
點(diǎn)擊播放按鈕運(yùn)行，選擇虛擬機(jī)，如果第一次啟動(dòng)需要配置虛擬機(jī)。
虛擬機(jī)啟動(dòng)后效果
如果app沒(méi)有自動(dòng)運(yùn)行，再次點(diǎn)擊播放按鈕，此時(shí)app就啟動(dòng)了。以下內(nèi)容是shop.html渲染后的UI。
手機(jī)端網(wǎng)頁(yè)的開(kāi)發(fā)建議使用BootStrap框架
總結(jié)
通過(guò)此種方式，前端程序員可以幾乎不了解java和Android而能夠快速地開(kāi)發(fā)簡(jiǎn)單的安卓APP.另外Javascript和Java代碼可以相互調(diào)用，為更復(fù)雜的應(yīng)用提供了可能性。據(jù)說(shuō)顏值高的伙伴都點(diǎn)了關(guān)注。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
