手机怎么查看网页源代码(手机版查看网页源代码)

H5 手机 App 开发入门：技术篇

新人学习App开发时，一开始一定要选择一条学习路径。

如果熟悉Java语言，可以学习Android开发；如果你熟悉脚本语言（如Python或Ruby），可以学习Swift语言进行iOS开发；如果你和我一样对网页技术比较熟悉，那么H5开发是最容易上手的。

App技术栈可以分为三类。

（1）原生 App 技术栈（原生技术栈）

原生技术栈是指只能在特定平台上使用的开发技术。例如Android平台上的Java技术栈、iOS平台上的Objective-C技术栈或者Swift技术栈。

这一技术栈只能在一个平台上使用，不能跨平台使用。

（2）混合 App 技术栈（混合技术栈）

混合技术栈是指开发混合应用的技术，即将网页放入特定的容器中，然后打包成各个平台的原生应用。因此，混合技术栈实际上是Web技术栈+容器技术栈。典型代表是PhoneGap、Cordova、Ionic等框架。

如果你掌握了Web技术，这个技术栈主要会学习容器提供的API Bridge，网页通过它们来调用底层硬件的API。

（3）跨平台 App 技术栈（跨平台技术栈）

跨平台技术栈是指使用一种技术同时支持多个平台。它与混合技术栈的区别在于，它不使用Web技术，即它的页面不是HTML5页面，而是用自己的语法编写的UI层，然后编译成各个平台的原生应用程序。

这个技术栈是纯容器技术栈，React Native、Xamarin、Flutter都属于这一类。学习的时候，除了学习容器的API Bridge之外，还需要学习容器提供的UI层，即页面如何写。

（4）小结H5开发主要应用于混合技术栈。但是，也使用了一些跨平台技术栈的容器（例如React Native），因为它们的UI层借鉴了Web模型。

另外，混合技术栈和跨平台技术栈的基础是原生技术栈，因为它最终会被编译成原生App。因此，无论你使用哪种技术栈，你都必须了解每个平台的一些原生技术。

下面依次介绍以上三类技术栈。每个技术栈都会给出一个最简单的例子：加载网页。通过各种技术栈加载网页的不同方式，有助于大家了解其特点，对App的技术实现有一个整体的了解。

在讲解具体的技术栈之前，大家需要知道，无论什么技术，最终在App中显示一个网页都需要一个网页引擎，以便能够解析网页。

通常，WebView控件用作App内部的网页引擎。这是系统自带的一个控件，专门用来显示网页的。只要将WebView放在应用程序界面上，就好像嵌入了一个浏览器窗口，可以显示网页。

不同的App技术栈需要显示网页。唯一的区别在于如何处理WebView的原生控件。

•原生技术栈：开发者需要自己将WebView控件放到页面上。 •混合技术栈：页面本身就是一个网页，默认显示在WebView中。 •跨平台技术栈：提供WebView语法，编译时替换为原生WebView。

注意，不同系统中WebView控件的名称是不同的。 Android系统称为WebView。 iOS系统有较旧的UIWebView和较新的WKWebView。功能是一样的。区别在于功能的强弱。

原生技术栈分为两个平台：iOS和Android。

简单来说，iOS的原生技术栈使用Objective-C语言或者Swift语言在Xcode开发环境中进行编程。 Android原生技术栈采用Java语言或Kotlin语言，开发环境为Android Studio。

让我们看看他们是如何加载网页的。

3.1 XcodeiOS开发需要安装Xcode。它是一个集成开发环境（IDE），是Apple指定的官方iOS开发工具。所有苹果应用程序都是由它打包和生成的。

它可以通过App Store 免费安装在Mac 电脑上。注意，Xcode仅支持Mac系统，不支持其他系统。

安装完成后，打开一个新项目，类型为单视图App，然后系统会询问一些项目参数和存储位置，这里不再详细解释。

然后，进入开发环境。

在左侧的目录树中，找到该文件，该文件负责视图逻辑。根据官方文档，填写下面的代码。

