小程序课设：万科会议室小程序小程序的设计与实现(一）

小朱不猪
355 阅读7分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，点击查看活动详情。

万科会议室小程序小程序的设计与实现(一）

第一章 需求分析

       微信小程序是当前使用率最高的软件，而万科会议室小程序系统则是办公系统中最方便快捷的，员工可以在该系统上对会议室以及公司内部资源信息进行具体操作管理，员工对于工作效率的需求量很大，满足员工的要求就能让系统在当下的微信小程序中更加突出，因此本系统提供了多人在线对小程序进行管理操作的具体要求。

1.1 课程设计题目

       随着互联网的发展，微信小程序系统日益完善。作为全中国第二大社交平台，微信的使用越来越成为人们网络社交不可缺少的一部分，如何将自家的专业知识与网络相连，开发出便利人们生活的小程序，是每个有志青年应思索的。聚焦民众生活，致力改变人们生活，万科会议室在线小程序方便了民众办公，真正使信息得以共享，改变了人们的工作和生活方式。会议室在线小程序是人们提高工作效率的有效方式，同时也为员工们会议室预定提供了有力保障。在讲究高效率的今天，人们对工作效率的要求有了更大的需求，而员工信息资源庞大、内容参差不齐等特点恰好满足这种要求。所以线上会议室正慢慢成为一种全新的在线工作方式。也正是由于互联网的数据信息能够进行有效交互，确保了在线数据的可靠性。

1.2 课程设计任务及要求

       通过本课程设计，使学生进一步掌握移动开发技术中的的基础语法、页面组件、应用接口API、事件机制、登录、获取用户信息、第三方框架的使用和微信开发者工具的使用，在完成一系列的小程序项目中，加深对课堂教学知识的理解，能将课本知识应用到实际应用开发中，锻炼学生查阅及运用资料的能力，培养分析问题和解决问题的能力，以达到强化学生的实践意识，提高学生实际动手能力和创新能力的目的。

       本次课程设计的目标是培养学生具有完成一个小型的微信小程序项目的初步规划、设计、制作能力，具体表现在系统的开发、数据库设计能力等方面合理的规划，具有使用音乐播放和地图定位的使用。

1.3 系统开发技术和环境

       软件体系：采用B/S模式。B/S结构（Browser/Server结构）即浏览器服务器结构。采用B/S结构是因为该结构在功能拓展和维护方面简单、方便，只需要增加或更改网页，并且B/S结构是以浏览为主，录入简单。而预订管理系统网站就是通过web浏览器访问，选用B/S模式最为合适。

1.3.1 微信开发者工具简介

       专注于开发微信小程序的软件。微信开发者工具有三大模块。小程序模拟器、小程序编辑器、小程序调试器。每个模块都有不同的作用。调试器的功能类似浏览器里页面的审查元素，我们在元素调式框里修改属性，可以查看到页面相关属性的变化，找到相关的页面样式文件。

       启动工具时，开发者需要使用已在后台绑定成功的微信号扫描二维码登录，后续所有的操作都会基于这个微信的帐号

       程序调试主要有三大功能区：模拟器、调试工具和小程序操作区

模拟器

       模拟器模拟微信小程序在客户端真实的逻辑表现，对于绝大部分的 API 均能够在模拟器上呈现出正确的状态。

调试工具

       调试工具分为 6 大功能模块：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel

小程序操作区

       微信小程序操作区帮助开发者模拟一些客户端的环境操作。例如当用户从微信小程序中回到聊天窗口，会触发一个微信小程序被设置为后台的api。

1.3.3 性能需求

该系统在性能功能上达到如下需求：

       操作简单、界面友好：完全控件式的页面布局，使得会议室小程序的使用更简便，许多选项包括预定座位、查看预定等通过选择数字项就可以完成；另外，查看所有预定信息功能也让员工随时清楚每一次预定的具体情况。对常见系统的预定系统的各个方面：预定添加、取消、修改、查询等方面都大体实现，实现了员工对预定信息的管理要求；

       即时可见：对预定信息的处理（包括添加、取消、修改）将立即在后台数据库中进行更新，达到“即时操作、即时生效”的功能；

       系统运行应该快速、稳定、高效和可靠；在结构上应具有很好的可扩展性，便于将来的功能扩展和维护。

       员工根据对会议室预定系统的需求分析的上述要求及预定系统模型结构，会议室预定的功能模块分为四个大的部分，预定的添加，预定的取消，预定信息的修改，预定的查询。

部分前端代码

app.json

{
  "pages":[
    "pages/index/index",
    "pages/orders/orders",
    "pages/notice/notice",
    "pages/personal/personal",
    "pages/login/login",
    "pages/scanning/scanning",
    "pages/booking/booking",
    "pages/sitting/sitting",
    "pages/conference/conference",
    "pages/article/article",
    "pages/booking-detail/booking-detail"
  ],
  "tabBar":{
    "selectedColor": "#b02923",
    "color": "#666",
    "borderStyle": "black",
    "backgroundColor": "#fff",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon/index_A.png",
      "selectedIconPath": "images/icon/index_B.png"
    },{
      "pagePath": "pages/orders/orders",
      "text": "我的预订",
      "iconPath": "images/icon/orders_A.png",
      "selectedIconPath": "images/icon/orders_B.png"
    },{
      "pagePath": "pages/notice/notice",
      "text": "公告",
      "iconPath": "images/icon/notice_A.png",
      "selectedIconPath": "images/icon/notice_B.png"
    },{
      "pagePath": "pages/personal/personal",
      "text": "我的",
      "iconPath": "images/icon/personal_A.png",
      "selectedIconPath": "images/icon/personal_B.png"
    }]
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#b02923",
    "navigationBarTitleText": "万科会议室",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#eeeeee"
  }
}

