使用网页代码快速写出你自己的第一个手机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.


今天就分享到这啦!,之后还会继续更新,欢迎大家继续关注 !
  • 9
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值