系统分析与设计HW3

| 分类 日志  | 标签 博客 

1.工具使用方法

·UMLet

UMLet是一个开放源代码轻量级UML建模工具，它能够帮助我们快速地构建 UML 用例图、UML 静态图、UML 行为图和 UML 实现图等各种 UML 模型。

###①安装 （1）运行UMLet需要电脑上安装有java运行环境，可以前往Oracle官网，根据自己的电脑系统下载相应的JDK。 （2）安装好java运行环境后，前往UMLet官网下载相应的安装包。

###②运行

UMLet

上图是我们小组的扫码点餐的用例图。

（1）可以看到在右上侧区域是用于绘制各种UML模型图，内双击想要添加的对象，对象被自动添加到面板中。

（2）在右上侧的最上面有一个模板选择区，用于选择UML的各种模板。

（3）选中刚刚添加进来的对象，在右下角的属性面板中，可以修改对象的属性。这一块区域用于编写UML元素的属性，如类名称、字段、背景等。

（4）保存创建完成的UML模型图，也可以导出来为其它格式。

###③总结 这个工具总的来说能够导出不同的格式，界面很简单，要进行的操作也很简单。

2.技术学习报告

·微信小程序QuickStart项目

###①代码构成

（1）一个QuickStart项目中有四个不同类型的文件，分别是.json 后缀的 JSON 配置文件，.wxml 后缀的 WXML 模板文件，.wxss 后缀的 WXSS 样式文件和.js 后缀的 JS 脚本逻辑文件

（2）对于app.json

是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{

  "pages":[

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window":{

    "backgroundTextStyle":"light",

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTitleText": "WeChat",

    "navigationBarTextStyle":"black"

  }

}

其中pages字段用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。window字段是小程序所有页面的顶部背景颜色，文字颜色定义在这里的。

（3）对于WXML模板

从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:

<view class="container">

  <view class="userinfo">

    <button wx:if=""> 获取头像昵称 </button>

    <block wx:else>

      <image src="" background-size="cover"></image>

      <text class="userinfo-nickname"></text>

    </block>

  </view>

  <view class="usermotto">

    <text class="user-motto"></text>

  </view>

</view>

和HTML非常相似，有标签、属性等等构成。但是也有很多不一样的地方：

1.标签名字有点不一样 往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。

  1. 多了一些 wx:if 这样的属性以及 这样的表达式 在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。
    WXML 是这么写 :

<text></text>

JS 只需要管理状态即可:

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

（4）对于WXSS样式

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

1.新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。

2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3.此外 WXSS 仅支持部分 CSS 选择器

（5）对于JS交互逻辑

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

<view></view>

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

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

 Page({

  clickMe: function() {

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

  }
  
})

以上是我对于微信小程序的部分学习，其中小程序的框架等部分尚未介绍。


上一篇     下一篇