整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
人學習手機 App 開發，一開始總要選擇一條學習路徑。
如果你熟悉 Java 語言，可以學習安卓開發；如果熟悉腳本語言（比如 Python 或 Ruby），可以學習 Swift 語言，進行 iOS 開發；如果像我一樣，比較熟悉 Web 網頁技術，那么 H5 開發是最容易上手的。
這個系列教程的第一篇，已經介紹過了手機 App 的種類[1]。所謂的 H5 頁面，其實就是混合 App 的前端，外面是一個原生的殼，里面是 Web 網頁。本文緊接上一篇，介紹手機 App 開發的技術棧，尤其是跟 H5 開發相關的技術。
本文由國內最大的在線教育平臺之一“騰訊課堂”[2]贊助。他們現在啟動了“騰訊課堂101計劃”[3]，推廣優質課程資源。希望學習和提高手機 App 開發技術的朋友，可以留意一下本文結尾的安卓課程信息。
手機 App 的技術棧可以分成三類。
（1）原生 App 技術棧（native technology stack）
原生技術棧指的是，只能用于特定手機平臺的開發技術。比如，安卓平臺的 Java 技術棧，iOS 平臺的 Object-C 技術棧或 Swift 技術棧。
這種技術棧只能用在一個平臺，不能跨平臺。
（2）混合 App 技術棧（hybrid technology stack）
混合技術棧指的是開發混合 App 的技術，也就是把 Web 網頁放到特定的容器中，然后再打包成各個平臺的原生 App。所以，混合技術棧其實是 Web 技術棧 + 容器技術棧，典型代表是 PhoneGap、Cordova、Ionic 等框架。
如果已經掌握了 Web 技術，這個技術棧就主要學習容器提供的 API Bridge，網頁通過它們去調用底層硬件的 API。
（3）跨平臺 App 技術棧（cross-platform technology stack）
跨平臺技術棧指的是使用一種技術，同時支持多個手機平臺。它與混合技術棧的區別是，不使用 Web 技術，即它的頁面不是 HTML5 頁面，而是使用自己的語法寫的 UI 層，然后編譯成各平臺的原生 App。
這個技術棧就是純粹的容器技術棧，React Native、Xamarin、Flutter 都屬于這一類。學習時，除了學習容器的 API Bridge，還要學習容器提供的 UI 層，即怎么寫頁面。
（4）小結
H5 開發主要用在混合技術棧。但是，跨平臺技術棧的某些容器也會用到（比如 React Native），因為它們的 UI 層借鑒了 Web 模型。
另外，混合技術棧和跨平臺技術棧的基礎，都是原生技術棧，因為最終都要編譯成原生App。所以，不管使用哪一種技術棧，多多少少要了解一些各平臺的原生技術。
下面就依次介紹上面三類技術棧，每個技術棧都會給出一個最簡單的例子：加載網頁。通過各種技術棧加載網頁的不同做法，幫助大家理解它們的特點，對 App 的技術實現有一個總體的認識。
講解具體的技術棧之前，大家需要知道，不管什么技術，最終在 App 里面顯示網頁，一定需要一個網頁引擎，這樣才能解析網頁。
通常情況下，App 內部會使用 WebView 控件作為網頁引擎。這是系統自帶的控件，專門用來顯示網頁。應用程序的界面，只要放上 WebView，就好像內嵌了瀏覽器窗口，可以顯示網頁。
不同的 App 技術棧要顯示網頁，區別僅僅在于怎么處理 WebView 這個原生控件。
?原生技術棧：需要開發者自己把 WebView 控件放到頁面上。?混合技術棧：頁面本身就是網頁，默認在 WebView 中顯示。?跨平臺技術棧：提供一個 WebView 的語法，編譯的時候將其換成原生的 WebView。
注意，不同系統的 WebView 控件名稱不一樣，安卓系統就叫 WebView，iOS 系統有較老的 UIWebView，也有較新的 WKWebView，作用都是一樣的，差異在于功能的強弱。
原生技術棧分成 iOS 和安卓兩個平臺。
簡單說，iOS 的原生技術棧就是使用 Object-C 語言或 Swift 語言，在 Xcode 開發環境中編程。安卓的原生技術棧，則是使用 Java 語言或 Kotlin 語言，開發環境是 Android Studio。
下面就來看看，它們怎么加載網頁。
iOS 開發需要安裝 Xcode。它是一種集成開發環境（IDE），也是蘋果公司指定的 iOS 官方開發工具，所有蘋果手機的 App 都由它打包生成。
它可以在 Mac 電腦上通過應用商店免費安裝。注意，Xcode 只支持 Mac 系統，不支持其他系統。
安裝完成后，打開新建一個項目，類型是單視圖 App，然后系統會詢問一些項目參數和儲存位置，這里就不詳細說明了。
然后，就進入了開發環境。
左側的目錄樹里面，找到ViewController.swifter文件，它負責視圖邏輯。按照官方文檔[4]，填入下面的代碼。
上面代碼的意思是，啟動 App 加載視圖的時候（loadView()），新建一個 WebView 控件的實例。視圖加載成功后（viewDidLoad()），WebView 再去加載外部網頁（紅框部分）。
然后，就可以查看代碼運行結果。點擊工具欄的運行按鈕，Xcode 就會彈出一個 iPhone 模擬器，里面就是當前代碼的運行結果。
如果一切正常，就可以讓 Xcode 對源碼打包，生成 App 的二進制安裝文件。
安卓的官方開發工具是 Android Studio，可以去官網[5]下載。
安裝完成后，打開新建一個項目，類型是“Empty Activity”。
Android Studio 會詢問項目參數，包括項目名稱、開發語言（Java）等，然后就進入了開發環境。因為它是基于 Java IDE 修改的，懂 Java 的朋友應該對這個界面比較熟悉。
按照網上的這篇教程[6]，接下來需要修改三個文件，其中最主要的是把MainActivity.java文件改成下面這樣。
上面紅框處的代碼，就是在頁面上添加并設置 WebView 實例，指定生成視圖的時候（onCreate()），WebView 實例去加載外部網頁。
運行代碼之前，Android Studio 要求必須連接真機，或安裝安卓模擬器。完成以后后，在工具欄上點擊運行按鈕，就可以運行代碼查看效果了。
如果一切正常，就可以讓 Android Studio 打包，生成 App 的二進制安裝文件。
上面的原生技術棧需要自己新建 WebView 實例，相比之下，混合技術棧就簡單多了。因為頁面就是網頁，所以容器已經設置好了 WebView，開發者直接寫頁面即可。
混合技術棧的各種容器框架之中，歷史最悠久是 PhoneGap[7]，誕生于2009年。后來在2011年被 Adobe 公司收購，改名為 Adobe PhoneGap。
Adobe 公司將 PhoneGap 的核心代碼，后來都捐給了 Apache 基金會，作為一個全新的開源項目，名為 Apache Cordova[8]。
PhoneGap 和 Cordova 現在是兩個獨立發展的開源項目，但是彼此有密切的關系，可以簡單理解成 Cordova 是 PhoneGap 的內核，PhoneGap 是 Cordova 的發行版。
后來，其他人也開始基于 Cordova 封裝自己的框架，所以市場上有許多基于 Cordova 的開源框架，比較著名的有 Ionic[9]、Monaca[10]、Framework7[11]等。
所有這些框架的共同點，都是使用 Web 技術（HTML5 + CSS + JavaScript）開發頁面，再由框架分別打包成 iOS 和安卓的 App 安裝包。它們的優點是開發簡單、周期短、成本低，缺點是功能和性能都很有限。
基于 Cordova 的框架，用法都大同小異，下面就以 Ionic 為例，演示如何加載外部網頁。
首先，根據官方文檔[12]，生成項目的腳手架。
$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myApp
接著打開src/pages/Home.tsx文件，插入<iframe>標簽即可。
上面代碼中，由于頁面本身就是網頁，所以可以直接用<iframe>標簽插入外部網頁。
然后，在本機起一個 Web 服務，看看 Demo 的效果。
$ ionic serve上面命令會自動打開瀏覽器窗口，訪問本機的8100端口，在瀏覽器中顯示網頁效果。
如果一切正常，在命令行窗口按 Ctrl+c，退出服務。編譯成 App 安裝包的方法可以參考官方文檔[13]。
上面的混合技術棧使用 HTML 語言編寫頁面，再用 WebView 控件加載頁面，所以只寫一次頁面，就能支持多個平臺。跨平臺技術棧也能做到多平臺支持，但是原理完全不同。
跨平臺技術棧的框架，都是使用自己的語法編寫頁面，不使用 Web 技術，編譯的時候再將其轉為原生控件，或者使用自己的底層控件，生成原生 App。這樣就完全解決了 Web 頁面性能不佳的問題。下面介紹三個這樣的框架。
?React Native: 使用 JavaScipt 語言編寫頁面?Xamarin：使用 C# 語言編寫頁面?Flutter：使用 Dart 語言編寫頁面
（1）原理
2013年， Facebook 公司發布了 React 框架。這個框架是為網頁開發設計的，核心思想是在網頁之上，建立一個 UI 的抽象層，所有數據操作都在這個抽象層完成（即在內存里面完成），然后再渲染成網頁的 DOM 結構，這樣就提升了性能。
很快，工程師們就意識到了，UI 抽象層本質上是一種數據結構，與底層設備無關，不僅可以渲染成網頁，也可以渲染成手機的原生頁面。這樣的話，只要寫一次 React 頁面，就能分別編譯成 iOS 和安卓的原生 App。這就是 React Native 項目的由來。
注意，React Native 雖然也使用 JavaScript 語言，并且寫法看上去像 Web 頁面，但其實所有控件都是自己定義的，編譯時再一一翻譯為對應的原生控件。舉例來說，React Native 的文本渲染控件是<Text>，翻譯成 iOS 控件為UIView，翻譯成安卓控件為TextView。這種做即保證了性能，又做到了跨平臺支持，所以一誕生就引起開發者的關注，成了熱門技術。
還有一個 NativeScript[14]框架，跟 React Native 很像，也是使用 JavaScript 語言，然后編譯成原生控件。不過，它的開發模型是基于 Angular.js，而不是 React。
（2）實例
下面就是 React Native 加載外部網頁的實例。為了方便使用，官方團隊提供了一個封裝好的工具集，叫做 Expo[15]。第一步，在手機安裝 Expo 的 App 客戶端（App Store[16]，Google Play[17]）。
然后，在命令行安裝腳手架工具expo-cli，新建一個示意項目。
$ npm install -g expo-cli$ expo init rnDemo
新建項目時，會要求你選擇項目模板，可以選minimum模板。然后，還會要求你填寫項目描述displayName，這個可以隨便寫。
然后，安裝 React Native 自己的 WebView 控件。
$ cd rnDemo$ npm install --save react-native-webview
接著，打開主頁面的腳本文件App.js，將其改成下面的代碼。
上面代碼中，React Native 自身的WebView控件，編譯時會分別轉為 iOS 和安卓的原生 WebView 控件。
接下來，預覽頁面效果。可以先把它編譯成 Web 版，在瀏覽器預覽，這樣比較快，立刻就能看到效果。
$ npm run web運行上面的命令，命令行會出現一個二維碼。
這時可以打開手機端的 Expo 客戶端，掃描這個二維碼，就會顯示 App 的頁面。注意，計算機和手機必須在同一個局域網。
（3）React Native 的問題
React Native 的想法雖然很美好，但是實際開發中出現了各種各樣的問題。
最主要的一個問題是， UI 抽象層翻譯出來的 iOS 和安卓原生頁面，做不到完全一致，尤其是復雜頁面，樣式或功能存在差異。編譯出來兩個平臺的原生 App 往往是一個正常，另一個會出現各種奇怪的小毛病。React Native 的底層還是沒有做到無縫適配，它至今沒有發布 1.0 版（2019年底是 0.61 版），這多多少少也說明了一些問題。
如果你想用 React Native 做到 iOS 和安卓體驗一致，并且充分發揮原生控件的功能，就需要同時熟悉 React Native、iOS、安卓三個平臺，這對開發者的要求實在太高了。Airbnb 公司在使用 React Native 兩年后，宣布放棄，改用原生技術棧。他們寫了一篇很長的文章[18]，解釋為什么這么做，React Native 到底有什么問題，大家可以參考那篇文章。
Xamarin 是微軟公司的跨平臺 App 開發框架，原理跟 React Native 很相似，只不過它的語言是 C#。
它的使用需要 Visual Studio，這里就不舉例了。根據官方文檔[19]，WebView 的用法如下。
上面代碼中，首先新建了一個 WebView 控件的實例，然后把這個實例放到布局上，跟原生 App 的語法很像。
Flutter[20]是谷歌公司最新的跨平臺開發框架。它為了解決 React Native 的平臺差異問題，采用了一個完全不同的方案。
它自己實現了一套控件。打包的時候，會把這套控件打包進每一個 App，因此不存在調用原生控件的問題。不管什么平臺，都調用內嵌的自己那套控件，就能做到 iOS 和安卓體驗完全一致。
Flutter 歷史還不長，應用還不廣泛，API 也沒穩定下來。但是很值得關注。
加載外部網頁的實例，可以參考 Flutter 官方團隊的這篇文章[21]。核心代碼如下：
上面代碼使用的是 Dart 語言。它是 Flutter 的官方語言，接近 JavaScript 語法，但是多了靜態類型支持。
通過上面的介紹，希望大家已經了解了各種技術棧的特點。
（1）原生技術棧的技能和體驗最好，對于復雜的大型 App，如果條件允許，應該采用這種方式開發。
（2）混合技術棧的成本低，靈活性好，對性能要求不高的簡單 App，尤其是純展示性的頁面，可以采用這種方式開發。
（3）跨平臺技術棧適用于，存在外部或內部條件的限制，只有一個團隊開發跨平臺 App 的情況。
（正文完）
手機 App 的 UI（用戶界面），往往是 App 成功的關鍵因素：產品的外觀是否漂亮，點擊和滑動是否流暢，意圖是否清晰，都會影響到用戶的留存率。一個好的 UI 不僅體現了產品經理和開發者的素質，還可以有效降低拉新成本。
一般的開發者接到產品的 UI 設計方案之后，可能就會去網上找類似的效果，看看有沒有開源代碼。但是，優秀的開發者會努力思考，如何通過完全自定義來實現這個效果，做到功能和性能的最佳狀態。
這就要求開發者具有實現高級 UI 的開發能力，理解安卓 UI 的底層實現原理，比如自定義 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互設計（touch事件）。
怎樣才能高效地學習安卓高級 UI 開發，早日進階成為高級安卓工程師呢？這里介紹享學課堂的一門課程 《高級安卓 UI ——自定義 ViewGroup 與 UI 性能優化》，它帶大家一行一行代碼去實現一個京東自定義ViewGroup，研究系統的FrameLayout與ViewPager的源碼，最后通過閱讀源碼，分析ViewPager設計過程中的顯示問題和性能問題。下圖是課程介紹（點擊看大圖）。
這個課程是直播課程，在線實時答疑，特別邀請了 Alvin 老師（前三星/小米高級研發經理）主講，只需要0.1元就能參與。聽課之后覺得滿意，還可以學習其他 Android 高級進階的實戰課程。
（完）
[1]手機 App 的種類:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html
[2]“騰訊課堂”:https://ke.qq.com/
[3]“騰訊課堂101計劃”:https://edu.qq.com/a/20190119/005414.htm
[4]官方文檔:https://developer.apple.com/documentation/webkit/wkwebview
[5]官網: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]很長的文章: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
者：日照工校/徐鵬
手機瀏覽器能用來干什么？看資訊、看圖片、看小說、看視頻等等。作為上網必備工具，手機瀏覽器對于網絡體驗的影響不可忽視。隨著網絡的快速發展，大家對于瀏覽器的要求也越來越高，比如支持HTML5頁面版。由于手機瀏覽器的內核和性能存在差異，造成不同的HTML5頁面瀏覽有不同的體驗。
近日無意中看到一個款800手機瀏覽器，在體驗過程中，發現不論是在游戲體驗還是軟件特效上，都完全體現HTML5效果，為了讓大家有更直觀的感受，就先試用了一番。
小知識：
HTML5名詞解釋：原生支持多媒體功能，不再依賴瀏覽器插件（例如 Adobe Flash player， Windows Media Player），便可實現跨平臺在線影音播放。同時 HTML5 還可以讓網頁調用手機的應用數據從而實現很酷的功能。另外，HTML5 新增了離線存儲，一次聯網加載資源，長久離線訪問。廣義的 HTML5 技術還包括 CSS3，JavaScript 以及支持 SVG 等。
在試用過程中，首先引起筆者注意的，還是800手機瀏覽器的界面化，所謂細節決定產品的成敗，先來看看它的到底是什么樣子。
800手機瀏覽器啟動后，從整體上看到的，就是集成了常用的搜索引擎和常用網站，而且還可以添加新的常用頁面。
跑分測試
800手機瀏覽器主要是面向智能手機的安卓瀏覽器，全面支持 HTML5。但是如果要成為一款真正的支持HTML5的手機瀏覽器，僅有支持還是不夠的，更多的需要完全與HTML5的融合，還是先看看它的跑分結果吧：
注：測試網站Html5test.com，它是一個非常具有權威性的測試HTML5性能的網站，無論是PC端還是手機端的瀏覽器，都能夠快速檢測出當前瀏覽器對HTML5頁面各項元素對于HMTL5的支持情況。
在HTML5 測試中，800手機瀏覽器得分高達驚人466分，800手機瀏覽器的得分完全可以媲美PC端瀏覽器的表現，這也大大提升了它對HTML5特效效果以及游戲的支持。
跑分測試結果已經可以說明一個很重要的方面，當然除這些數據外，本身具有HTML5的特性也是非常重要的，800手機瀏覽器還給我們很多HTML5體驗，展現了一種對于HMTL5的一種融合以及更深的理解。
視頻播放
提起HTML5，很多人都會想到視頻播放。因為它完全不需要任何的插件支持，只要是瀏覽器支持即可，目前主流的視頻網站都早已經實現，他們完全支持HTML5的視頻直接播放。目前雖然還支持Flash插件，但是它會大大的增加電量消耗和性能的損耗，同時Adobe公司也宣布會停止Flash在手機端的更新。
現在，來看看800手機瀏覽器對于視頻的表現：
HTML5視頻體驗網站截圖
逼真的靈動效果，完全沒有卡頓的現象
800手機瀏覽器在播放過程中沒有出現視頻失真或者不流暢的情況。
CCS3特性
除此之外，800手機瀏覽器還展示了幾種HTML5獨有特性，比較代表性的有CSS特性等。
CCS3是CSS語言的新版，也是一個全新時代的技術，它可以給你的圖片添加圓角，可以讓你的圖片具有陰影特效，還可以打造一個矢量圖的效果。
游戲體驗
800手機瀏覽器不僅僅帶來了一些軟件上的體驗，還給我們的帶來了很多游戲上的體驗，來看看800手機瀏覽器的游戲效果如何吧。
這款游戲屬于一個網絡游戲，支持觸摸反饋，在試玩過程中，游戲的流暢度和直接下載游戲沒有太大的差別。
總結：
800手機瀏覽器在HMTL5上表現無懈可擊，給我留下很深刻的印象。它不僅僅表現在跑分測試數據上，更多的是表現在對于HTML5的融合上，是一款真正的HTML5瀏覽器。
幾天，大家都在玩一款《神經貓》的游戲，又火了，距離臉萌的刷屏還不到一個月。從“瘋狂猜圖”到“臉萌”，從“flybird”到“特斯拉”和“維多利亞的秘密”，再到“神經貓”，朋友圈的力量開始展現。
作為公關人，如果你還在盯著某某報紙發一個豆腐塊新聞，顯然很難做出成績。大叔發現，不少公司的公關品牌團隊里已經開始自己招HTML5的開發人員或外聘團隊。
一號店此前在朋友圈做的“九宮格”和“索吻游戲”也是找了上海的一個開發團隊，總費用接近20萬。寶馬搖盒子項目的開發費用高達60萬，制作方來自一個小團隊，10天就超過1100萬的參與量。
一位專門做頁面手機游戲的創業公司負責人告訴大叔，他之前制作電子賀卡，發現基于HTML5頁面的手機游戲在朋友圈十分受歡迎，開始轉型專做頁面手機游戲，其在世界杯開發的一款射門游戲的PV輕松超過百萬。
這位老總介紹，一個游戲的開發費用對外報價至少在10萬，而像維多利亞秘密和特斯拉那種翻頁瀏覽的開發費用則低不少，原因是前者有深度交互，而后者只是一個瀏覽功能，美工更為重要。
神經貓的出現，似乎打破了上面這些所謂的高門檻設置。這一款使用Egret引擎開發的Html5游戲，由南京一名美術和一名程序使用1.5天開發完成。游戲在7月22日下午兩點上線，在微信朋友圈迅速引爆，3天時間內游戲訪問量超過一個億。
其實，“神經貓”的創意也是來自抄襲，玩法來自在2007年日本一款名為“黑貓”的游戲，形象來自日本的漫畫《全是貓》。為什么會火爆呢？基本符合以上所有應用的特點，好玩簡單鼓勵分享。
如果你注意自己的朋友圈，也許經常能夠看到一些使用Html5制作的小游戲的微信分享，比如此前大熱的《2048》《一個都不能死》、《別踩白塊兒》等等的各種版。借助微信的快速傳播優勢，Html5游戲開始顯現出另一種生命活力，也開始成為企業植入品牌的另一條路，畢竟大家對心靈雞湯早就膩煩了，純文字的內容，更適合微博，而不是朋友圈。
說了這么多，大叔總結一下，利用微信朋友圈進行傳播的Html5小游戲正在成為典型現象，目前比較成功的是個人開發者制作的小游戲，利用話題性和病毒性進行傳播，這是公關和品牌介入的最好時機。
最后借用一個營銷大師的話，大家都喜歡可口可樂，但有多少人會去關注可口可樂的官方微博或微信呢？大叔再加一句，如果可口可樂邀請你玩個小游戲呢？
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
