整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人学习手机 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小时内与您取得联系。
