个人自我总结

在本次项目中大活动中，我担任产品经理和前端工程师一职。我们使用的是小程序作为载体。在项目前期最重要的是共同探讨产品的基本功能和实现逻辑，我们设计了“浏览活动列表”、“查看活动详情”、“报名活动”、“发布活动”4个用例。之后由我设计出能够实现的产品需求说明书。

在前端的编写中，我负责活动详情部分的完成。

在本次课程过程中，我极大的感受到了迭代开发对于项目的重要程度，熟悉了领域模型与逻辑架构。

致谢：

总组长：Tang Xuanzhao

前端组长：SitingSong-SYSU

前端需求设计与架构：JackBtype、bbycjhj

前段架构：starthemoon

PSP 2.1 个人统计表

git统计报告

• front-end：

• Document：（提交邮箱问题无法显示，换为git log方式显示）

最有价值工作清单：

• 海报墙和个人页面需求文档
• 活动详细页面代码书写

技术学习博客

微信小程序生命周期分析
button组件在使用中的心得
mockjs应用在VUE设计中的尝试

使用 ECB 实现 make reservation 用例的详细设计（包含用例简介，顺序图，类图）将逻辑设计类图映射到实际项目框架的包图。用树形结构表述实现的包和类

识别出来的ECB为：

• Boundary:

• UserLoginPage

• ChooseLocationPage

• ChooseHotelPage
• ChooseRoomPage
• RoomDetailPage
• BasketPage
• ReservationPage

• PaymentPage

• Controller:

• ReservationController

• Entity:

• Location

• Hotel
• Room
• Reservation
• PaymentOrder

顺序图：

类图：

树形结构：

描述软件架构与框架之间的区别与联系

• 软件架构；软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。软件架构是一组重要决策，其中涉及软件系统的组织，对结构元素及其组成系统所藉接口的选择，这些元素特定于其相互协作的行为，这些结构和行为元素到规模更大的子系统的组成，以及指导该组织结构（这些元素及其接口、协作和组成）的架构风格。

• 软件框架：

• 框架是特定语言和技术的架构应用解决方案。

• 其包含具体和抽象类，这些类定义了需要遵循的接口、需要参与的对象交互以及其他的不变式。
• 框架是集成了你的代码和多种第三方解决方案的工具，让你聚焦 业务逻辑代码 而 不是技术实现。

软件架构是一种软件设计的策略，而软件框架则是为了实现某种软件规范而提供基础功能实现的软件产品。软件架构不是软件，它决定了软件系统结构的划分以及各子系统之间的关系，软件框架则实现了软件架构中的基础功能，软件架构的一些决策会在框架中得到体现。

以你的项目为例

绘制三层架构模型图，细致到分区

结合你程序的结构，从程序员角度说明三层架构给开发者带来的便利

可以很容易的用新的实现来替换原有层次的实现；不同层负责不同的层面安全性高。用户端只能通过逻辑层来访问数据层；项目结构更清楚，分工更明确，有利于后期的维护和升级；分层架构使的开发者可以更容易地扩展功能，添加新的子系统和模块。

研究 VUE 与 Flux 状态管理的异同

Flux 状态管理：

MVC 中，一个 Model 可以被多个 Views 读取或被多个 Controllers 进行更新。在大型应用中，一个 Model 可能使多个 Views 去通知 Controllers，并可能触发更多的 Model 更新，这样结果就会变得非常复杂。Flux 通过强制单向数据流来解决这个额问题。Flux 使 Views 查询 Stores（而不是 Models），用户交互触发的 Actions 被提交到一个 Dispatcher 中。当 Actions 被派发后，Stores 将会随之更新自己并且通知 Views 进行修改。这些 Store 当中的修改会进一步促使 Views 查询新的数据。即在相对独立的组件中，action -> state -> view 的单向数据流能得到保证。

VUE 状态管理：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

• 应用级的状态由store集中管理
• 修改状态的唯一方式是commit同步的mutation
• 异步逻辑放在action里

与 flux 对比，最大的区别是Vuex把action细分成了action和mutation，分别应对异步场景和同步场景，由store自身充当dispatcher（负责注册/分发action/(mutation)。即如果把 action 和 mutation 看作一层（Flux里的action），二者结构完全一致

