uni-app day02

复习：

1、uni-app是一个基于Vue.js的MVVM框架，用于需要“多端适配”的应用，一套代码，可以编译为H5、WebApp、各类小程序。

2、uni-app项目的基本目录结构

pages
static
components：保存自定义组件
uni_modules：保存uni-ui扩展组件库中的组件
unpackage：保存不会被打包安装到手机中的文件
-----------------------------------------------------------
App.vue
index.html
main.js
pages.json：声明路由列表 / 全局标题栏配置 / 全局页签栏配置
manifest.json：项目配置清单
uni.scss：全局的样式变量

3、uni-app中可用的组件

第一类：内置组件/原生组件/内置组件 —— 无需导入直接使用
	view、text、image、input、button、rich-text....
第二类：扩展组件uni-ui(官方+第三方) —— 需要下载到uni_modules目录才能使用
	uni-rate、uni-list、uni-card....
第三类：自定义组件 —— 需要编写在components目录下才能使用
	①创建：创建在components目录下，且还有同名父目录  
	②声明(不需要）
	③使用 

一、uni-app中的条件编译（类似于C语言中的条件编译）

不同的运行平台终归有些专有的特性，无法实现跨平台完全兼容，例如：微信小程序导航栏右上角的关闭图标。uni-app提供了一种“条件编译”机制，可以针对特定的平台编译执行特定的代码，否则不执行。语法如下： def: define ndef: not define
#ifdef H5 仅在H5平台下编译执行的代码 #endif
#ifdef H5 || APP || MP-WEIXIN 仅在H5和APP和微信小程序平台下编译执行的代码 #endif
#ifndef H5 仅在非H5平台下编译执行的代码 #endif
说明：
①条件编译语句可以编写在template / style / script 等各类代码中。
②更多的条件编译平台可以参见手册：https://uniapp.dcloud.io/platform

二、面试题：企业项目的开发流程

公司/项目两种类型：
①产品型公司的自研项目(产品经理)
②项目型公司的外包项目(甲方需求)

大型项目的软件生命周期：

	阶段名称	负责人	主要内容	主要产出
1	可行性研究	项目分析师	技术、时间、资金、环境、用户、法规	《可行性研究报告》
2	需求分析	产品经理或需求分析师	功能点：登录、支付、验证、筛选… 非功能性需求：安全、性能、可用性…	《需求规约》
3	概要设计	项目架构师	体系架构、前端架构、后端架构、模块划分、功能点划分	《概要设计说明书》
4	详细设计	项目设计师	页面逻辑、对象、方法、算法	《详细设计说明书》
5	开发实现	UI设计师、前端工程师、后端工程师	设计图、前端页面、后端业务逻辑	《开发卷宗》
6	测试	测试工程师 功能测试、非功能测试 《测试报告》
7	部署上线	运维工程师	服务器环境、机房、域名、软件、运行	《项目实施报告》
8	维护	运维工程师	长期跟进，关注性能、安全、更新

小型项目的简化版流程：

	阶段名称	负责人	主要内容	主要产出
1	需求对接	甲方、产品经理	明确需求	《需求说明》
2	UI设计	UI设计师	出设计图
3	前端开发	前端工程师	编写静态页面、数据联调
4	后端开发	后端工程师	搭建数据结构、编写API
5	测试上线	测试/运维	找bug，部署上线

项目前端团队每日的工作流程：

人员	工作内容
项目创始人	①创建一个空白项目 ②编写必需的基础页面(pages)，确定每个页面名称和结构 ③创建路由词典，为每个页面分配路由地址 ④编写必需的公共组件，确定工作组件的名称和结构 ⑤编写全局的样式变量和公共样式 ⑥把后端数据接口进行封装 ⑦把上述项目结构推送到项目公共仓库
项目组员	①早上：开晨会，了解项目需求/进度，分配任务 ②白天：从公共仓库中拉取文件，开始编写自己的任务 ③晚上：下班前，将自己的成果提交到公共仓库 ④第二天早上：… ⑤第二天白天：…

三、uni-app中的模板

1.view：最简单的容器组件，相当于HTML中的div
2.text：最简单的文本组件，相当于HTML中的span
3.image：用于展示图片的组件，类似于HTML中的img
①默认image的尺寸都是320*240
②默认情况下，修改图片的宽度，高度不会自动等比例缩放
③可以指定mode=“widthFix”，实现“宽度固定，高度自动等比例缩放”

四、uni-app中的样式

1、uni-app支持的尺寸单位：em、vw/vh、%、px、rpx
2、多个页面或组件共享的样式变量编写在 uni.scss；
3、多个页面或组件共享的样式编写在 App.vue；

小程序、uni-app支持的全新尺寸单位：Responsive Pixel —— rpx，响应式像素数

因为不同的手机屏幕尺寸不同，如果做适配的话，传统的尺寸很麻烦；小程序引入了全新的尺寸单位，rpx —— 不论实际物理屏幕尺寸有多大，一律认为是750rpx
320px <=> 750rpx
360px <=> 750rpx
414px <=> 750rpx
这样一来，假设有个图片占屏幕宽度一半，width应该设定为 750rpx/2 = 375rpx

小测验：

有个按钮在360px的屏幕下，显示宽度是200px；如果转换为rpx的话，应该是多少？
360px 750rpx
------- = --------- ? = 200 * (750/360)
200px ?rpx

五、uni-app中的脚本