使用网页代码快速写出你自己的第一个手机App

前言

如果你会写html代码的话,那这篇文章带你快速也能写出一个移动客户端应用(安卓&IOS) , 首先我们来了解下App的几种常见形式.

1.原生App
原生APP，又称为Native App，就是利用Android、iOS平台官方的开发语言、开发类库、工具进行开发。比如安卓的java语言，iOS的object-c 语言。该模式通常是由“云服务器数据+APP应用客户端”两部份构成，APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。一般用户只能通过卖场和网络商店获得。
优点:

拥有手机的各种功能的权限，比如获取个人信息，摄像头以及重力加速器等等,快捷调用设备接口,也就是硬件使用能力高.
运行速度是三种App中最快的，用户体验最好.
手机用户无法上网也可访问APP应用中以前下载的数据.
官方提供大量的开发工具和人工支持来帮助开发

缺点:

开发成本高，周期长，安卓和ios都需要单独开发，且支持设备有限.
APP应用更新新功能，涉及到每次要向各个应用商店进行提交审核，审核期长

2.Web-App
Web版App，以Web开发语言开发的，在浏览器上运行的App , 而且它们不需要在设备上下载后安装。
优点:

支持范围广，兼容多种设备，开发成本低，周期短，可以即时上线
跨平台开发，用户通过浏览器访问，开发者更新仅需要通过服务器更新即可

缺点:

和原生App相比，性能和体验都大打折扣，对动画和图片支持较差
因为不通过App store下载，所以无法通过下载盈利
并不能访问手机的所有功能，很多权限受到限制，比如摄像头和GPS，重力加速器等
假如没有联网，则不能使用
用户使用更新型的浏览器，则更可能出现兼容性问题

3.混合App
混合App也称为 Hybrid App , 顾名思义也就是多种形式技术的结合版,它结合Web版App和原生App两种技术来进行开发，两种技术的混合比例不限。
它虽然看上去是一个原生App，但只有一个UI WebView，里面访问的是一个WebApp.
优点:

和Web版App一样可兼容多平台
部分内容不需要联网也可以获取
可以访问手机的功能要比Web版App更多，但是依然比不上原生的App.
可以在App商店下载

缺点:

性能和速度依旧比不上原生App
技术不够成熟,比如Facebook现在的应用属于混合应用它可以在许多App Store畅通无阻，但是掺杂了大量Web特性，所以它运行速度比较慢，而现在为了提高性能FB又决定采用原生应用。

了解三种App形式后,下面我们来开发一个混合App.
使用工具:
下面使用的是 HBuilder X 进行演示 , 安卓设备(小米手机).
(可选) : 也可以使用自己的服务器,实现手机客户端连网访问服务器端,如果没有域名的小伙伴可以利用 natapp 内网穿透工具连接公网,进行测试 .

1. 在 HBuilder X 中创建一个 5+App 的项目;

2. 打开项目后会看到以下文件结构 , 其中manifest.json的文件用于App的相关配置.(比如图标,权限的配置)

3. 在它提供的index.html文件中编写代码,发挥你的想象力啦,(也可以找找模板复制过来),本人做的是简陋版QQ登录界面.

4. 编写好后 , 最关键的步骤 - 打包.
选择工具栏上的 => 原生App-云打包

5. 然后对打包App进行配置 , 这里修改下使用公共证书选项 , 根据你的需要选择打包的类型(安卓或者IOS). 配置好后,点击打包即可.

6. 打包完后控制台会出现一个下载链接,下载安装后,点击运行就可以看到你所写的效果啦!

运行后~

这里在介绍一种方式,就是点在工具界面点击运行按钮,使用同步更新App,在页面所做修改的都能及时的响应给手机客户端,方便调试.,第一次点运行会提示需要安装插件,安装后用USB的方式让手机与电脑连接,手机打开开发者选项中的USB调试 , 准备好后在点运行,(如果还是提示未找到设备就重启工具),它会自动在手机安装App,不需要打包.且能动态随着修改而更新App.

今天就分享到这啦!,之后还会继续更新，欢迎大家继续关注 !

使用网页代码快速写出你自己的第一个手机App相关推荐

Java的IDEA最常用快捷键汇总+快速写出Main函数
前言 IDEA可以说是当下Java程序员日常开发的神器,但是想要发挥这款神器的牛逼威力,必须得熟练使用它的各种快捷键才行.本篇总结下使用IDEA(也就是IntelliJ IDEA )进行日常开发中最常 ...
用聚合数据API快速写出小程序
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:h ...
用聚合数据API（苏州实时公交API）快速写出小程序
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:h ...
用聚合数据API快速写出小程序（苏州实时公交）
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:h ...
html如何使用聚合数据,用聚合数据API快速写出小程序
利件览客需和下于有快都业视的事一房望站是有用聚合数据API快速写出小程序,过程简抖要支圈者器说是事天开的.年后编定功口小发还单. 1.申请小程遇新是直朋能到分览序账号 2.进入开发 3.调友,记基开前 ...
用聚合数据API快速写出小程序 1
利用聚合数据API快速写出小程序,过程简单. 1.申请小程序账号 2.进入开发 3.调用API.比如"苏州实时公交"小程序,选择的是苏州实时公交API. 苏州实时公交API文档:h ...
【latex】5 如何快速写出公式对应的latex公式
<latex 学习笔记> [latex]1 环境安装与快速上手 [latex]2 使用Aurora与在word中编写伪代码 [latex]3 会议期刊论文模板的使用方法 [latex]4 ...
c++如何快速写出get set_如何快速写出一篇合格的毕业论文
从自己毕业时艰难的才能在三个月内完成一篇,到如今十天内就可以整出来一篇,不需要加班的那种.本人的专业是法律硕士,在此仅以法律专业为例,如何快速写出一篇合格的毕业论文.事实告诉你,完全不用20天时间. ...
掌握这几点让你快速写出优质电影解说文案！
掌握这几点让你快速写出优质电影解说文案! 大家好,今天和小伙伴们聊聊我如何快速写出一篇电影解说方案. 电影解说文案可以通过五步来写:1.选电影.2.找线或点.3.把线或点串起来.4.润色文案.5.故 ...

使用网页代码快速写出你自己的第一个手机App

前言

使用网页代码快速写出你自己的第一个手机App相关推荐

最新文章

热门文章