1.6 前端设计——HTML5+Javascript+CSS基础

前端设计时，为了兼容微信内置浏览器，我们采用H5页面的方式进行设计，设计界面时，我们必须充分考虑当前界面是要适配手机操作的。

结合前面的介绍，本章结束时，我们能够完成一个简单的小项目（程序）——选课系统，这个项目是可以运行在微信浏览器中的，我们将该项目的演示界面和网址放到下面，读者可以通过微信扫一扫进行访问：

扫描上述二维码后，可以看到下面的界面（*程序图片元素来源于互联网，仅为教学展示使用，如有异议，请通知博主，我们将立即删除*）

读者可以选择一个角色进行模拟操作，例如点选“我是学生”，则出现下面选择你要扮演的学生

点击你要扮演的学生图标，则可以看到学生可以进行的操作。

在这个页面下，读者可以点击“选课”按钮对进行选课，切换选项卡至“已选课”，可以对已经选择的课程进行取消选课操作。

如果主页面中角色选择时，读者选择的是“我是教师”，则列出系统内容所有老师的列表。

点选某个教师的图标，则进入教师可以操作的界面。

教师的主要功能是领取教学任务。

上述就是本章全部内容学习完毕后，读者可以开发的一个简单的项目。它用到了本章的系统环境、MySQL数据库、PHP开发以及本节要讲到的内容。

下面，我们对本章内容进行介绍。

1.6.1 HTML5简介

这是时下设计手机网页比较流行的页面设计语言，全称为超文本标记语言，它是用一系列标签定义各种元素，用来描述文字、图形、动画、声音、表格和各种链接。html是可以直接被浏览器解释的，或者可以说，客户端的浏览器负责解释html。HTML5是html的一个最新的版本。

HTML5页面一般分为以下几个部分：

（1）顶部声明：一般为<!DOCTYPE html>表明文档类型为HTML。

（2）总体标记符：<html>…</html>。即整个HTML5除顶部声明外，都应在此标签范围之内。

（3）头部定义：<head>…</head>。此处包含页面的标题、序言、说明、样式等，它不作为主要内容在页面上显示，当时会影响页面整体的显示效果、总体样式，是十分重要的声明部分。它主要包含<title>（页面的标题）、<link>（页面文档与外部资源的关系）、<meta>（页面的元数据）、<script>（客户端脚本，一般为javascript）、<style>（样式文件，一般为CSS）。

（4）主体内容：<body>…</body>。这里面包含了需要呈现给用户的页面的内容。

另一方面，在实际页面编写时，我们常常使用<div>…</div>标签来对页面主体结构进行进一步细化，从而使得页面更加具有层次感，也便于维护。

使用div+css的方式，将每个div和css进行对应（通常通过div的class属性完成），使得页面每个层次都有不同的样式，便于页面的设计。

从这里可以看出，通过HTML5，我们完全可以设计一个用户可以通过客户端浏览器解释的用户界面，用于直接与用户交互。当然，这里设计的页面风格是否能够为客户所接受，是否具有美感和实用性，就是考验设计者的水平和风格了。我们建议读者在设计页面时，一定要考虑我们的页面是运行在微信中，也就是在手机里，所以，页面设计一定要简洁、高效。

1.6.2 CSS简介

CSS是层叠样式表（Cascading Style Sheets）的简写，是对HTML进行样式表现的计算机语言。

CSS的语法是比较简单的（当然，其主要能力不是体现在逻辑实现上，而是布局设计上），主要包括下列部分：

1.属性

属性是CSS中的关键字，一个属性规定了样式的某一个方面，例如，color属性规定样式的颜色，background-color属性规定了样式的背景颜色等等，有关样式的属性，读者可以参考CSS语法介绍，这里推荐参考网站：

https://www.w3school.com.cn/css/index.asp

2.属性值

即前面所述的属性的取值，例如color属性，其值可以为orange（橘黄色）、violet（紫色）等，当然也可以为整形数值，代表RGB三色取值。常用的属性值一般有整数（或实数）、带单位的数字、相对值（百分比值）等，读者可以在实际使用时逐渐熟悉。

3.作用域

此处所述作用域，即CSS属性是如何作用于HTML元素的，常用的方法主要有：

