用例简介

用例：make reservation 搜索酒店，选择酒店，选择房间类别，确认预订，管理购物车，支付

识别类

顺序图

类图

树状图

个人总结

​ 在分析阶段，在平台的选择方面，选择了时下比较火的微信小程序平台，看准了小程序用完即走的服务性质，与我们的“命题作文”扫码点餐的业务环境很相似，也是比较轻量级的开发。在业务的设计方面经验不足的我们也学会借鉴各种现存的成熟的产品，例如麦当劳微信小程序。同时，在业务分析的阶段会时常用自己的亲身经历与组员探讨，以及借鉴网上已有的分析报告。

​ 在编码设计与规范上，在开始编码之前了解的太少了，导致在五月初前端进行的不太顺利，于是重构的前端代码，重构时采用的是VUE的MVVM框架，将其中的View 的状态和行为抽象化，让我们开发时能够将视图 UI 和业务逻辑分开，并且对同一页面的不同功能的模块用不同的控制器分离，大大减少了后期的测试负担。在本次项目中负责的是客户端的前端，严格执行从设计师给过来的图纸，也会与产品和设计的同学对需求做一些要求和更改，使得需求能够实现且更加合理。在这个过程中很感谢@MinXin Zhong和@painterdrown同学，十分耐心的跟我进行探讨，争取能够做出一个好的扫码点餐小程序。

​ 在本次项目进行的过程中，最大的不足大概是前期的任务难度估计有误，以及测试的时间给的太少。在前期的时候，任务相对比较简单，并且给的时间比较宽裕，因此在开发过程中节奏不是很紧凑，从下图commit的记录也可以看出这个问题。在后期打算一周做一个附加功能“选座”以及”协同点餐”，这两个部分我认为比前面的难度都大了很多，需要解决多用户使用且实时更新的问题，因此在最后的附加功能开发的时候很累，并且在开发完以后还在测试过程中不断遇到新的问题，一直处于发现问题，解决问题的循环中，很庆幸有世界杯相伴。在编码过程中很感谢我们负责后端的@zhongrliu同学，全程在线，在前后端对接以及API的协商时效率比较高。虽然是后端新手但是合作起来可以说是比较舒服的了。然后要再次感谢我的老搭档@painterdrown同学，我们之间合作的次数很多，合作起来相对比较默契，在最后的24小时测试阶段跟我一起鏖战，并且还分担前端的座位预订的难题，是一个相当棒的产品经理了。

PSP2.1 统计表

Git统计报告

本人的Github名字是SYSUZZY

近一个月的贡献

工作清单

需求分析：参与整个小程序的需求分析，相互探讨，质疑，用亲身经历说服对方

前端工作：

• 完成除了桌位预订以外的所有UI和前端逻辑
• 重构队友@123zzj123在点餐部分的UI以及前端逻辑

测试工作：

• 测试了前端的逻辑
• 测试了与后端API的衔接

博客清单

微信小程序自定义组件

​ 在微信小程序的开发过程中，发现有的自定义的UI组建需要在多个页面使用到，每个界面都要重新写一次该组件十分麻烦，而且开发起来会感觉代码冗长，可维护性差。因此，在本小程序中使用了自定义组件来减少冗余的代码，也使得程序的可读性和可维护性增强。

​ 本文将会讲解如何在微信小程序中使用自定义组件。本次案例的讲解是以常用的加减器为例进行讲解的，希望大家能够仔细阅读，以此案例推广到其他的用途上。

使用步骤

创建组件

新建一个components文件夹来存放需要被重用的UI组件。

如图所示，创建所需要的文件

案例的需求是点击添加或者减少的按钮，数值会相应的减少。

​ 组件初始化工作准备完成，接下来就是组件的相关配置，首先我们需要声明自定义组件，也就是将 numberController.json 中 component 字段设为 true ：

{
  "component": true,        // 自定义组件声明
  "usingComponents": {}     // 可选项，用于引用别的组件
}

​ 其次，我们需要在 numberController.wxml 文件中编写模版，在 numberController.wxss 文件中加入弹窗组件样式，它们的写法与页面的写法一样

numberController.wxml