app.js

//app.js
App({
  onLaunch: function () {

  },
  getRequest: function(url,callback){
    wx.showToast({
      title: '加载中',
      icon: 'loading',
      duration: 10000
    })
    wx.request({
      url: url, //仅为示例，并非真实的接口地址
      success: function(res) {
        if(callback && typeof callback == 'function'){
          callback(res)
          wx.hideToast()
        }
      }
    })
  },
  getScanning: function(){
    wx.scanCode({
      success: (res) => {
        var result = res.result
        result = result.replace('http://','')
        wx.navigateTo({
          url: '../'+result
        })
      }
    })
  },
  setStorageUser: function(params,callback){
    wx.setStorage({
      key:'userInfo',
      data:params,
      success: function(res) {
        if(callback && typeof callback == 'function'){
          callback(res)
        }
      }
    });
  }
})

index.wxml

<!--index.wxml-->
<view class="container">
  <swiper indicator-dots="true" autoplay="true" interval="3000" duration="800" class="swiper-banner bg-white">
    <block wx:for="{{banners}}" wx:key="item.id">
      <swiper-item>
        <image src="{{item}}" mode="scaleToFill" style="width:100%;height:400rpx;"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="menuWrap bg-white">
    <view class="menuWrap-item">
      <view class="menuWrap-item-navi" bindtap="getScanning">
        <span class="iconfont icon-qrcode"></span>
        <text>扫描预订</text>
      </view>
    </view>
    <view class="menuWrap-item">
      <navigator class="menuWrap-item-navi" url="../booking/booking?type=seat">
        <span class="iconfont icon-zuowei"></span>
        <text>预约座位</text>
      </navigator>
    </view>
    <view class="menuWrap-item">
      <navigator class="menuWrap-item-navi" url="../booking/booking?type=room">
        <span class="iconfont icon-huiyishi"></span>
        <text>预约会议室</text>
      </navigator>
    </view>
  </view>
  <view class="noticeList bg-white">
    <block wx:for="{{notice}}" wx:key="item.id">
      <navigator class="noticeList-item" url="../article/article">
        <image src="{{item.image}}" style="width:112px;height:68px;"></image>
        <view class="noticeList-item-r">
          <text class="noticeList-item-title">{{item.title}}</text>
          <text class="noticeList-item-desc">{{item.desc}}</text>
        </view>
      </navigator>
    </block>
  </view>
</view>
<import src="../../template/template.wxml"/>
<template is="qrcode" />

index.wxss

/**index.wxss**/
.swiper-banner{
  height: 400rpx;
}
.menuWrap{
  padding: 20rpx;
  display: -webkit-box;
	display: -webkit-flex;
  display: flex;
}
.menuWrap-item{
  text-align: center;
  -webkit-box-flex: 1;
	-webkit-flex: 1;
	flex:1;
}
.menuWrap-item-navi{
  display: inline-block;
  width: 150rpx;
  padding: 10rpx 0;
  color: #b02923;
}
.menuWrap-item-navi span{
  font-size: 30px;
}
.menuWrap-item-navi text{
  display: block;
  margin-top: 8px;
}
.icon-qrcode{
  font-weight:bold;
}

index.js

//index.js
//获取应用实例
var app = getApp()
Page({
  data: {
    banners:["../../images/index-focus-1.png","../../images/index-focus-2.png"],
    notice:[
      {
          "image": "../../images/notice-1.png",
          "title": "2016第三季度报告",
          "desc": "1.1本公司董事会、监事会及董事、监事、高级管理人员保证本报告所载资料不存在任何虚假记载、误导性陈述或者重大遗漏..."
        },{
          "image": "../../images/notice-2.png",
          "title": "万科首次上榜《财富》世界500强 名列第356位",
          "desc": "2016年7月20日，《财富》“世界500强”企业排行榜出炉，万科企业股份有限公司凭借2015年年度1843.18亿元的营收..."
        },{
          "image": "../../images/notice-3.png",
          "title": "2016中国房企百亿军团出炉!恒大(03333)击败万科(02202)登顶榜首",
          "desc": "中国指数研究院发布2016年中国房地产销售额百亿企业榜单，全国共有131家房地产企业跻身百亿军团,其中恒大、万科..."
        }
    ]
  },
  onLoad: function () {
    var that = this
    /*app.getRequest('https://hseschool.app360.cn/mingpian/wanke/home.json',function(res){
      that.setData({
        banners: res.data.banners,
        notice: res.data.notice
      })
    })*/
  },
  getScanning: function () {
    app.getScanning()
  }
})

效果图

image.png

尾言

       这是课设的前端部分代码以及部分报告，如果觉得还不错的话，欢迎点赞收藏哦。

avatar
文章
阅读
粉丝