|
新人进修手机 APP 开辟，一路头总要挑选一条进修途径。 假如你熟悉 Java 说话，可以进修安卓开辟；假如熟悉剧本说话（比如 Python 或 Ruby），可以进修 Swift 说话，停止 iOS 开辟；假如像我一样，比力熟悉 Web 网页技术，那末 H5 开辟是最轻易上手的。
这个系列教程的第一篇，已经先容过了手机 App 的品种[1]。所谓的 H5 页面，实在就是夹杂 App 的前端，里面是一个原生的壳，里面是 Web 网页。本文紧接上一篇，先容手机 App 开辟的技术栈，特别是跟 H5 开辟相关的技术。
一、手机 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 的技术实现有一个整体的熟悉。 二、WebView 控件讲授具体的技术栈之前，大师需要晓得，不管什么技术，终极在 App 里面显现网页，一定需要一个网页引擎，这样才能剖析网页。 凡是情况下，App 内部会利用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显现网页。利用法式的界面，只要放上 WebView，就似乎内嵌了阅读器窗口，可以显现网页。
分歧的 App 技术栈要显现网页，区分仅仅在于怎样处置 WebView 这个原生控件。
留意，分歧系统的 WebView 控件称号纷歧样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，感化都是一样的，差别在于功用的强弱。 三、原生技术栈原生技术栈分红 iOS 和安卓两个平台。 简单说，iOS 的原生技术栈就是利用 Object-C 说话或 Swift 说话，在 Xcode 开辟情况中编程。安卓的原生技术栈，则是利用 Java 说话或 Kotlin 说话，开辟情况是 Android Studio。 下面就来看看，它们怎样加载网页。 3.1 XcodeiOS 开辟需要安装 Xcode。它是一种集成开辟情况（IDE），也是苹果公司指定的 iOS 官方开辟工具，一切苹果手机的 App 都由它打包天生。 它可以在 Mac 电脑上经过利用商铺免费安装。留意，Xcode 只支持 Mac 系统，不支持其他系统。
安装完成后，翻开新建一个项目，范例是单视图 App，然后系统会询问一些项目参数和贮存位置，这里就不具体说了然。
然后，就进入了开辟情况。
左侧的目录树里面，找到 ViewController.swifter文件，它负责视图逻辑。依照官方文档[4]，填入下面的代码。
上面代码的意义是，启动 App 加载视图的时辰（ loadView()），新建一个 WebView 控件的实例。视图加载成功后（viewDidLoad()），WebView 再去加载内部网页（红框部分）。然后，便可以检察代码运转成果。点击工具栏的运转按钮，Xcode 就会弹出一个 iPhone 模拟器，里面就是当前代码的运转成果。
假如一切一般，便可以让 Xcode 对源码打包，天生 App 的二进制安装文件。 3.2 Android Studio安卓的官方开辟工具是 Android Studio，可以去官网[5]下载。
安装完成后，翻开新建一个项目，范例是“Empty Activity”。
Android Studio 会询问项目参数，包括项目称号、开辟说话（Java）等，然后就进入了开辟情况。由于它是基于 Java IDE 点窜的，懂 Java 的朋友应当对这个界面比力熟悉。
依照网上的这篇教程[6]，接下来需要点窜三个文件，其中最首要的是把 MainActivity.java文件改成下面这样。
上面红框处的代码，就是在页面上增加并设备 WebView 实例，指定天生视图的时辰（ onCreate()），WebView 实例去加载内部网页。运转代码之前，Android Studio 要求必须毗连真机，或安装安卓模拟器。完成今后后，在工具栏上点击运转按钮，便可以运转代码检察结果了。
假如一切一般，便可以让 Android Studio 打包，天生 App 的二进制安装文件。 四、夹杂技术栈上面的原生技术栈需要自己新建 WebView 实例，相比之下，夹杂技术栈就简单多了。由于页面就是网页，所以容器已经设备好了 WebView，开辟者间接写页面即可。 4.1 框架品种夹杂技术栈的各类容器框架当中，历史最悠久是 PhoneGap[7]，诞生于2022年。后来在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 安装包。它们的优点是开辟简单、周期短、本钱低，弱点是功用和性能都很有限。 4.2 Ionic 实例基于 Cordova 的框架，用法都大同小异，下面就以 Ionic 为例，演示若何加载内部网页。 首先，按照官方文档[12]，天生项目标脚手架。
接着翻开 src/pages/Home.tsx文件，插入<iframe>标签即可。
上面代码中，由于页面自己就是网页，所以可以间接用 <iframe>标签插入内部网页。然后，在本机起一个 Web 办事，看看 Demo 的结果。 上面号令会自动翻开阅读器窗口，拜候本机的8100端口，在阅读器中显现网页结果。 假如一切一般，在号令行窗口按 Ctrl+c，退出办事。编译成 App 安装包的方式可以参考官方文档[13]。 五、跨平台技术栈上面的夹杂技术栈利用 HTML 说话编写页面，再用 WebView 控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，可是道理完全分歧。 跨平台技术栈的框架，都是利用自己的语法编写页面，不利用 Web 技术，编译的时辰再将其转为原生控件，大概利用自己的底层控件，天生原生 App。这样就完全处理了 Web 页面性能欠安的题目。下面先容三个这样的框架。
5.1 React Native（1）道理 2022年， 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，新建一个表示项目。
新建项目时，会要求你挑选项目模板，可以选 minimum模板。然后，还会要求你填写项目描写displayName，这个可以随意写。然后，安装 React Native 自己的 WebView 控件。
接着，翻开主页面的剧本文件 App.js，将其改成下面的代码。
上面代码中，React Native 本身的 WebView控件，编译时会别离转为 iOS 和安卓的原生 WebView 控件。接下来，预览页面结果。可以先把它编译成 Web 版，在阅读器预览，这样比力快，立即就能看到结果。 运转上面的号令，号令行会出现一个二维码。
这时可以翻开手机真个 Expo 客户端，扫描这个二维码，就会显现 App 的页面。留意，计较机和手机必须在同一个局域网。 （3）React Native 的题目 React Native 的想法虽然很美好，可是现实开辟中出现了各类百般的题目。 最首要的一个题目是， UI 笼统层翻译出来的 iOS 和安卓原生页面，做不到完全分歧，特别是复杂页面，款式或功用存在差别。编译出来两个平台的原生 App 常常是一个一般，另一个会出现各类希奇的小毛病。React Native 的底层还是没有做到无缝适配，它至今没有公布 1.0 版（2022年末是 0.61 版），这多几多少也说了然一些题目。 假如你想用 React Native 做到 iOS 和安卓体验分歧，而且充实发挥原生控件的功用，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开辟者的要务实在太高了。Airbnb 公司在利用 React Native 两年后，公布放弃，改用原生技术栈。他们写了一篇很长的文章[18]，诠释为什么这么做，React Native 到底有什么题目，大师可以参考那篇文章。 5.2 XamarinXamarin 是微软公司的跨平台 App 开辟框架，道理跟 React Native 很类似，只不外它的说话是 C#。
它的利用需要 Visual Studio，这里就不举例了。按照官方文档[19]，WebView 的用法以下。
上面代码中，首先新建了一个 WebView 控件的实例，然后把这个实例放到结构上，跟原生 App 的语法很像。 5.3 FlutterFlutter[20]是谷歌公司最新的跨平台开辟框架。它为领会决 React Native 的平台差别题目，采用了一个完全分歧的计划。 它自己实现了一套控件。打包的时辰，会把这套控件打包进每一个 App，是以不存在挪用原生控件的题目。不管什么平台，都挪用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全分歧。 Flutter 历史还不长，利用还不普遍，API 也没稳定下来。可是很值得关注。
加载内部网页的实例，可以参考 Flutter 官方团队的这篇文章[21]。焦点代码以下：
上面代码利用的是 Dart 说话。它是 Flutter 的官方说话，接近 JavaScript 语法，可是多了静态范例支持。 六、总结经过上面的先容，希望大师已经领会了各类技术栈的特点。 （1）原生技术栈的技术和体验最好，对于复杂的大型 App，假如条件答应，应当采用这类方式开辟。 （2）夹杂技术栈的本钱低，灵活性好，对性能要求不高的简单 App，特别是纯展现性的页面，可以采用这类方式开辟。 （3）跨平台技术栈适用于，存在内部或内部条件的限制，只要一个团队开辟跨平台 App 的情况。 （正文完） 安卓开辟高级 UI 课程手机 App 的 UI（用户界面），常常是 App 成功的关键身分：产物的表面能否标致，点击和滑动能否流利，意图能否清楚，城市影响到用户的保存率。一个好的 UI 不但表现了产物司理和开辟者的本质，还可以有用下降拉新本钱。 一般的开辟者接到产物的 UI 设想计划以后，能够就会去网上找类似的结果，看看有没有开源代码。可是，优异的开辟者会尽力思考，若何经过完全自界说来实现这个结果，做到功用和性能的最好状态。 这就要求开辟者具有实现高级 UI 的开辟才能，了解安卓 UI 的底层实现道理，比如自界说 View 的衬着流程（ onMeasure->onLayout->onDraw），以及交互设想（touch事务）。怎样才能高效地进修安卓高级 UI 开辟，早日进阶成为高级安卓工程师呢？这里先容享学课堂的一门课程 《高级安卓 UI ——自界说 ViewGroup 与 UI 性能优化》，它带大师一行一行代码去实现一个京东自界说 ViewGroup，研讨系统的FrameLayout与ViewPager的源码，最初经过阅读源码，分析ViewPager设想进程中的显现题目和性能题目。下图是课程先容（点击看大图）。
这个课程是直播课程，在线实时答疑，出格约请了 Alvin 教员（前三星/小米高级研发司理）主讲，只需要0.1元就能介入。听课以后感觉满足，还可以进修其他 Android 高级进阶的实战课程。
（完） References[1]手机 App 的品种:http://www.ruanyifeng.com/blog/2022/12/hybrid-app-concepts.html[2]“腾讯课堂”:https://ke.qq.com/[3]“腾讯课堂101计划”:https://edu.qq.com/a/20220119/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 |
我是从19年6月份开始写自己的App的，到目前为止，差不多一年的时间我写了10多个应用。
时隔2年，把这篇文章拿出来，稍作修改。本文仅从个人作为一个三流跑偏程序员的角度思
我的职业生涯我的职业生涯如图所示，这是我整个职业生涯的时间线，一目了然。我2011年
术业有专攻。一个好的开发团队对做好一款App至关重要，好的团队会有专业且标准的需求
“在红海中博杀是没有前途的，所有的成功企业都是不同的。”这是 Paypal 创始人 Peter
移动APP和小程序，是我们每天都要用到的应用程序，但你知道应用程序是怎么开发出来，
2016年中，作者高考结束。很多人都会在高考前筹划考完出去旅行，但考完却是宅在了家里
APP总的开发流程可分为三个阶段，第一个阶段是需求阶段，第二阶段是研发阶段，第三阶
到2022年，将会有大约3500亿的移动APP下载量，这将创造约2000亿美元的营收，因此如今
学一门编程语言，废话再多，都不如动手实践来得简单。走，去https://developer.harmon
用互联网思维改造并升级企业，是大量传统企业适应移动互联网时代的重要战略选择，而做
本文假定读者是想通过自己的学习和努力，从0到1去制作自己的一款APP产品。我将从独立
手机现在是互联网的最大入口。根据《中国互联网报告》，手机网民已经超过8亿，人均每
导读：HMS Core是华为面向开发者提供的开放能力合集，包括账号、支付、Push、地图等核
现在不管做什么都得有一个自己的手机app,自己花钱去开发太贵了,怎么办?自己动手,又不
从技术角度来讲，iOS，Android和Windows Phone上的应用是由不同的编程语言来开发的。i
跨平台真的香吗？曾几何时，以RN为代表的跨平台的技术一经推出。得到无数掌声。也为互
老陈最近有点上火。作为在杭州的一家智慧城市系统开发商，上半年接了湖北一个地级市的
8年前，字节跳动诞生在北京锦秋家园的居民楼，如今，我们的产品和服务覆盖150个国家和
本文针对小白用户对App做一个简单的介绍，介绍了App都有哪些类型，不同的类型app开发
声明：本站内容由网友分享或转载自互联网公开发布的内容，如有侵权请反馈到邮箱 1415941@qq.com，我们会在3个工作日内删除，加急删除请添加站长微信：15314649589
Copyright @ 2022-2044 杭州共生网络 www.gongshengyun.cn Powered by Discuz!