上面代码的意思是，当app启动加载view()时，会创建一个新的WebView控件实例。视图加载成功后（），WebView会加载外部网页（红框部分）。

然后，您可以查看代码执行的结果。点击工具栏上的运行按钮，Xcode会弹出一个iPhone模拟器，里面包含了当前代码的运行结果。

如果一切顺利的话，就可以让Xcode打包源码，生成App的二进制安装文件了。

3.2 Android StudioAndroid官方的开发工具是Android Studio，可以从官网下载。

安装完成后，打开一个类型为“Empty Activity”的新项目。

Android Studio会询问项目参数，包括项目名称、开发语言（Java）等，然后进入开发环境。因为是基于Java IDE修改的，了解Java的朋友应该对这个界面很熟悉。

按照网上这个教程，接下来需要修改三个文件，其中最重要的就是将文件改为如下。

上面红框中的代码是在页面上添加并设置WebView实例，并指定在生成view()时，WebView实例会加载外部网页。

在运行代码之前，Android Studio 需要连接真实设备或安装Android 模拟器。完成后，点击工具栏上的运行按钮，运行代码看看效果。

如果一切顺利的话，就可以让Android Studio打包生成App的二进制安装文件了。

上面的原生技术栈需要你自己创建一个新的WebView实例。相比之下，混合技术栈要简单得多。因为页面是网页，容器已经设置好了WebView，开发者直接编写页面即可。

4.1 框架种类在混合技术栈的各种容器框架中，最古老的就是PhoneGap，它诞生于2009年，后来在2011年被Adobe收购，更名为Adobe PhoneGap。

Adobe 后来将PhoneGap 的核心代码捐赠给Apache 基金会，作为一个名为Apache Cordova 的新开源项目。

PhoneGap 和Cordova 现在是两个独立开发的开源项目，但它们彼此密切相关。可以简单理解为Cordova是PhoneGap的核心，PhoneGap是Cordova的发行版。

后来其他人也开始基于Cordova封装自己的框架，所以市面上有很多基于Cordova的开源框架，比较出名的有Ionic、Monaca、Framework7等。

所有这些框架的共同点是，它们都使用Web技术（HTML5 + CSS + JavaScript）来开发页面，然后框架将其打包成iOS和Android App安装包。它们的优点是开发简单、周期短、成本低，但缺点是功能和性能有限。

4.2 Ionic 实例基于Cordova的框架的使用方式都是一样的。我们以Ionic为例，演示如何加载外部网页。

首先，根据官方文档生成项目脚手架。

然后打开文件并对其进行标记。

上面的代码中，由于页面本身就是一个网页，所以可以直接使用标签外部网页。

然后，在本机上启动一个Web服务，看看demo的效果。

上述命令会自动打开一个浏览器窗口，访问本机的8100端口，并在浏览器中显示网页效果。

如果一切正常，请在命令行窗口中按Ctrl+c 退出服务。编译成App安装包的方法请参考官方文档。

上述混合技术栈使用HTML语言编写页面，然后使用WebView控件加载页面，因此只需要编写一次页面即可支持多平台。跨平台技术栈也可以实现多平台支持，但原理完全不同。

跨平台技术栈的框架使用自己的语法来编写页面，而不使用Web技术。它在编译期间将它们转换为本机控件，或者使用自己的底层控件来生成本机应用程序。这样就彻底解决了网页性能差的问题。下面介绍三个这样的框架。

•React Native:使用JavaScipt语言编写页面•Xamarin：使用C#语言编写页面•Flutter：使用Dart语言编写页面

5.1 React Native（1）原理2013年，Facebook发布了React框架。该框架专为Web 开发而设计。核心思想是在网页之上建立一个UI抽象层。所有的数据操作都在这个抽象层完成（即在内存中完成），然后渲染到网页的DOM结构中，从而提高性能。

很快，工程师们意识到UI抽象层本质上是一种与底层设备无关的数据结构，不仅可以渲染成网页，也可以渲染成原生页面。在这种情况下，您只需要编写一次React页面，就可以分别编译成iOS和Android的原生应用程序。这就是React Native 项目的由来。