<view class="stepper">
    <!-- 减号 -->
    <view class="stepper-button, disable">
        <text catchtap = "_minusFun">-</text>  
    </view>
    <!-- 数值 -->
    <view class="stepper-num">
        <text></text>
    </view>
    <!-- 加号 -->
    <view class="stepper-button, normal">
        <text catchtap = "_plusFun">+</text>
    </view>
</view>

numberController.wxss

/*加减控件*/
.stepper {  
    width: 132rpx;
    height: 32rpx;
    display: flex;
    flex-wrap: row wrap;
    justify-content: space-between;
    border: 1rpx solid rgb(245, 166, 35);
    border-radius: 50rpx;
}  
  
/*加号和减号*/  
.stepper text {
    width: 32rpx;
    height: 32rpx;
    line-height: 30rpx;
    text-align: center;
    vertical-align: middle;
    float: left;
    font-size: 32rpx;
    margin-left: 2rpx;
}

/*数值*/  
.stepper-num {  
    width: auto;
}  

.stepper-button {
    border: 0 solid rgb(245, 166, 35);
    border-radius: 50rpx;
}

/*普通样式*/  
.stepper .normal{  
    color: black;
    background: rgb(245, 166, 35);
}

/*禁用样式*/  
.stepper .disabled{  
    color: #888888;  
}

​ 在该组件中有两个按钮，分别是加号和减号，绑定了两个点击事件_minusFun和_plusFun，同时按钮显示的数字是amount值，这些函数和值都将在下面的js文件中定义。Component 构造器时可以用来指定自定义组件的属性、数据、方法等，具体的细节可以参考官方文档