根据课程格子文档，完成以下建模任务

用例图

添加课程活动图

创建课程顺序图

课程表状态图

###领域模型图

文档地址

1.使用 UML State Model

• 建模对象： 参考 Asg_RH 文档， 对 Reservation/Order 对象建模。
• 建模要求： 参考练习不能提供足够信息帮助你对订单对象建模，请参考现在 定旅馆 的旅游网站，尽可能分析围绕订单发生的各种情况，直到订单通过销售事件（柜台销售）结束订单

2. 研究淘宝退货流程活动图，对退货业务对象状态建模

在本次前端代码的编写过程中，我负责的主要是活动详情和报名页面。在两个页面中，均存在buttom组件的应用。在这里我简单记录下这一组件的使用方法。

小程序中的button除了是个单纯的按钮之外包含很多其他功能,除了前边有一些很基本的的如size,type,plain, disabled,loading等这类比较常规的选项之外，后边还有一些其他我感觉有点新鲜的功能。

1. 首先是hover-stop-propagation

看名字就能看出来是阻止冒泡。作用是阻止本节点的祖先节点先出现点击态，默认false，这一次就用到了这个。

2. hover-start-time和hover-stay-time

分别表示按住后多久出现点击状态以及手指松开后点击状态保留时间，单位毫秒。

3. bindgetuserinfo

用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同wx.getUserInfo

4. session-from, send-message-title, send-message-path, send-message-img, show-message-card, bindcontact

均显示open-type=”contact”，与客服消息有关。暂时还用不到。

<button open-type="contact">进入客服会话</button>

5.bindgettphonenumber

获取用户手机号回调

6. open-type有效值：

1
2
3
4

<view class="{{'blue-button'}}" bindtap="{{'enrollButtonTap'}}" data-poster-id="{{currentPoster.posterId}}">
<view class="{{'button-innerText'}}">{{statusText[0]}}
</view>
</view>

领域模型

领域模型

阅读 Asg_RH 文档，按Task2要求，按用例构建领域模型

E-R模型

按 Task 3 要求，给出系统的 E-R 模型（数据逻辑模型）

SQL脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124

-- MySQL Script generated by MySQL Workbench
-- Sun Apr 29 21:47:14 2018
-- Model: New Model    Version: 1.0
-- MySQL Workbench Forward Engineering

SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0;
SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0;
SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL,ALLOW_INVALID_DATES';

-- -----------------------------------------------------
-- Schema mydb
-- -----------------------------------------------------

-- -----------------------------------------------------
-- Schema mydb
-- -----------------------------------------------------
CREATE SCHEMA IF NOT EXISTS `mydb` DEFAULT CHARACTER SET utf8 ;
USE `mydb` ;

