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

---

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