需要注意的是，虽然React Native也使用JavaScript语言，并且写得像Web页面一样，但实际上所有的控件都是自己定义的，并在编译时翻译成相应的原生控件。比如React Native的文本渲染控件，翻译成iOS控件，翻译成Android控件。这种方式既保证了性能又实现了跨平台支持，因此一诞生就引起了开发者的关注，成为热门技术。

还有一个NativeScript框架，它与React Native非常相似。它还使用JavaScript语言，然后将其编译为本机控件。然而，它的开发模型是基于Angular.js，而不是React。

（2）实例下面是React Native加载外部网页的示例。为了方便使用，官方团队提供了一个名为Expo的打包工具集。第一步是安装Expo App客户端（App Store、Google Play）。

然后，在命令行上安装脚手架工具并创建一个新的原理图项目。

创建新项目时，系统会要求您选择项目模板。您可以选择一个模板。然后还会要求你填写项目描述，你可以随便写。

然后，安装React Native自带的WebView控件。

上面的代码中，React Native自带的控件在编译时会被转换为分别适用于iOS和Android的原生WebView控件。

接下来预览页面效果。您可以先将其编译成Web版本并在浏览器中预览。这样速度更快，您可以立即看到效果。

（3）React Native 的问题React Native的想法虽然很精彩，但是实际开发中还是会出现各种各样的问题。

主要问题是UI抽象层翻译出来的iOS和Android原生页面并不完全一致，尤其是样式或功能存在差异的复杂页面。当为两个平台编译本机应用程序时，一个通常是正常的，而另一个会出现各种奇怪的故障。 React Native底层仍然没有实现无缝适配。目前还没有发布1.0版本（2019年底发布0.61版本），这或多或少说明了一些问题。

如果想要使用React Native在iOS和Android上达到同样的体验，并且充分发挥原生控件的功能，就需要同时熟悉React Native、iOS、Android这三个平台，这对于开发者来说确实要求太高了。在使用React Native 两年后，Airbnb 宣布放弃并转向原生技术栈。他们写了一篇很长的文章解释他们为什么这样做以及React Native 存在哪些问题。你可以参考那篇文章。

5.2 XamarinXamarin是微软的跨平台App开发框架。原理与React Native非常相似，只不过它的语言是C#。

它的使用需要Visual Studio，这里就不举例了。根据官方文档，WebView的用法如下。

上面的代码中，首先创建了一个新的WebView控件实例，然后将该实例放置在布局上，这与原生App的语法非常相似。

5.3 FlutterFlutter是Google最新的跨平台开发框架。它采用了完全不同的方案来解决React Native的平台差异问题。

它实现了自己的一组控件。打包时，这套控件会被打包到每个App中，所以不存在调用原生控件的问题。无论何种平台，只需调用自己的一套内置控件即可实现完全一致的iOS 和Android 体验。

Flutter出现时间不长，应用还没有广泛，API也还没有稳定。但非常值得。

加载外部网页的示例请参考Flutter官方团队的这篇文章。核心代码如下：

上面的代码使用了Dart语言。它是Flutter 的官方语言，接近JavaScript 语法，但具有额外的静态类型支持。

通过上面的介绍，希望大家已经了解了各种技术栈的特点。

（1）原生技术栈的技能和经验是最好的。对于复杂、规模较大的App，如果条件允许，应该采用这种方式开发。

（2）混合技术栈成本低，灵活性好，性能要求不高的简单App，尤其是纯显示页面，可以采用这种方式开发。

（3）跨平台技术栈适用于受外部或内部条件限制，只有一个团队开发跨平台应用的情况。

（正文结束）

一款APP的UI（用户界面）往往是APP成功与否的关键因素：产品外观是否美观、点击和滑动是否流畅、意图是否明确等都会影响用户留存率。好的UI不仅体现了产品经理和开发人员的素质，还可以有效降低新的获取成本。

