整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
人学习手机 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
机现在是互联网的最大入口。根据《中国互联网报告》[1]，手机网民已经超过8亿，人均每天上网三个多小时。
毫不奇怪，手机应用软件（mobile application，简称 mobile App）的开发工程师供不应求，一直是 IT 招聘的热门。
如果你开始学习手机 App 开发，就一定会听到 H5 这个词。它是目前的主流开发技术之一，容易上手，开发周期短、成本低、兼容传统 Web 开发。但是，很少有文章详细介绍，H5 到底是什么技术，有什么原理，跟其他技术的差异在哪里。
本文就是 H5 的入门教程，今天是第一篇，介绍基本概念。内容尽量通俗，不过本来也没有太复杂的东西。我希望这篇文章可以帮助新手入门，也可以供熟练开发者回顾和整理知识点。
感谢国内最大的在线教育平台之一“腾讯课堂”[2]赞助这个系列教程。他们现在启动了“腾讯课堂101计划”[3]，推广优质课程资源。希望提高前端技术水平的朋友，可以留意一下本文结尾的课程“一元钱”课程信息。
表面上看，手机 App 都是同样的东西，就是手机上的应用程序，点击图标就能运行，但是它们的底层技术不一样。按照开发技术，App 可以分成三大类。
•原生应用（native application，简称 native App）•Web 应用（web application，简称 Web App）•混合应用（hybrid application，简称 hybrid App）
这三类 App 的技术模型都不一样，各有优缺点。企业一般会选择其中一种作为主要技术栈，构建自己的手机 App。
H5 这个词，可以理解成就是混合 App 模型，只不过它特指混合 App 的前端部分。因为混合 App 的前端就是 HTML5 网页，所以简称 H5。这个词是国内独有的，基本上都是前端程序员在用，国外不用这个词，就直接叫混合 App。
真正理解 H5 开发，需要先搞清楚什么是原生 App、什么是 Web App，因为混合 App 是在它们的基础上诞生的。
原生 App 是专门为特定手机平台开发的应用程序，无法在其他平台运行。一个手机软件如果要同时支持苹果手机和安卓手机，就需要为它们各写一个原生 App。
历史上，原生 App 最早出现，跟智能手机系统一起诞生。2007年6月 iPhone 诞生，2008年9月安卓诞生，就同时发布了自家平台的原生 App 开发方法。
原生 App 使用与手机操作系统相同的语言。iOS 的原生 App 使用 Objective-C 语言或 Swift 语言，安卓使用 Java 语言或 Kotlin 语言。由于跟底层系统的语言和技术模型一致，所以原生 App 的性能和用户体验都很好。
原生 App 的优点主要是两个：（1）较好的性能和体验；（2）可以使用系统的所有硬件和软件 API，比如 GPS、摄像头、麦克风、加速计、通知推送等等，能充分发挥系统的潜力。
原生 App 的缺点主要是成本，每个手机平台都要建立一个独立的开发团队，大公司一般都有 iOS 和安卓两个开发团队。如果出现第三个平台（以前的 Windows Phone，也许将来的华为鸿蒙 OS），就要组建第三个团队，成本就更高。
第二个缺点是，原生 App 使用底层操作系统的语言，都是很重的编译型语言，开发和调试成本相对较高，时间周期长。
第三个缺点是，原生 App 必须下载安装才能使用，只要升级版本，就必须重新下载安装。用户往往不愿意更新版本，厂商被迫不得不长期支持很久以前的旧版本。
Web App 是使用网页做的应用程序，必须在浏览器中使用。比如，你在浏览器中收发邮件，就是在使用 Web App。
Web App 主要使用网页技术，即 HTML、JavaScript 和 CSS。2008年，w3c 组织发布了 HTML 第5版，简称 HTML 5，该版本大大增强了网页的功能，使得网页可以当作应用程序使用，而不仅仅是展示文字和图片，这就是 Web App 的由来。
Web App 的优点是：（1）不需要下载安装，打开浏览器就能使用，而且总是使用最新版本；（2）对于开发者来说，Web App 写起来比较快，调试容易，不需要应用商店的批准就能发布。
Web App 的主要缺点有两个。首先，浏览器提供的 API（即 Web API）很有限（目前只有相机、GPS、电池等少数几个），大部分系统硬件都不能通过网页访问，也无法直接读取硬盘文件，所以 Web App 无法充分利用平台的硬件。
第二个缺点是，网页通过浏览器渲染，性能不如原生 App，不适合做性能要求较高的页面。
Web App 需要打开浏览器才能使用，这意味着，用户必须记住如何导航到它，要么直接输入网址，要么翻找书签。这使得进入 Web App，远不如原生 App 方便。这点很致命，事实表明，用户偏好原生 App。
谷歌曾经调查了原生 App 和 Web App 各一千个，发现 Web App 可以覆盖更多的用户（1100万 vs 400万），但是原生 App 的用户使用时间（188分钟）远超 Web App（9分钟）。
另一项调查发现，用户87％的时间用在原生 App，13％的时间用在 Web App。由于这个原因，企业很少开发 Web App，都把原生 App 当作首选。
但是，Web App 也不是毫无竞争力。根据调查，普通用户每月平均使用27个原生 App，但访问了100多个手机网站。这意味着，用户的 App 使用时间都被头部 App 占据了，小公司的 App 使用频率非常低，获客成本极高，最终变成僵尸 App。因此，小公司开发 Web App 更划算，不仅成本低，而且可以服务更多的用户，以及更好地宣传自己（可以被搜索引擎收入）。
为了推广 Web App，谷歌公司的 Chrome 浏览器团队做了很多努力。他们认为，Web App 足以满足大多数 App 的需求，但是三大缺陷阻碍它的推广。
1.不能从手机的首屏直接进入。2.缺乏手机状态栏和锁屏时的通知推送能力。3.不支持脱机访问（即断网也能使用）。
为了解决这些问题，Chrome 团队开发了新技术“渐进式 Web App”（Progressive Web App，缩写 PWA）。它可以把网站缓存在手机里面，供离线时使用，还能在手机首屏生成图标，直接点击进入，并且有通知推送能力，也不带有浏览器的地址栏和状态栏，跟原生 App 的使用体验非常接近。
但是，PWA 需要浏览器访问一次网站，才能在首屏生成图标，并且目前 iOS 系统的支持还不够理想，所以还只是一项探索性质的技术，迄今为止缺乏足够的成功案例。
混合 App （hybrid App）顾名思义就是原生 App 与 Web App 的结合。它的壳是原生 App，但是里面放的是网页。可以理解成，混合 App 里面隐藏了一个浏览器，用户看到的实际上是这个隐藏浏览器渲染出来的网页。
混合 App 的原生外壳称为“容器”，内部隐藏的浏览器，通常使用系统提供的网页渲染控件（即 WebView 控件），也可以自己内置一个浏览器内核。结构上，混合 App 从上到下分成三层：HTML5 网页层、网页引擎层（本质上是一个隔离的浏览器实例）、容器层。
混合 App 里面的网页不同于普通网页，可以调用底层系统所有的 API。奥秘就在于外层容器提供了 API Bridge，充当底层 API 的中介，允许内部的网页调用底层。
所谓 API Bridge 就是容器在底层接口和网页之间，建立一座桥梁，让双方通信。容器一旦接到网页的请求，就根据请求去调用底层系统的 API，然后再返回结果给网页。API Bridge 往往以 JavaScript 语言提供，方便网页调用，这时又称为 JSbridge。
不同容器的 API Bridge 是不一样的。为某个容器写的网页，不能放在另一个容器使用，也无法在浏览器使用，除非网页脚本做了兼容处理。
容器提供的 API Bridge 必须跟着平台更新。比如，iOS 发了新版本，有了新的硬件 API，容器也必须跟着推出新版的 API Bridge。如果容器没有跟上，开发者为了使用新的硬件，就只能想办法自己来写缺失的 API Bridge。
混合 App 同时具有原生 App 和 Web App的优点，又可以避免它们的一些缺点。具体来说，可以总结为三点。
（1）跨平台
Web 技术是跨平台的，开发者只写一次页面，就能支持多个平台。也就是说，混合 App 只需要一个团队就够了，开发成本较低。
（2）灵活性
混合 App 的灵活性大，很容易集成多种功能。一方面，混合 App 很容易加载外部的 H5 页面，实现 App 的插件结构；另一方面，Web 页面可以方便地调用外部的 Web 服务。
（3）开发方便
Web 页面的调试和构建，远比原生控件简单省时。页面的更新也容易，只要在服务器上发布新版本，触发容器内更新就可以了。另外，Web 开发人员也比较容易招聘，传统的前端程序员可以承担开发任务。
混合 App 的主要缺点是，由于存在网页引擎的中间层，所以性能比较欠缺，不仅不如原生 App，而且由于 WebView 不是全功能浏览器，可能比 Web App 都要慢一些。
另一个缺点是，由于页面跨平台，就无法使用只有特定平台提供的功能，导致体验不如纯的原生 App。举例来说，早期的时候，安卓有物理的后退按钮，iPhone 没有，页面设计不得不考虑这一点。
上图是 iOS 页面。
上面是安卓页面，左上角的后退按钮，跟系统的后退按钮重复了。
最后，再来谈谈微信小程序。
所谓小程序，可以看作是针对特定容器的 H5 开发。微信本身是一个容器，开放自己的接口（JSbridge），外部开发者使用规定的语法，编写页面，容器可以动态加载这些页面。
小程序对于微信官方的好处是，扩展了功能和应用场景，吸引外部开发者加入，繁荣了生态。对于外部开发者的好处是，有了流量入口，可以直接调用微信的各种功能（比如支付）。
今天对于 H5 相关概念的介绍，就到这里为止，下一篇文章将介绍 H5 相关开发工具和框架。
（正文完）
当今时代，IT 教育蓬勃发展，各种课程层出不穷，知识唾手可得。你可能经常领取到海量的前端开发资料包，往往收藏起来就再也没看过。
Vue.js 就是这种情况，作为前端的主流框架之一，国内有着广泛应用，市场招聘需求大。前端培训机构几乎一定有它的课程，而且都是重点推广，每个学员都会拿到一大堆学习资料。
怎样才能做出有特色的 Vue.js 教程呢？北京的京程一灯现在就推出了一个专项课程 《你不知道的Vue.js 性能优化》。他们是腾讯课堂前端培训 TOP 机构之一，专注培养年薪40万的高级前端工程师，目前和腾讯课堂联合运营，毕业生平均薪水可以达到25.5K。
为了与市场上其他课程区隔，保证输出优质内容，让学员真正有收获，本次专题课深度讲解 Vue.js 性能优化，以及 Vue3.0 那些值得关注的新特性。高级前端岗位面试中，性能优化是一个必问的知识点，本课程通过对 Vue 面试核心知识点的拆解，带你解锁 Vue.js 性能优化，目标是帮助学员拿到大厂 offer。下面是课程部分内容。
1.Vue首屏优化实践。2.核心优化方案和工程化剖析3.面试常问的 Vue 双向数据深度解析4.深度对比 Vue2 & 3 的双向数据绑定
购课之后，还将赠送价值196元的《Webpack 从入门到精通》全系列教程。
[1]《中国互联网报告》:https://www.ifanr.com/1254954
[2]“腾讯课堂”:https://ke.qq.com/
[3]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm
来越多的开发者热衷于使用html5+JavaScript开发移动Web App。不过，HTML5 Web APP的出现能否在未来取代移动应用，就目前来说，还是个未知数。那么，有什么办法，既可以使用HTMl5开发应 用，又可以将其简单封装成APK文件呢？
一、Android SDK中的WebView
1.在要Activity中实例化WebView组件：WebView webView = new WebView(this);
2.调用WebView的loadUrl()方法，设置WevView要显示的网页：
互联网用：webView.loadUrl("http://www.qietu.com");
本地文件用：webView.loadUrl("file:///android_asset/XX.html"); 本地文件存放在：assets 文件中
3.调用Activity的setContentView( )方法来显示网页视图
4.用WebView点链接看了很多页以后为了让WebView支持回退功能，需要覆盖覆盖Activity类的onKeyDown()方法，如果不做任何处理，点击系统回退剪键，整个浏览器会调用finish()而结束自身，而不是回退到上一页面
5.需要在AndroidManifest.xml文件中添加权限，否则会出现Web page not available错误。
<uses-permission android:name="android.permission.INTERNET" />
缺点：如果是载入的是普通网页，没有什么问题，但如果是html5,封装后，在android2.3以上才能正常访问，android2.2及以下，SDK中的WebView还没完全支持HTML5
下面是具体例子：
MainActivity.java
package com.android.webview.activity;
import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
public class MainActivity extends Activity {
private WebView webview;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//实例化WebView对象
webview = new WebView(this);
//设置WebView属性，能够执行Javascript脚本
webview.getSettings().setJavaScriptEnabled(true);
//加载需要显示的网页
webview.loadUrl("http://www.qietu.com/");
//设置Web视图
setContentView(webview);
}
@Override
//设置回退
//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
public boolean onKeyDown(int keyCode, KeyEvent event) {
if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
webview.goBack(); //goBack()表示返回WebView的上一页面
return true;
}
return false;
}
在AndroidManifest.xml文件中添加权限
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.android.webview.activity"
android:versionCode="1"
android:versionName="1.0">
<uses-sdk android:minSdkVersion="10" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".MainActivity"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
<uses-permission android:name="android.permission.INTERNET"/>
</manifest>
二、使用PhoneGap
PhoneGap是一个用基于HTML，CSS和JavaScript的，创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone，Android，Palm，Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位，加速器，联系 人，声音和振动等，此外PhoneGap拥有丰富的插件，可以以此扩展无限的功能。PhoneGap是免费的，但是它需要特定平台提供的附加软件，例如 iPhone的iPhone SDK，Android的Android SDK等，
详细方法请见：http://phonegap.com/start#android
优点：在Eclipse中加入SDK，编程自由，完美适应不同设备屏幕大小，适合高手使用。
缺点：没有使用布局，直接加载网页，不能添加广告。
----------------
切图网（qietu.com）最早将psd转html服务模式带到国内，并首个提供响应式、webapp前端开发的公司。专注web前端开发技术，关注用户体验，加我们公众微信账号：qietuwang（长按复制）
*请认真填写需求信息，我们会在24小时内与您取得联系。
