H5的两种解释: |
---|
①HTML5的简称 |
②H5:指可以在手机中浏览/分享的网页,要求快速开发/快速修改/快速丢弃,成本低! |
一、 重点面试题:移动端应用的种类
- NativeApp:原生App,指Android下使用Java/Kotlin开发、iOS下使用Objective-C/Swift开发的App
- 优势:性能高,功能丰富
- 不足:代码互不兼容,开发成本高
- H5:使用HTML/CSS/JS开发的手机端网页,需要Web服务器/域名,转化为二维码在朋友圈中分享
- WebApp:使用HTML/CSS/JS开发的手机端网页,不需要Web服务器/域名,直接打包为.apk/.ipa发布到市场用户下载并安装,点击图标就可以启动
- 优势:开发成本低、兼容性好、用户粘性好、性能比H5好
- 不足:功能有缺失
- HybridApp:混合App,使用HTML/CSS/JS + JAVA/OC + Native.js,打包为.apk/.ipa发布到市场用户下载并安装,点击图标就可以启动
- 优势:开发成本可控、兼容性好、用户粘性好、核心功能性能好
- 小程序
- 鸿蒙方舟框架
- Flutter:谷歌推出的新框架,使用Dart语言编写的App,直接在手机绘图芯片绘制页面内容
不同的前端框架可以开发哪些移动端应用? |
---|
Vue.js: PC端网站、H5网页、WebApp |
React: PC端网站、H5网页、WebApp、原生App(JS=>JAVA/OC) |
uni-app:PC端网站、H5网页、WebApp、小程序、混合App |
软件过程 —— 三个时期八个阶段
- 软件定义期:
①可行性研究阶段
②需求分析阶段 —— 产品型公司(产品经理)、项目型公司(项目经理) - 软件开发期:
③概要设计阶段
④详细设计阶段
⑤编码实现阶段: UI + 前端 + 后端
⑥测试阶段 - 软件维护期:
⑦部署阶段
⑧维护阶段
程序员日常的开发流程是什么样的?
- 项目起草者:
- 创建项目基础目录结构:pages、components、scss、function、具体算法
- 上传到项目仓库
- 项目组员——没有创建文件/创建样式/指定算法的权限:
- 早上:分解任务、下载项目仓库到本地
- 白天:完成自己的任务…
- 晚上:提交自己工作内容到远程仓库,下班
三、 uni-app概述
官网: https://uniapp.dcloud.io
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
- 演示1:创建一个示例项目,在浏览器中调试运行 —— 即uni-app编译为H5网站
- 演示2:创建一个示例项目,在安卓手机中调试运行 —— 即uni-app编译为App
- 演示3:创建一个示例项目,作为微信小程序中调试运行 —— 即uni-app编译为微信小程序
四、 我的第一个uni-app项目
项目目录介绍:
五、uni-app中的条件编译
不同的运行平台终归有些专有的特性,无法实现跨平台完全兼容,例如:微信小程序导航栏右上角的关闭图标。uni-app提供了一种“条件编译”机制,可以针对特定的平台编译执行特定的代码,否则不执行。语法如下:
下面展示一些 内联代码片
。
#ifdef H5
仅在H5平台下编译执行的代码
#endif
#ifdef H5 || APP || MP-WEIXIN
仅在H5和APP和微信小程序平台下编译执行的代码
#endif
#ifndef H5
仅在非H5平台下编译执行的代码
#endif
说明:
①条件编译语句可以编写在template / style / script 等各类代码中。
②更多的条件编译平台可以参见手册:https://uniapp.dcloud.io/platform