一、手机APP开发 - 前端打包
1.1 三种APP开发模式
- web app
- 基于
html + css + js技术栈开发的APP - 通过编辑器的打包功能，将
.html文件打包成APP应用
- native app
- 原生APP就是利用Android、iOS平台官方的开发语言进行开发
- Android app开发：
javaIOS 开发：object-c / swift
- 混合开发
- 基于web app 和 native app 两种开发模式 混合进行开发
三种开发模式下的app的区别
- web app：
- 开发成本低、跨平台
- 需要联网，因为
html文件部署在远程服务器需要发送请求访问 - 更新版本方便(更新服务器部署的
html文件即可) - 移动设备功能有限
- native app：
- 开发成本高、Android/IOS需要单独开发
- 不需要联网，因为直接下载到本地
- 更新版本需要重新下载软件(体验差)
- 移动设备功能丰富
- 性能最优
- 混合开发：
- 比web app版实现功能多
- 跨平台
- 可离线运行，但部分内容依旧需要联网展现
1.2 理解webview
在移动设备上，不论是应用APP还是网页，都必须通过
webview来渲染html页面
- 理解浏览器内核
- 浏览器最重要或者说核心的部分为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责将网页语法进行解释（
html + css + js）并渲染成我们所看到的网页。 - 不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染效果也可能不同
- 以chrome为例，chrome的渲染引擎是WebKit 内核，那么
html页面就是由 webkit内核进行解释并渲染
- webview是什么？
- PC端上的浏览器一般由
webkit内核解析并渲染html页面 - 移动设备上的浏览器一般由
webview内核解析并渲染html页面 - Webview 是一个基于webkit的移动端渲染引擎
- webview用于什么地方？
- 手机系统层面如果没有webview支持，是无法展示html页面，webview的作用是手机系统来展示html界面的
- 一个原生app应用调用html页面的过程？
- 原生应用加载html页面 (走网络请求获取
html文件) - 加载完成，通过webview来渲染展示的
- 那么页面不光展示，有时候可能还需要交互，比如html界面的按钮需要调用系统原生的东西（比如：拍照，系统的文件，相册之类的）。原生端就负责维护html调用的接口，然后按照需要返回（原生端充当一个server的角色，html充当一个client角色）
1.3 APP打包
将一个
.html文件打包成APP需要经过以下几个步骤
- 注：hubdierX要注册邮箱，打包需要实名认证
- 下载
HBuilderX：https://www.dcloud.io/hbuilderx.html，选择APP开发板 - 在解压文件存储地址中找到HBuilderX.exe，直接双击运行HBuilderX.exe文件
- 新建项目，选中
H5+app类型
- 创建
H5+app项目后，删除所有文件，仅保留manifest.json文件，并将要打包的HTML项目导入进去 - 点击
manifest.json文件 对APP进行配置，图标只支持png格式
- 右键点击
H5+app项目，发行 -> 云打包 - 使用
DCLOUD老版证书打包，由于ios APP需要配置额外证书，因此只打包Android app - 打包完成，点击下载地址，进行下载
apk文件 - 下载安装模拟器，将
apk包拖动到模拟器上，测试项目
1.4 打包前端项目
- 将前端项目部署到远程服务器上
- 在
H5+app项目中新建index.html文件，编写js脚本，让页面跳转到前端页面所在的网址 - 重复上一个小章节的步骤，开始打包成app
注：js脚本中链接跳转时需要添加http前缀
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