-- -----------------------------------------------------
-- Table `mydb`.`address`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`address` (
`id` INT NOT NULL,
`city` VARCHAR(45) NOT NULL,
`road` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`))
ENGINE = InnoDB;


-- -----------------------------------------------------
-- Table `mydb`.`hotel`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`hotel` (
`id` INT NOT NULL,
`name` VARCHAR(45) NOT NULL,
`rating` INT NOT NULL,
`average_price` INT NOT NULL,
`address_id` INT NOT NULL,
PRIMARY KEY (`id`),
INDEX `fk_hotel_address_idx` (`address_id` ASC),
CONSTRAINT `fk_hotel_address`
FOREIGN KEY (`address_id`)
REFERENCES `mydb`.`address` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;


-- -----------------------------------------------------
-- Table `mydb`.`room`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`room` (
`id` INT NOT NULL,
`price` INT NOT NULL,
`type` VARCHAR(45) NOT NULL,
`hotel_id` INT NOT NULL,
PRIMARY KEY (`id`),
INDEX `fk_room_hotel1_idx` (`hotel_id` ASC),
CONSTRAINT `fk_room_hotel1`
FOREIGN KEY (`hotel_id`)
REFERENCES `mydb`.`hotel` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;


-- -----------------------------------------------------
-- Table `mydb`.`reservation_customer`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`reservation_customer` (
`id` INT NOT NULL,
`email` VARCHAR(45) NOT NULL,
`name` VARCHAR(45) NOT NULL,
PRIMARY KEY (`id`))
ENGINE = InnoDB;


-- -----------------------------------------------------
-- Table `mydb`.`reservation`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`reservation` (
`id` INT NOT NULL,
`checkIn_data` DATETIME NOT NULL,
`checkOut_data` DATETIME NOT NULL,
`hotel_id` INT NOT NULL,
`reservation_customer_id` INT NOT NULL,
PRIMARY KEY (`id`),
INDEX `fk_reservation_hotel1_idx` (`hotel_id` ASC),
INDEX `fk_reservation_reservation_customer1_idx` (`reservation_customer_id` ASC),
CONSTRAINT `fk_reservation_hotel1`
FOREIGN KEY (`hotel_id`)
REFERENCES `mydb`.`hotel` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION,
CONSTRAINT `fk_reservation_reservation_customer1`
FOREIGN KEY (`reservation_customer_id`)
REFERENCES `mydb`.`reservation_customer` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;


-- -----------------------------------------------------
-- Table `mydb`.`reservation_room`
-- -----------------------------------------------------
CREATE TABLE IF NOT EXISTS `mydb`.`reservation_room` (
`id` INT NOT NULL,
`adults` INT NOT NULL,
`children` INT NOT NULL,
`reservation_id` INT NOT NULL,
PRIMARY KEY (`id`),
INDEX `fk_reservation_room_reservation1_idx` (`reservation_id` ASC),
CONSTRAINT `fk_reservation_room_reservation1`
FOREIGN KEY (`reservation_id`)
REFERENCES `mydb`.`reservation` (`id`)
ON DELETE NO ACTION
ON UPDATE NO ACTION)
ENGINE = InnoDB;


SET SQL_MODE=@OLD_SQL_MODE;
SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS;
SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS;

简单叙说数据库逻辑模型与领域模型的异同

1. 领域模型根据用例场景分析得到实体，而数据库逻辑模型式根据场景分析业务实体之间的关系，二者视角不同；
2. 领域模型的实体并不是全部都需要存储下来的，而数据库逻辑的实体要受到数据关系范式的限制；
3. 数据库逻辑模型以数据为中心，关注的是对象的实体和关系，建模时不考虑Entity的行为；而领域模型是属于对象建模的范畴，需要为对象建立行为。

用例建模

a.阅读 Asg_RH 文档，绘制用例图。 按 Task1 要求，请使用工具 UMLet，截图格式务必是 png 并控制尺寸

页面一：输入地点，入住时间，搜索按键来搜索酒店。

页面二：页面一输入的地点不在数据库中，则按照地区进行搜索。

页面三：通知用户预定酒店流程，包括搜索、选择酒店、选择房间类型、确认预定。重述用户的需求以及查询出的酒店列表。

页面四：进入某一酒店的预订界面。输入入住日期和房间信息。若不可用返回无房间信息。

页面五：用户确认订单。

页面六：输入用户名。

页面七：输入用户邮箱。

页面八：付款流程的订单总额页面。

页面九：付款流程的信用卡选择页面。

页面十：付款流程的支付页面，邮箱返回预定成功信息。

b. 选择你熟悉的定旅馆在线服务系统（或移动 APP），如绘制用例图。并满足以下要求：

对比 Asg_RH 用例图，请用色彩标注出创新用例或子用例

尽可能识别外部系统，并用色彩标注新的外部系统和服务

携程预定酒店流程如下：

页面一：输入地点，入住时间，房间类型，酒店级别，关键字来搜索酒店。若无直接根据附近地区修改。

页面二：重述用户的需求并可以进行修改，改变排序方式，以及查询出的酒店列表。以及在地图显示地理位置，酒店信息，酒店交通大致信息。

页面三：进入某一酒店的预订界面。显示酒店可以预定的房型列表。

页面四：用户确认订单。输入姓名，手机号，邮箱可选。以及可选保险。

页面五：支付页面，选择支付方式支付。

页面六：支付成功页面，手机短信返回预定成功信息。（未体现）

页面七：评价页面，评价入住体验。（未体现）

c. 对比两个时代、不同地区产品的用例图，总结在项目早期，发现创新的思路与方法

• 简化整合流程，减少页面的数量，降低使用成本。将必要的信息集中处理，减少分散在多个页面的情况。
• 结合最新的外部系统。如新的支付方式第三方支付等，加入出行保险，多方位提供服务。手机短信代替邮件。地图显示地理位置等。

d.请使用 SCRUM 方法，在（任务b）用例图基础上，编制某定旅馆开发的需求 （backlog）

搜索酒店：选择地区、日期、关键字，酒店星级，点击搜索。
展示详情：展现酒店具体地理位置，酒店具体信息和到达酒店交通情况。
预定酒店：选择酒店，房间类型，是否购买保险，显示订单详情并确认。
支付订单：选择支付方式，跳转到支付系统 ，根据填入的手机号和邮箱返回信息。
用户反馈：收集用户反馈信息和评分。

业务建模

a. 在（任务b）基础上，用活动图建模找酒店用例。简述利用流程图发现子用例的方法

利用流程图发现子用例：沿流程图状态传递，任意一个的分支点到流程图的结束状态，就是一个子用例

b. 选择你身边的银行 ATM，用活动图描绘取款业务流程

c. 查找淘宝退货业务官方文档，使用多泳道图，表达客户、淘宝网、淘宝商家服务系统、商家等用户和系统协同完成退货业务的过程。分析客户要完成退货业务，在淘宝网上需要实现哪些系统用例

用例文本编写

在大作业基础上，分析三种用例文本的优点和缺点

关于mockjs，官网描述的是

1.前后端分离

2.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

3.数据类型丰富

4.通过随机数据，模拟各种场景。

总结起来就是在后端接口没有开发完成之前，前端可以用已有的接口文档，在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理，这样真正实现了前后台的分离开发。

与以往的自己模拟的假数据不同，mockjs可以带给我们的是：在后台接口未开发完成之前模拟数据，并返回，完成前台的交互；在后台数据完成之后，你所做的只是去掉mockjs：停止拦截真实的ajax，仅此而已。

在项目中尝试了mockjs，mock数据，实现前后端分离开发。

1.安装vue-cli全局脚手架

npm install –global vue-cli

2.创建vue项目

vue init webpack mockjs
cd mockjs
npm install axios –save

3.安装mockjs

npm install mockjs –save-dev

在安装过程中我出现了以下问题：

npm install stylus-loader 警告

需要另外一个组件支持，

npm install –save stylus stylus-loader

这样搭建好VUE，项目目录如下：

axios/api 用来封装axios

Hello.vue 页面首页

NeswCell.vue 新闻组件

router/index.js 路由

main.js 入口js

mock.js mockjs文件

5.在入口js里引入mockjs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

// 引入mockjs
require('./mock.js')

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})

Vue.filter('getYMD', function(input) {
return input.split(' ')[0];
})

6. 添加一个mock规则

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 100; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), //  Random.csentence( min, max )
thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
}
articles.push(newArticleObject)
}

return {
articles: articles
}
}

// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData);

7. 在Hello.vue 中请求文档接口，并接收mock数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<template>
<div class="index">
<div v-for="(item, key) in newsListShow">
<news-cell
:newsDate="item"
:key="key"
></news-cell>
</div>
</div>
</template>

<script>
import api from './../axios/api.js'
import NewsCell from './NewsCell.vue'

export default {
name: 'index',
data () {
return {
newsListShow: [],
}
},
components: {
NewsCell
},
created() {
this.setNewsApi();
},
methods:{
setNewsApi: function() {
api.JH_news('/news/index', 'type=top&key=123456')
.then(res => {
console.log(res);
this.newsListShow = res.articles;
});
},
}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.topNav{
width: 100%;
background: #ED4040;
position: fixed;
top:0rem;
left: 0;
z-index: 10;
}
.simpleNav{
width: 100%;
line-height: 1rem;
overflow: hidden;
overflow-x: auto;
text-align: center;
font-size: 0;
font-family: '微软雅黑';
white-space: nowrap;
}
.simpleNav::-webkit-scrollbar{height:0px}
.simpleNavBar{
display: inline-block;
width: 1.2rem;
color:#fff;
font-size:0.3rem;
}
.navActive{
color: #000;
border-bottom: 0.05rem solid #000;
}
.placeholder{
width:100%;
height: 1rem;
}
</style>

8. 在NewsCell.vue展示数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122

<template>
<section class="financial-list">
<section class="collect" @click="jumpPage">
<aside>
<h2>{{newsDate.title}}</h2>
<section class="Cleft clearfix">
<img class="fl" src="./../assets/icon/eyes.png" style="width:0.24rem;height:0.2rem;">
<span class="fl">{{newsDate.author_name}}</span>
</section>
<section class="Cright">
<img src="./../assets/icon/clock.png" style="width:0.2rem;height:0.2rem;">
<span>{{newsDate.date | getYMD}}</span>
</section>
<div style="clear: both"></div>
</aside>
<aside>
<img :src="newsDate.thumbnail_pic_s" style="border-radius: 0.2rem;">
</aside>
<div style="clear: both"></div>
</section>
</section>
</template>

<script>
export default {
name: 'NewsCell',
props: {
newsDate: Object
},
data () {
return {
}
},
computed: {
},
methods: {
jumpPage: function () {
window.location.href = this.newsDate.url
}
}
}
</script>

<style scoped>
.financial-list {
width: 100%;
height: 100%;
background-color: white;
padding: 0.28rem 0;
border-bottom: 1px solid #ccc;
}

.financial-list .collect {
width: 92%;
margin: 0 auto;
}

.financial-list .collect aside:nth-of-type(1) {
width: 63%;
float: left;
}

.financial-list .collect aside:nth-of-type(2) {
width: 32%;
height: 2rem;
float: left;
margin-left: 0.3rem;
}

.financial-list .collect h2 {
width: 100%;
height: 0.96rem;
font-size: 0.32rem;
color: #333333;
line-height: 0.48rem;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}

.financial-list .collect aside:nth-of-type(2) img {
width: 100%;
height: 100%;
}

.financial-list .collect aside .Cleft {
width: 45%;
float: left;
margin-top: 0.66rem;
}

.financial-list .collect aside .Cleft span{
display: block;
width: 1.4rem;
margin-left: 0.05rem;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
overflow: hidden;
}

.financial-list .collect aside .Cright {
width: 55%;
float: right;
margin-top: 0.66rem;
}
.financial-list .collect aside .Cright span{
display: inline-block;
margin: 0.04rem 0 0 0.05rem;
}
.financial-list .collect aside span {
font-size: 0.2rem;
color: #999999;
}

.financial-list .collect aside .Cleft img,
.financial-list .collect aside .Cright img {
width: 0.18rem;
height: 0.24rem;
margin-top: 0.09rem;
}
</style>

最终结果：

微信小程序生命周期

我们组的项目是用微信小程序编写一个中大活动。目的是开发一款浏览活动，在线活动报名，在线活动组队，在线活动讨论和分享平台。这就需要没有小程序编写经验，只有一点Vue经历的我开始学习小程序的编写。与此同时，第一次迭代我还是一名产品经理，进行基础功能的定义和期望UI的设计。
其中我想总结的是小程序的生命周期学习总结。我对于这一部分是极其陌生的，理解小程序的生命周期极为重要。
官网给出的生命周期和状态图

由上图可知，小程序由两大线程组成：负责界面的视图线程（view thread）和负责数据、服务处理的服务线程（appservice thread），两者协同工作，完成小程序页面生命周期的调用。

视图线程有四大状态：

初始化状态：初始化视图线程所需要的工作，初始化完成后向 “服务线程”发送初始化完成信号，然后进入等待状态，等待服务线程提供初始化数据。
首次渲染状态：当收到服务线程提供的初始化数据后（json和js中的data数据），渲染小程序界面，渲染完毕后，发送“首次渲染完成信号”给服务线程，并将页面展示给用户。
持续渲染状态：此时界面线程继续一直等待“服务线程”通过this.setdata（）函数发送来的界面数据，只要收到就重新局部渲染，也因此只要更新数据并发送信号，界面就自动更新。
结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。
服务线程五大状态：

初始化状态：此阶段仅启动服务线程所需的基本功能，比如信号发送模块。系统的初始化工作完毕，就调用自定义的onload和onshow，然后等待视图线程的“视图线程初始化完成”号。onload是只会首次渲染的时候执行一次，onshow是每次界面切换都会执行，简单理解，这就是唯一差别。
等待激活状态：接收到“视图线程初始化完成”信号后，将初始化数据发送给“视图线程”，等待视图线程完成初次渲染。
激活状态：收到视图线程发送来的“首次渲染完成”信号后，就进入激活状态既程序的正常运行状态，并调用自定义的onReady()函数。此状态下就可以通过 this.setData 函数发送界面数据给界面线程进行局部渲染，更新页面。
后台运行状态：如果界面进入后台，服务线程就进入后台运行状态，从目前的官方解读来说，这个状态挺奇怪的，和激活状态是相同的，也可以通过setdata函数更新界面的。毕竟小程序的框架刚推出，应该后续会有很大不同吧。
结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。

当我们直接启动小程序的时候，首先调用的是app.js中的onlaunch方法和onShow方法，同时还会执行主页面的onload方法和onshow方法以及onReady方法。

onlaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）；

onShow:当小程序启动，或从后台进入前台显示，会触发 onShow；

主页面onLoad：加载页面；

onshow：页面显示；

onReady：页面初次渲染完成；

整个页面加载完成后，我们开始操作主页面，当从主页面跳转到另一个新页面时，有两种跳转方法(wx.navigateTo和wx.redirectTo)，如果跳转执行navigateTo方法，

此时主页面会执行onHide方法，新页面会依次执行onLoad、onShow、onReady方法。当新页面返回主页面时，这时候新页面会调用onUnload方法，主页面又会调用onShow方法。

如果跳转执行的是的redirectTo方法时，主页面会执行onUnload方法（卸载），新页面会相继执行onLoad、onShow、onReady。这时候不能返回到主页面，因为redirectTo方法是将新页面覆盖原页面，而原页面已被卸载。

这就是小程序页面的生命周期。

应用的生命周期对页面生命周期的影响

UML学习过程中总结的基本内容

UML用例图

用例图的4个基本组件：参与者(Actor)、用例(Use Case)、关系(Relationship)和系统(system)。

泛化(generalization)：

泛化关系是一种继承关系，子用例将继承基用例的所有行为，关系和通信关系，也就是说在任何使用基用例的地方都可以用子用例来代替。泛化关系在用例图中使用空心的箭头表示，箭头方向从子用例指向基用例。

扩展(extend)：

extend关系是对基用例的扩展，基用例是一个完整的用例，即使没有子用例的参与，也可以完成一个完整的功能。extend的基用例中将存在一个扩展点，只有当扩展点被激活时，子用例才会被执行。 extend关系在用例图中使用带箭头的虚线表示(在线上标注<>)，箭头从子用例指向基用例。

包含(include)：

include为包含关系，当两个或多个用例中共用一组相同的动作，这时可以将这组相同的动作抽出来作为一个独立的子用例，供多个基用例所共享。因为子用例被抽出，基用例并非一个完整的用例，所以include关系中的基用例必须和子用例一起使用才够完整，子用例也必然被执行。include关系在用例图中使用带箭头的虚线表示(在线上标注<>)，箭头从基用例指向子用例。

扩展关系与包含关系

相同点：

• 都是两个用例之间的关系。（只有泛化关系不仅可以表示两个用例，还可以是两个参与者之间）

不同点：

条件性：

• 包含关系是无条件的
• 扩展关系是有条件的

插入原则：

• 包含关系中被包含用例的事件流一定插入到及用例中去。
• 扩展关系可以根据一定条件来决定是否将扩展用例的事件流插入到基用例事件流。

插入点：

• 包含关系中插入点只有一个。
• 扩展关系的插入点可以有多个。

重点区分include和extend，因为十分容易搞混，通过下面的例子进行说明。

这里销户操作必须建立在计算的基础上，这就符合了表示子用例是父用例的一部分，通常强调离开这个特性，父用例无法达成目标或失去意义。具体到这里就是如果子用例结算不存在，那就无法进行销户。

而短信提醒和邮件提醒是可选的功能，符合表示子用例是父用例的可选场景或技术特征。