一般开发者收到产品的UI设计方案后，可能会去网上寻找类似的效果，看看有没有开源代码。然而，优秀的开发人员会认真思考如何通过完全定制来实现这种效果，以达到最佳的功能和性能。

这就要求开发者具备实现高级UI的开发能力，了解Android UI的底层实现原理，比如自定义View渲染流程（--）、交互设计（事件）等。

如何高效学习高级Android UI开发，尽快晋升为高级Android工程师？这是香雪课堂《高级安卓 UI ——自定义 ViewGroup 与 UI 性能优化》的课程。带你一行一行的实现一个京东定制，研究系统和源码，最后通过阅读源码来分析设计过程中的显示问题和性能问题。下图是课程简介（点击放大）。

本课程为直播课程，实时在线问答。特邀Alvin老师（原三星/小米高级研发经理）主讲，只需要0.1元就能参与。如果听完课程觉得满意，还可以参加其他Android高级实践课程。

（完）

References应用程序类型：/blog/2019/12/hybrid-app-concepts.html

《腾讯课堂》:

《腾讯课堂101计划》:

官方文档：/documentation/webkit/wkwebview

官网：

本教程：

电话Gap:

阿帕奇科尔多瓦：

离子：

莫纳卡：

框架7:

官方文档：/docs/react/your-first-app

官方文档：/docs/react/your-first-app#build-a-native-app

NativeScript:

世博：

应用商店：

谷歌播放：

很长的文章：/airbnb-engineering/sunsetting-react-native-

官方文档：/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms

颤动：

本文：/flutter/the-power-of-webviews-in-flutter-a56234b57df2

Python+ Appium：Android手机连接与操作详解（附源码）

在移动自动化测试领域，

阿皮姆

它一直是最流行的开源工具之一。

在今天的文章中，我们重点关注

Android自动化测试的完整流程

，从环境配置到代码实战，一步步指导你掌握使用Python控制Android真机或模拟器的技巧。

先看效果！应用程序启动

1.Appium简介

Appium 是一个跨平台移动应用程序测试框架，支持：

• Android 本机/混合/移动网络应用程序

• iOS 本机/混合/移动网络应用程序

其最大的优点是：

使用相同的API 在不同平台上测试应用程序。

2. 准备清单

在开始之前，请确保您已准备好以下环境：

Appium服务器

3.完整的代码练习（带解释）

以下是使用Python控制Android手机打开指定应用并点击按钮的完整代码示例。

推荐的写法（Appium 2.x标准）

4、常见问题重点说明分析

为什么使用UiAutomator2Options？

Appium 2.x 版本建议使用Options 对象来配置所需的功能。代码更加结构化、清晰，兼容性更好。

如何获取appPackage和appActivity？

可以使用以下任一方法获取：

• Android Studio 的logcat 日志

• adb shell dumpsys 窗口| grep -E \'mCurrentFocus\'

• 使用Appium Inspector 或GUI 工具自动抓取

获取appPackage和appActivity

如果出现“无法连接到设备”错误，我该怎么办？

请确认：

• 手机已允许USB 调试

• adb devices 可以看到该设备

• Appium 服务已启动（默认端口4723）

adb devices 查看设备

5. 推荐应用场景

• 移动应用核心流程（登录、操作、退出）自动化测试

• 回归测试冒烟测试场景自动化

• 记录视觉结果（带有屏幕截图和屏幕录制）

• 自动点击/滑动以进行自动演示/模拟

6.后续通知：iOS自动化即将上线

iOS 也能用 Appium 吗？答案是：

当然可以！我会在下一篇文章详细讲解：

• iOS 设备准备和信任证书配置

• WebDriverAgent 的安装和签名

• 实机控制的常见陷阱和解决方案

希望今天的文章可以帮助大家更清楚的了解

如何使用Appium操作Android手机。

您想首先看到什么样的内容？

• Appium 高级实践

• iOS 自动化教程

• App自动打包+部署+测试集成

参考链接：