手机上生成html文件

2025-03-1010:18:44营销方案0

很好的文章,我已经对文章进行了适度的修改,保留了原有的意思和风格,同时去除了AI痕迹,使之更贴近真人写作的风格。

新人学习App开发,选择一条学习路径是首要任务。

如果你熟悉Java语言,可以学习安卓开发;如果熟悉脚本语言(比如Python或Ruby),可以学习Swift语言,进行iOS开发;如果你像我一样,比较熟悉Web网页技术,那么H5开发是最容易上手的。

本文是系列教程的第一篇,已经介绍了App的种类。所谓的H5页面,其实就是混合App的前端,外面是一个原生的壳,里面是Web网页。本文紧接着上一篇,介绍App开发的技术栈,尤其是与H5开发相关的技术。

本文由国内最大的在线教育平台之一“腾讯课堂”赞助。他们现在启动了“腾讯课堂101计划”,推广优质课程资源。希望学习和提高手机App开发技术的朋友,可以关注一下本文结尾的安卓课程信息。

App的技术栈可以分为三类。

(1)原生App技术栈(native technology stack)

原生技术栈指的是只能用于特定平台的开发技术。比如安卓平台的Java技术栈,iOS平台的Object-C技术栈或Swift技术栈。这种技术栈只能在一个平台上使用,不能跨平台。

(2)混合App技术栈(rid 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层即怎么写页面。

另外混合技术栈和跨平台技术栈的基础都是原生技术栈因为最终都要编译成原生App。所以不管使用哪一种技术栈多多少少要了解一些各平台的原生技术。

下面就依次介绍上面三类技术栈每个技术栈都会给出一个最简单的例子加载网页。通过各种技术栈加载网页的不同做法帮助大家理解它们的特点对App的技术实现有一个总体的认识。

讲解具体的技术栈之前大家需要知道不管什么技术最终在App里面显示网页一定要有一个网页引擎这样才能解析网页。

通常情况下App内部会使用WebView控件作为网页引擎。这是系统自带的控件专门用来显示网页。应用程序的界面只要放上WebView就可以显示网页了。

不同的App技术栈要显示网页区别在于怎么处理WebView这个原生控件。原生技术栈需要开发者自己把WebView控件放到页面上;混合技术栈页面本身就是网页默认在WebView中显示;跨平台技术栈提供一个WebView的语法编译的时候将其换成原生的WebView。

注意不同系统的WebView控件名称不一样安卓系统就叫WebViewiOS系统有较老的UIWebView也有较新的WKWebView作用都是一样的差异在于功能的强弱。

原生技术栈分为iOS和安卓两个平台。简单说iOS的原生技术栈就是使用Object-C语言或Swift语言在Xcode开发环境中编程。安卓的原生技术栈则是使用Java语言或Kotlin语言开发环境是Android Studio。

接下来看看它们怎么加载网页。

首先是XcodeiOS开发需要安装Xcode它是一种集成开发环境(IDE)也是苹果公司指定的iOS官方开发工具所有苹果的App都由它打包生成。它可以在Mac电脑上通过应用商店免费安装注意Xcode只支持Mac系统不支持其他系统。安装完成后打开新建一个项目类型是单视图App然后系统会询问一些项目参数和储存位置这里就不详细说明了。然后进入了开发环境。左侧的目录树里面找到文件它负责视图逻辑。按照官方文档填入下面的代码。上面代码的意思是启动App加载视图的时候()新建一个WebView控件的实例。视图加载成功后()WebView再去加载外部网页(红框部分)。然后可以查看代码运行结果。点击工具栏的运行按钮Xcode就会弹出一个iPhone模拟器里面就是当前代码的运行结果。如果一切正常就可以让Xcode对源码打包生成App的安装文件。 安卓的官方开发工具是Android Studio可以去下载。安装完成后打开新建一个项目类型是“Empty Activity”。Android Studio会询问项目参数包括项目名称、开发语言(Java)等然后就进入了开发环境因为它是基于Java IDE修改的懂Java的朋友应该对这个界面比较熟悉。按照网上的这篇教程接下来需要修改三个文件其中最主要的是把文件改成下面这样。上面红框处的代码就是在页面上添加并设置WebView实例指定生成视图的时候()WebView实例去加载外部网页。运行代码之前Android Studio要求必须连接真机或安装安卓模拟器。完成以后后在工具栏上点击运行按钮就可以运行代码查看效果了。如果一切正常就可以

  • 版权说明:
  • 本文内容由互联网用户自发贡献,本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 295052769@qq.com 举报,一经查实,本站将立刻删除。