``numberController.js`

// components/numberController/numberController.js

Component({
    options: {
        multipleSlots: true // 在组件定义时的选项中启用多slot支持
    },
    /**
     * 组件的属性列表
     * 用于组件自定义设置
     */
    properties: {
        amount: {
            type: Number,
            value: 1
        }
    },

    /**
     * 私有数据,组件的初始数据
     * 可用于模版渲染
     */
    data: {
    },

    /**
     * 组件的方法列表
     * 更新属性和数据的方法与更新页面数据的方法类似
     */
    methods: {
        _minusFun() {
            let amount = this.data.amount
            if (amount > 0) {
                amount -= 1
                this.triggerEvent('minus', { amount: amount })
            }
        },

        _plusFun() {
            let amount = this.data.amount
            amount += 1
            this.triggerEvent('plus', { amount: amount })
        }
    }
})

使用组件

组件编写完之后，就可以在引用了，并且给它设定自定义事件。在使用组件之前，需要先在使用页面的.json文件中进行引用。

myPage.json

"usingComponents": {
    "numberController": "../../components/numberController/numberController"
}

然后我们在 myPage.wxml 中引入它，并增加我们自定义的一些值，如下

myPage.wxml

<view class='order-num'>
    <text class='food-num'>数量</text>
    <numberController
                      bind:minus="dishAmountChange"
                      bind:plus="dishAmountChange"
                      amount=""/>
</view>

在添加绑定事件使用的是bind:minus的形式，这里的minus就是你在定义组件时通过triggerEvent传递过来的事件名。

myPage.js

Page({
    data: {
        amount: 0,
    },
    
    dishAmountChange(e) {
        // 获得从组件中传过来的amount的值
        var amount = e.detail.amount
        this.setData({
            amount: amount
        })
    },
})

在控制台中可以看到e.detail中有一个amount属性，该属性就是从组件中传过来的。

效果

最终的效果我就直接上图了！

软件架构就是把系统分解为一些部件，描述这些部件的职责及它们之间的协作行为。 框架是特定语言和技术的架构应用解决方案。 其中，他们的区别是，软件架构是根据不同的领域区分的，每个架构模式都是特定领域常见问题的解决方案，而框架是根据不同的语言和技术划分的，包含了某项语言和技术在各种业务场景的具体解决方案。他们之间的联系是框架是一种或多种架构的组合的实现。

以你的项目为案例

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

  

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

  ​ 采用三层架构使我们在开发过程中只需要关注某一层，这让我们能够明确的分工，开发过程中的架构也更加清晰，并且在开发过程中能够三层架构并行开发，提高开发效率。除此之外，我们能够极大的复用各种模块，比如说每个界面在底部都有一个统计金额的bar，就不需要每个界面单独写一个，只需要一个界面写了这个bar的模块以后，其他界面直接复用即可，并且在更新的时候也很方便，简单的替换旧的模块即可，由于层与层之间的依赖很少，因此在迭代开发中只需要做少量的改动即可。这也使得程序的扩展性和安全性增强，安全性方面，客户端只能通过逻辑层访问数据层，减少了入口点，在逻辑层做好重点的安全保护即可。

  ​ 总而言之，三层架构具有低耦合性、高重用性、较低的生命周期成本、快速部署、高可维护性、利于软件工程化管理等特性。

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

Flux的状态集管理框架，由facebook创建，专门用来构建前端框架结构的框架，便于维护，用于安全考虑，它分为四层：view视图层、action层、dispatcher派发层、store仓库层。

view action → dispatcher → store return → dispatcher → view（receive method：register()）

VUEX是专门为VUE提供的状态管理工具，便于维护，保证安全，VUE中引入VUEX解决状态之间共享的问题。VUEX是多个组件调用一个状态，将原来组建与组件之间的状态传递改成组件与仓库之间的传递。该状态管理工具适用于构建大型的项目，如果不是大型项目，使用VUEX会使代码更加繁琐

VUEX核心：

• state：存放多个组件共享的状态（数据）
• mutations：存放更改state里状态的方法，用于变更状态，是唯一一个更改状态的属性
• getters：将state中某个状态进行过滤，然后获取新的状态，类似于vue中的computed
• actions：用于调用事件动作，并传递给mutation
• modules：主要用来拆分state

vueComnent → (dispatch)Action → (commit) → Mutations → (mutate)State → (render)VueComponent

不同

1. Flux可以定义多个store，VUEX只能定义一个；
2. VUEX把store和dispatch都放到了store里，结构更加清晰；
3. 在VUEX中本身就内置State对象，对仓库的管理更加明确；
4. VUEX有自动渲染的功能，所以不需要更新 ；

相同

1. 都是组件化的状态管理工具
2. 如果把 action 和 mutation 看作一层（Flux里的action），二者结构完全一致

“知乎”APP建模练习

学号：15331414

建模任务来自其他小组的知乎App个人浏览及管理功能业务文档

用例图

回答问题业务的活动图

回答问题领域建模

用户对象的状态图

回答问题场景的系统顺序图

回答问题场景的操作协议

1. 契约CO1：requestAllQuestion

   操作：requestAllQuestion()

   交叉引用：用例：回答问题

   前置条件：无

   后置条件：

   • 创建了ql实例（创建实例）
   • ql的属性被初始化（修改属性）

2. 契约CO2：returnAllQuestion

   操作：returnAllQuestion()

   交叉引用：用例：回答问题

   前置条件：访问首页

   后置条件：

   • ql的属性被填充（修改属性）

3. 契约CO3：selectOneQuestion

   操作：selectOneQuestion()

   交叉引用：用例：回答问题

   前置条件：无

   后置条件：

   • 创建了q实例（创建实例）
   • q的属性被初始化（修改属性）

4. 契约CO4：returnQuestionDetail

   操作：returnQuestionDetail()

   交叉引用：用例：回答问题

   前置条件：访问指定问题

   后置条件：

   • q的属性被填充（修改属性）

5. 契约CO5：uploadMyAnswer

   操作：uploadMyAnswer(userid, answerid, questionid)

   交叉引用：用例：回答问题

   前置条件：回答问题

   后置条件：

   • 创建了a实例（创建实例）
   • a的属性被初始化（修改属性）
   • a被关联到当前的question（形成关联）

6. 契约CO6：passOrNot

   操作：passOrNot()

   交叉引用：用例：回答问题

   前置条件：回答问题

   后置条件：

   • answer.isPass被置为真（修改属性）

• 建模对象： 参考 Asg_RH 文档， 对 Reservation/Order 对象建模。

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

  

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

​

• 按 Task2 要求，请使用工具 UMLet，截图格式务必是 png 并控制尺寸
• 说明：请不要受 PCMEF 层次结构影响。你需要识别实体（E）和 中介实体（M，也称状态实体）
  • 在单页面应用（如 vue）中，E 一般与数据库构建有关， M 一般与 store 模式 有关
  • 在 java web 应用中，E 一般与数据库构建有关， M 一般与 session 有关
  • 
  • 
  • 
  • 
• b. 数据库建模(E-R 模型)
  • 按 Task 3 要求，给出系统的 E-R 模型（数据逻辑模型）
  • 导出 Mysql 物理数据库的脚本

    if exists(select 1 from sys.sysforeignkey where role='FK_CUSTOMER_REFERENCE_ROOM') then
        alter table Customer
           delete foreign key FK_CUSTOMER_REFERENCE_ROOM
    end if;
    
    if exists(select 1 from sys.sysforeignkey where role='FK_MARKET B_REFERENCE_CUSTOMER') then
        alter table "Market Busket"
           delete foreign key "FK_MARKET B_REFERENCE_CUSTOMER"
    end if;
    
    if exists(select 1 from sys.sysforeignkey where role='FK_ROOM_REFERENCE_HOTEL') then
        alter table Room
           delete foreign key FK_ROOM_REFERENCE_HOTEL
    end if;
    
    if exists(
       select 1 from sys.systable 
       where table_name='Customer'
         and table_type in ('BASE', 'GBL TEMP')
    ) then
        drop table Customer
    end if;
    
    if exists(
       select 1 from sys.systable 
       where table_name='Hotel'
         and table_type in ('BASE', 'GBL TEMP')
    ) then
        drop table Hotel
    end if;
    
    if exists(
       select 1 from sys.systable 
       where table_name='Item'
         and table_type in ('BASE', 'GBL TEMP')
    ) then
        drop table Item
    end if;
    
    if exists(
       select 1 from sys.systable 
       where table_name='Market Busket'
         and table_type in ('BASE', 'GBL TEMP')
    ) then
        drop table "Market Busket"
    end if;
    
    if exists(
       select 1 from sys.systable 
       where table_name='Room'
         and table_type in ('BASE', 'GBL TEMP')
    ) then
        drop table Room
    end if;
    
    /*==============================================================*/
    /* Table: Customer                                              */
    /*==============================================================*/
    create table Customer 
    (
       CustomerID           int                            not null,
       Name                 text                           not null,
       "E-mail"             text,
       "Special Requirement" text,
       Age                  int,
       "Check In Date"      date                           not null,
       "Check Out Date"     date                           not null,
       RoomID               int,
       constraint PK_CUSTOMER primary key clustered (CustomerID)
    );
    
    /*==============================================================*/
    /* Table: Hotel                                                 */
    /*==============================================================*/
    create table Hotel 
    (
       HotelID              int                            not null,
       Name                 text                           not null,
       Location             text                           not null,
       constraint PK_HOTEL primary key clustered (HotelID)
    );
    
    /*==============================================================*/
    /* Table: Item                                                  */
    /*==============================================================*/
    create table Item 
    (
       ItemID               int                            not null,
       Name                 varchar(50)                    not null,
       Price                money                          not null,
       constraint PK_ITEM primary key clustered (ItemID)
    );
    
    /*==============================================================*/
    /* Table: "Market Busket"                                       */
    /*==============================================================*/
    create table "Market Busket" 
    (
       BusketID             int                            not null,
       ItemID               int(20),
       CustomerID           int,
       constraint "PK_MARKET BUSKET" primary key clustered (BusketID)
    );
    
    /*==============================================================*/
    /* Table: Room                                                  */
    /*==============================================================*/
    create table Room 
    (
       HotelID              int                            not null,
       RoomID               int                            not null,
       Available            bit                            not null,
       Type                 text                           not null,
       "Avaliable Number"   int                            not null,
       Price                money                          not null,
       constraint PK_ROOM primary key clustered (RoomID)
    );
    
    alter table Customer
       add constraint FK_CUSTOMER_REFERENCE_ROOM foreign key (RoomID)
          references Room (RoomID)
          on update restrict
          on delete restrict;
    
    alter table "Market Busket"
       add constraint "FK_MARKET B_REFERENCE_CUSTOMER" foreign key (CustomerID)
          references Customer (CustomerID)
          on update restrict
          on delete restrict;
    
    alter table Room
       add constraint FK_ROOM_REFERENCE_HOTEL foreign key (HotelID)
          references Hotel (HotelID)
          on update restrict
          on delete restrict;
    

  • 简单叙说 数据库逻辑模型 与 领域模型 的异同 领域模型(domain model)，也称为概念模型、领域对象模型、分析对象模型，我们在对项目进行分析的时候，往往会创建相应的领域模型。 是一个商业建模范畴的概念，他和软件开发并无一丝一毫的关系，即使一个企业他不开发软件，他也具备他的业务模型，所有的同行业的企业他们的业务模型必定有非常大的共性和内在的规律性，由这个行业内的各个企业的业务模型再向上抽象出来整个行业的业务模型，这个东西即“领域模型”。

    逻辑模型就是要将概念模型具体化。要实现概念模型所描述的东西，需要那些具体的功能和处理那些具体的信息。这就到了需求分析的细化阶段。

用例建模

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

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

• 对比 Asg_RH 用例图，请用色彩标注出创新用例或子用例
• 尽可能识别外部系统，并用色彩标注新的外部系统和服务

下面以飞猪为例。

酒店搜索

搜索结果

搜索失败

选定酒店

选定酒店

订票登陆

确认订单信息

入住信息

付款

Alipay

用例模型

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

首先找出各个时代的同类产品，重点在找与该产品同一时期的产品，并画出它们核心业务的UML图，分别对比分析自己的产品与同时代其他产品的差异，以及不同时代产品的差异，从中找出不合理的、可以改进的、系统缺少的、可能增加竞争力的地方，并且结合当代的其他产品，判断能否成为接口接入产品，简化产品生产的复杂性。与团队成员共同探讨、修改，从而确定重要的用例，采用迭代与进化式的开发，在迭代中逐渐明确需求，得出创新点。

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

业务建模

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

沿着流程图的起始状态开始，在每次遇到流程图的分支时都记录下来，例如遇到搜索时会有搜索成功和搜索失败两条路径。记录下当前选择的路径，直到走到终止状态，就是一个子用例。然后返回到刚刚记录的节点，选择另外一条路径，又能够生成一个子用例。如此操作直到没有记录的节点，则寻找到所有的子用例了。

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

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

生成退款单、变更退款单状态、同意/不同意退款处理。

用例文本编写

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

1. 摘要：一段简洁的概要，通常用在主场景。在点餐系统的构思阶段，为了在便于在小组会议上讨论主题和范围，进行早期需求的分析，会用到摘要式的用例文本。它的优点是能快速编写、简洁明了，缺点就是不够细致，只用作对问题粗略的认识。
2. 非正式：即多个非正式的段落格式，用几个段落覆盖不同场景，同样用于早期的需求分析过程，优点是编写简便，比起摘要式用例文本要详细一些，有利于进一步认识问题，缺点是不够正式，需要在后续阶段精化。
3. 详述：详细地编写用例所有步骤和各种变化，同时具有补充部分，如前置条件和成功保证。详述式用例文本通常用在以摘要形式编写了很多用例以后，详细地编写其中少量具有重要意义和价值的用例中，它的优点是细节充足，正式且深入，且具有结构性，缺点是编写耗时长，比较繁琐。

• 在学习小程序之前，首先了解了微信小程序有些什么特性。
  1. 无需安装：小程序内嵌于微信程序之中，使用过程中用户无需在应用商店下载安装外部应用；
  2. 触手可及：用户通过扫码等形式直接接入小程序，实现线下场景与线上应用的即时联通；
  3. 用完即走：在线下场景中，对于身边需求可以直接接入小程序，无需安装及订阅，使用服务功能后无需卸载，实现用完即走；
  4. 无须卸载：访问过小程序后可直接关闭，没有卸载过程。 因此，微信小程序的特性是十分适合服务类应用的开发的。
• 由于有web前端开发的基础，因此小程序的开发学习过程就是边开发边学习，记录下踩到的坑以及一些需要注意的点。
• 微信小程序是需要后台的，不限定任何语言，提供小程序接口要求的json格式即可； 在创建好开发者账号以后，新建一个微信小程序的项目马上就可以得到一个Hello World的微信小程序。首先，我们先看看文件目录。

代码构成

JSON配置

小程序配置 app.json

app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。

文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。具体的属性参考微信小程序教程。

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

Tip：

1. 当设置 position 为 top 时，将不会显示 icon
2. tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

networkTimeout

可以设置各种网络请求的超时时间。

debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 可以帮助开发者快速定位一些常见的问题。

页面配置 page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多，只是设置 app.json 中的 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

工具配置 project.config.json

通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。

考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。

WXML 模板

WXML 充当的就是类似 HTML 的角色，和 HTML 非常相似，有标签、属性等等构成，但是，两者又是十分不相同的。

1. 相比HTML有着更多更强大的标签，例如view, button, text, 地图，视频，音频等等。
2. 多了一些 wx:if 这样的属性以及 这样的表达式。在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。但是，小程序不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。通过 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1. 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

<view></view>
<button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。

更多 API 可以参考文档 小程序的API 。

• 简述瀑布模型、增量模型、螺旋模型（含原型方法）的优缺点。

  瀑布模型的优点是定义了软件开发基本流程与活动，使系统具备良好的扩展性和可维护性。但是，其劣势在于有严重的依赖问题，若前面的需求工作模糊，后面的工作难以有质量完成；容错率低，在后期发现需求问题，工作量难接受；资源调配困难，知识技能需求不同，员数量要求不同。上述问题会导致项目延期，不可控问题。

  增量模型的优点是能够人员分配灵活，不用在一开始就投入大量的人力资源；能够比较好地控制前期的风险并且增强客户对系统的信心。但是，其劣势在于增量力度难以选择； 并行开发构件有可能遇到不能集成的风险； 确定所有的基本业务服务比较困难。

  螺旋模型（含原型方法）的优点引入了明确的风险管理，能够有效控制风险，适合于大型软件开发，并且在设计上比较灵活，可以在项目的各个阶段进行变更。但是，其劣势在于风险管理成本高；过多的迭代次数会增加开发成本，延迟提交时间。

• 简述 UP 的三大特点，其中哪些内容体现了用户驱动的开发，哪些内容体现风险驱动的开发？

  UP(Unified Process)统一过程的三大特点是：用例驱动、以架构为中心、迭代及增量。

  首先，用例驱动指的是在开发过程中用例和场景的使用被证明是捕获功能性需求的卓越方法，并确保由它们来驱动设计、实现和软件的测试。其次，以架构为中心指的是构架是项目团队工作的中心，UP支持复数个构架模型。最后，迭代及增量指的是精化、构建和产品交付阶段被分成一系列迭代过程，每个迭代过程的结果就是一个在过去结果基础上的增量。其中，用例驱动体现了用户驱动的开发，而以架构为中心的迭代开发体现了风险驱动的开发。

• UP 四个阶段的划分准则是什么？关键的里程碑是什么？

  UP的软件生命周期被分为四个阶段：初始阶段(Inception)、精化阶段(Elaboration)、构建阶段(Construction)、产品交付阶段(Transition)；划分准则是依据不同的阶段性目标和软件生命周期。

  初始阶段的里程碑使一些重要的文档，包括项目构想、原始用例模型、原始业务风险评估、一个或多个原型、原始业务案例等；精化阶段的里程碑包括风险分析文档、软件体系结构基线、项目计划、可执行的进化原型、初始版本的用户手册等；构建阶段的里程碑包括可以运行的软件产品、完整的用户手册等；交付阶段的里程碑则是确定最终目标是否实现，是否应该开始下一个版本的开发周期等。

• IT 项目管理中，“工期、质量、范围/内容” 三个元素中，在合同固定条件下，为什么说“范围/内容”是项目团队是易于控制的

  在合同固定的条件下，工期是固定不变的，也规定了产品的质量要求，这些都不是项目团队所能轻易改变的。而范围/内容是由项目团队自己制定和掌握，并且在验收和修改方面较前两个因素容易，所以说是相对而言易于控制。

• 为什么说，UP 为企业按固定节奏生产、固定周期发布软件产品提供了依据？

  UP的软件生命周期将开发的时间分为四个阶段，每个阶段的里程碑明确，易于评估。允许在各个阶段结束时，评估阶段目标是否满足以决定是否进入下一个阶段。因此，UP提供了固定节奏的生产。

  UP是一个风险驱动的生命周期模型，倡导以渐进的方式迭代开发，规避风险或优先解决高风险的问题。这种模式影响了软件生命周期中的每个阶段，将每个阶段划分为多个迭代，并且为每个迭代确定一个内部里程碑。因此，UP也为固定周期发布软件产品提供了依据。

2 简答题