（1）类型选择：因HTML中有很多定义了的类型，例如H1、H2、H3等，可以在CSS文件中对这些类型进行修饰说明，变更其属性，通过这种方式，则HTML页面中，一旦涉及到该类型是，样式即为自定义样式，如

H1{color:violet}

（2）元素的class属性：HTML页面body内的元素均有class属性，将该属性指向CSS文件中对应的类型名称，则对应元素展示自定样式。如

在CSS文件中做如下定义

.container {width: 90%;margin-left: auto;margin-right: auto;height: 1000px;background-color: #FFFFFF;text-align: left;color: #717070;}

而在HTML文件中定义一个元素为

<div class="container">......</div>

则div元素对应样式即为CSS中.container定义样式。

（3）style属性：在HTML元素的style属性中，直接定义CSS语法，指定该元素为自定义样式，例如下面的HTML语句：

<span style="font-family: Segoe; font-style: normal; font-weight: lighter; letter-spacing: 3px">SDEPPS</span>

将此处的span自定义样式设置为style中所定义的样式。

针对CSS还有一些增强的格式，如less或scss，他们对CSS进行了扩展，并对书写格式进行了改进，读者有兴趣可以进行参考、研究，本文一般使用CSS。

1.6.3 javascript

javascript是一种解释性的编程语言，一般作为网页嵌入语言使用。javascript一般用来读写页面元素，响应浏览器时间，与服务端接口进行交互等，是页面动态化的一种手段。本文主要用该语言实现前端页面和后端服务接口之间的数据交互。

在实际开发中，javascript一般使用程序的框架进行开发，这样能够极大提高开发效率，比较著名的javascript框架包括jQuery、bootstrap、vue等，这些框架可以说在前端开发中都是声名赫赫，有兴趣的读者可以对其进行深入了解。我们在后面的介绍中，也会略有涉及上述内容，届时再详细介绍。

本节中，我们使用javascript进行前端和服务器接口的交互，我们主要使用本文前面介绍的已经实现的接口，这样我们的前端和后端就可以交互联系起来了，所以，大家可以看到，javascript就是前端和后端接口交互的桥梁和纽带，当然，在服务器端，php接口也充当此角色。

下面的代码，展示了javascript如何调用php接口进行交互的。

doTeaching(row) {uni.request({url:'https://www.mywebsite.cn/LX001/interface.php',data:{c_id : row.c_id,t_id : this.cID,op: 'doTeaching'},header: {'content-type': 'application/x-www-form-urlencoded', },method: 'POST',  dataType: 'json',success : (res) => {console.log(res.data);uni.showToast({title: '提交成功',duration: 2000});}});this.showType(this.tabbarIndex);
}

这里使用了uni-app的操作，我们在下一个小节介绍。

有关javascript的语法，有兴趣的读者可以参考下列网址或相关书籍。

https://www.w3school.com.cn/js/index.asp

1.6.4 uni-app介绍

uni-app是使用vue.js框架的开发前端的框架体系，开发者开发一套代码，就可发布为H5、android-app、微信小程序等多个平台，十分方便。由DCloud公司推出。详细介绍请读者访问：https://uniapp.dcloud.io/。本文主要使用该框架对前端进行开发。

该框架可以使用DCloud推出的HBuilder X开发工具（下载地址：https://www.dcloud.io/hbuilderx.html）进行开发，该开发工具目前是免费的开发工具，以可视化的方式便于用户使用。

这里，我们对uni-app做简单的介绍，详细用法读者可以通过相关网址或通过本书的后续介绍进行了解。

1.uni-app的目录结构

在uni-app的官方网站上，给出了uni-app的目录结构：

上图中的路径中，比较重要的是pages目录，主要存放程序页面，有几个页面就有几个目录；statis目录，是存放程序静态资源的，比如程序中需要用到的本地图片、音视频等要存放于此（在实际开发时可能用到动态资源，它们可以存放在服务器上，无需放到此处）；pages.json文件，该文件是页面路由文件，主要是配置页面路由、导航栏等与页面相关的设置，其余文件读者可以按照生成的默认文件即可，需要修改时，我们再具体介绍。

2.VUE页面的开发

我们在HBuilder中新建一个页面，例如，我们建立一个名为RTPlay的页面，右键点击pages文件夹，点击“新建页面”，输入页面名称后，在pages文件夹节点下，会增加一个名为RTPlay的文件夹节点，里面有一个RTPlay.vue的vue文件，我们打开这个文件。

可以看到，RTPlay.vue文件有三部分组成。

这三部分分别为模板部分即

<template>...</template>之间的部分，代码部分即

我们可以分别对这些部分进行编写代码，例如，要实现本节例子中展示的第一个页面，即index.vue，我们在模板部分可以写入如下代码：

<template><view class="content"><view class="top"><text class="text-top">请选择您要扮演的角色</text></view><li><image class="logo" @tap="toStu" src="/static/stu.png"></image><view class="text-area"  @tap="toStu"><text class="title">{{title_stu}}</text></view></li><li><image class="logo" @tap="toTeacher" src="/static/teacher.png"></image><view class="text-area" @tap="toTeacher"><text class="title">{{title_teacher}}</text></view></li>      </view>
</template>

每个标签中的@tap属性是点击该标签元素时要触发的事件（在script的method部分实现），我们的代码部分如下：

<script>
export default {
data() {return {// 页面数据部分// 改动页面数据，与该数据关联的模板部分// 标签对应内容会实时改变title_stu: '我是学生',title_teacher: '我是教师'}
},
onLoad() {// 页面预置事件（函数）写在methods之外
},
methods: {toStu(){//跳转至人物界面// 参数为2，表示学生，由character页面处理uni.navigateTo({url:'/pages/character/character?s_t=2'})},toTeacher() {//跳转至人物界面// 参数为1，表示教师，由character页面处理uni.navigateTo({url:'/pages/character/character?s_t=1'})}
}}
</script>

上述代码实现了页面点击事件的响应。样式部分是CSS代码，如下：

<style>
.content {display: flex;flex-wrap: wrap;align-items: center;list-style: none;justify-content: space-around;
}
.content .top {padding-top: 2%;margin-top: 3%;      width: 100%;}
.content .top .text-top {display: flex;justify-content: center;
}.content li {padding-top: 10%;margin-top: 3%;      width: 30%;
}.logo {height: 280rpx;width: 200rpx;       margin-left: auto;margin-right: auto;}.text-area {display: flex;justify-content: center;
}.title {font-size: 36rpx;color: #8f8f94;
}
</style>

样式代码规定了每个元素的显示样式，例如显示的宽度、高度、字体大小、颜色等等。此处使用页面标签的class属性与CSS样式进行关联。

最后，我们在介绍下vue与php是如何交互的，在1.5节，我们介绍了数据库、php和前端之间的通信方式，这里我们对它再复习一下。

我们看到，VUE前端，通过javascript调用php接口，获得接口程序返回的XML数据，通过解析该数据形成前端页面标签对应数据。

而php接口通过调用前端逻辑php，从而通过数据库访问php代码对数据库实现真实的访问。

例如，我们在教师取消教学任务时（前面小节中已经提及，这个部分是调用数据库的存储过程[de_teaching]实现的。

我们通过以下代码片段可以清晰的看到这一过程。

上图中箭头指示的方向即为函数调用的方向。这个过程中，VUE的模板部分通过标签的@tap指示，点击相应函数（方法）为VUE代码部分的doUnTeaching。

在VUE代码部分的doUnTeaching中，通过uni.request方法，调用服务器端的interface.php中的“doUnTeaching”部分。这个部分通过调用前端业务逻辑（front.class.php）中的“de_teaching”方法来实现，而该方法中，使用了数据库访问类（mysql.class.php）中的query方法实现事实上的调用数据库访问。

本文代码下载：第一章代码资源

本节小结：这一节我们通过实现一个例子，来展示HTML5+javascript+CSS的设计原理，主要还是通过VUE的架构来进行三者结合设计，读者应仔细了解相应技术，这主要是体现前端设计的一些基本操作。有兴趣的读者可以参考成熟的前端设计方案，用实际运行的例子来印证所学。

无论是数据库、php还是本节讲述的VUE，都是开发网页程序的基础，这不是单单针对微信服务号开发的。当然，对微信服务号的开发也是非常有用的基础知识，我们在后面的微信服务号开发中会经常用到，请读者务必熟练掌握。