Document

1.1 网络体系开发结构

1.1.1网络体系开发结构可分为两种

C/S（Client/Server）即客户端/服务器结构和B/S（Browser/Server）即浏览器/服务器结构。

两种结构的具体含义在此处就不再进行说明（可参考其他博主），就个人而言两种结构的主要区别在于用户使用什么方式向服务器发送请求，在C/S结构下，用户需要下载应用程序才能实现向服务器发出请求；在B/S结构下，用户不必下载应用程序，只需要在浏览器中对于服务器发出请求即可。

1.1.2 两种结构的比较（优缺点）

两种结构都存在各自的优缺点，主要体现在三个方面

1.开发和维护成本方面：

由上述两种结构的区别中不难看出C/S结构的维护和开发成本都要高于B/S结构。对于C/S结构而言，用户对于服务端的访问是需要下载应用程序进行实现的，因此在软件进行更新是，所有用户都需要下载更新后的应用程序，而且对于软件的调试、升级、安装都需要在客户机上进行，且对于所有的用户都需要进行这样的操作，其人力成本、时间成本是不言而喻的。对于B/S结构而言就不必有这样的问题，B/S结构中在软件升级后只需要对于服务器端的软件进行升级即可，对于客户端而言，只需要重新在浏览器上对新的服务器发出访问请求即可。

2.客户端负载方面

在C/S结构中，客户端即用户使用的软件，承担了与用户交互、与服务器的联系等任务，即客户端功复杂，客户端的程序就越庞大，对于电脑的性能要求也就越高（可以想想不同游戏对于电脑配置的要求）。而在B/S结构中，客户端的主要作用是显示信息，将事物处理逻辑部分交给服务器，减少了客户端的运行压力，但是同时，服务端的应用程序的负载将提升，尤其是在服务器处于访问高峰期时，可能会出现服务其崩溃的问题（书上介绍为此很多单位备有数据存储服务器，我也不太懂什么意思）

 3.安全性方面

C/S结构软件适用于专人使用的系统，软件开发者会通过严格的管理派发软件，以达到保证安全的目的，对于B/S结构的软件而言，由于使用人数多，且不固定，相对而言安全性低一些。

1.2Web简介

1.2.1什么是Web

Web就是网页（个人理解）

1.2.2Web应用程序的工作原理

Web应用程序大致可分为两种，即静态网站和动态网站

静态网站由html语言编写

动态网站由html语言和动态脚本语言（jsp，asp，php）编写

对于静态网页的访问：用户使用浏览器通过http（协议）访问服务器上的web页面，服务器上的web服务器收到请求后将web页面发送给客户端的浏览器，显示给用户（由于静态语言由html语言编写，浏览器可以直接解析）

对于动态网页的访问：与上面差不多，但是由于动态语言的编写涉及带动态脚本语言，则在服务器收到浏览器的请求后，由web服务器将动态脚本代码进行处理并且转化为浏览器可以解析的html代码，返回给客户端的浏览器，显示给用户。

1.3Web开发技术 

在开发Web应用程序时，通常需要应用客户端和服务器两方面的技术。客户端的应用技术主要用于展现信息内容，而服务器应用的技术则主要用于进行业务逻辑的处理和数据库的交互等。

1.3.1客户端应用技术（常见的有HTML、CSS、Flash）

1.HTML

HTML技术是客户端的技术基础，主要用于显示网页信息，不需要编译，由浏览器解释执行。

2.CSS

CSS样式可以有效地对页面的布局、字体·、颜色、背景和其他效果进行准确的控制，达到页面美化的效果。

3.Flash

应用Flash技术可以实现动态播放网站广告或新闻图片，并且加入随机的转场效果。

4.客户端脚本技术

常用的为JavaScript（最广泛）和VBScript。

1.3.2服务器端应用技术（主要有CSI、ASP、PHP、ASP.NET、JSP）

1.CGI

CGI是最早用来创建动态网页的一种技术，最常见的语言为C/C++、Java和文件分析报告语言（Perl）

2.ASP

ASP是一种使用很广泛的的开发动态网站的技术。它通过在页面代码中嵌入VBScript或JavaScript脚本语言来生成动态的内容，服务器必须安装适当的解释器后才能通过调用此解释器来执行脚本程序。

3.PHP

PHP语法类似于C，并且混用了Perl、c++和Java的一些特性，是一种开源的Web服务器脚本语言，与ASP一样可以在页面中加入脚本代码来生成动态内容，并可以将一些复杂的操作封装到函数或类中。

4.ASP.NET

ASP.NET是一种建立动态Web应用程序的技术，是.NET框架的一部分，可以使用如何.NET兼容的语言来编写ASP.NET应用程序。

5.JSP

JSP（Java Server Page）是以Java为基础开发的，所以它沿用了java强大的API功能。JSP页面中的HTML代码用来显示静态内容；嵌入页面的Java代码与JAP标记来生成动态部分。

Java
Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程。Java具有简单性、面向对象、分布式、健壮性、安全性、平台独立与可移植性、多线程、动态性等特点 。Java可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序等。

Python
Python是一种跨平台的计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。目前Python典型的Web开发框架有Django、Flask、Tornado等。

ASP
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境，可用来创建动态交互式网页并建立强大的web应用程序。当服务器收到对ASP文件的请求时，它会处理包含在用于构建发送给浏览器的HTML（Hyper Text Markup Language，超文本置标语言）网页文件中的服务器端脚本代码。除服务器端脚本代码外，ASP文件也可以包含文本、HTML（包括相关的客户端脚本）和com组件调用。ASP简单、易于维护 ， 是小型页面应用程序的选择，在使用DCOM （Distributed Component Object Model）和 MTS（Microsoft Transaction Server）的情况下，ASP甚至可以实现中等规模的企业应用程序。

JSP
我们这学期采用的就是JSP做前端模板，Java作为后端的开发形式。JSP（全称Java Server Pages）是由Sun Microsystems公司主导创建的一种动态网页技术标准。JSP部署于网络服务器上，可以响应客户端发送的请求，并根据请求内容动态地生成HTML、XML或其他格式文档的Web网页，然后返回给请求者。JSP技术以Java语言作为脚本语言，为用户的HTTP请求提供服务，并能与服务器上的其它Java程序共同处理复杂的业务需求。JSP将Java代码和特定变动内容嵌入到静态的页面中，实现以静态页面为模板，动态生成其中的部分内容。JSP引入了被称为“JSP动作”的XML标签，用来调用内建功能。另外，可以创建JSP标签库，然后像使用标准HTML或XML标签一样使用它们。标签库能增强功能和服务器性能，而且不受跨平台问题的限制。JSP文件在运行时会被其编译器转换成更原始的Servlet代码。JSP编译器可以把JSP文件编译成用Java代码写的Servlet，然后再由Java编译器来编译成能快速执行的二进制机器码，也可以直接编译成二进制码。

PHP
PHP原始为Personal Home Page的缩写，已经正式更名为 “PHP: Hypertext Preprocessor”，即“超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法，利于学习，使用广泛，主要适用于Web开发领域。PHP 语言作为当今最热门的网站程序开发语言，它具有成本低、速度快、可移植性好、 内置丰富的函数库等优点，因此被越来越多的企业应用于网站开发中。但随着互联网的不断更新换代，PHP语言也出现了不少问题。 根据动态网站要求，PHP语言作为一种语言程序，其专用性逐渐在应用过程中显现，其技术水平的优劣与否将直接影响网站的运行效率。其特点是具有公开的源代码， 在程序设计上与通用型语言，如C语言相似性较高，因此在操作过程中简单易懂，可操作性强。同时，PHP语言具有较高的数据传送处理水平和输出水平，可以广泛应用在Windows系统及各类Web服务器中。如果数据量较大，PHP语言还可以拓宽链接面，与各种数据库相连，缓解数据存储、检索及维护压力。随着技术的发展，PHP 语言搜索引擎还可以量体裁衣，实行个性化服务，如根据客户的喜好进行分类收集储存，极大提高了数据运行效率。

一、项目任务
本次项目以小组的形式进行开发，我学会了如何合理规划项目任务。在开始项目之前，我们详细讨论了项目的选择，最终选择了开发微信小程序送餐系统，并且将任务划分为不同的模块，明确每个模块的责任和完成时间。这样的规划使得整个项目的开发过程更加有序和高效。

二、开发项目
在开发过程中，我们前端和后端并行开发，不再需要等待对方完成才能进行下一步工作。并且前端可以使用各种现代化的前端框架和工具，提供更好的用户体验和交互效果。后端可以专注于业务逻辑和数据处理，提供高效的API接口供前端调用。前后端分离还可以实现跨平台和跨设备的支持，使得应用程序可以在不同的终端上运行。
后台管理系统：小程序页面

三、快速体验
​​​​​​ 如果没有小程序账号，先注册小程序开发账号小程序注册，如果已经有小程序账号，直接登录账号微信公众平台

四、语言

首先，小程序类Web，但不同于我所认识的HTML，他有属于自己的开发语言：

JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js。它运行在微信 App 的上下文中，不能操作 Browser context 下的 DOM，也不能通过 Node.js 相关接口访问操作系统 API。

WXML: 作为微信小程序的展示层，并不是使用 Html，而是自己发明的基于 XML 语法。

WXSS: 用来修饰展示层的样式。官方的描述是 “ WXSS (WeiXin Style Sheets) 是一套样式语言，用于描述 WXML 的组件样式。WXSS 用来决定 WXML 的组件应该怎么显示。”
入口文件
小程序主要包含以下三个入口文件：

app.js 这个文件是整个小程序的入口文件，我们主要做了网络检测、用户信息获取等；当让也可以注入公用的方法在其他页面中去通过getApp()调用（注：页面中调用app.js中的方法时不需要通过require或者import引入）

app.json 这个文件可以对小程序进行全局配置，决定页面文件的路径、整体窗口表现、设置网络超时时间、设置多tab等.

app.wxss 是小程序的公共样式表

表单数据提交:

from表单结构如下：

• • 微信小程序里的from表单数据提交和普通的html里的from提交大致相同。

• 数据加载：

• 本地json数据加载：

  • 本地json数据加载：

  • API接口数据请求与加载：

    五、总结
    1.project.config.json:项目配置文件，含有appid、项目名称projectname等项目配置信息

    2.app.wxss:全局样式

        引入公共样式、第三方样式等(按功能模块划分)

        @import "pubic/css/reset.wxss";//重置样式

        @import "pubic/css/header.wxss";//公共头部

        @import "pubic/css/footer.wxss";//公共尾部

        @import "pubic/css/commonDom.wxss";//公共dom样式

    3.app.json:小程序全局配置，配置小程序是由哪些页面组成的，还有配置小程序的窗口，如背景颜色、导航的颜色、导航文章样式等

        pages:[]//各大页面路径

        window:窗口配置

        tabBar:配置导航tab

    4.app.js:监听并处理小程序生命周期，声明一些全局方法、属性

        //引入公共功能模块

        import verify from './pubic/js/verify';//正则匹配验证模块

        import verify from './pubic/js/localstorage';//本地存储技术模块

        ......(至于公共功能模块放在public还是utils文件夹下还值得探讨)

        App({
            onLaunch(){}//程序初始化执行此方法

        })

    5.README.md:项目说明文件

    6.utils:用于存放全局的一些js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用，对于允许外部调用的方法，用module.exports进行暴露，才能在其他js文件中通过require或者import引入。

        说明:默认有个utils/utils.js

    7.public:存放静态资源文件，按资源类型可分为css、js和images等

        css:存放公共css，按功能模块新建reset、header、footer等公共css

        js:存放公共js，按功能模块新建localstorage、verify等功能性js

        images:图片多的时候最好也细分一下子文件夹

    8.pages:主要存放小程序的页面文件，每个文件夹为一个页面，文件名须与页面的文件夹名相同。

        wxml:结构-----必有

        wxss:表现(独立样式)

        js:行为-----必有

        json:配置文件，用于修改导航栏显示样式等

        说明:小程序每个页面必须要有wxml和js文件，其他两种类型的文件可以不需要。文件夹按功能模块分，pages下直接管辖tab模块，如home、 goods、order、me等，每个tab下继续按功能模块新建子页面。

    9.filter:数据过滤(filter)方法

        wxs:作用是增强wxml标签的表达能力，类似于js，但有所限制，如es6语法不能使用

        使用步骤:

            a.新建wxs文件，里面写一些数据过滤方法，然后通过module.exports暴露

            b.在业务页面wxml中引用wxs，

            c.使用filter，{{dateFr.getTime(item.createdAt,':')}}

            说明:wxs不同于js，很多js的api是不支持的，所以在实际开发中并没有什么卵用。

    通过这次学习，我深刻意识到了团队合作的重要性。在项目中，我和我的团队成员之间密切合作，互相协助，共同解决问题。通过分工合作，我们能够更快地推进项目进展，并且在遇到困难时能够互相支持和帮助。团队合作不仅提高了项目的质量，也增强了我们的沟通和协作能力。我学到了很多关于微信小程序开发的知识和技巧。在开发过程中，我熟悉了小程序的框架和API，学会了如何使用不同的组件和功能，以及如何与后端服务器进行数据交互。我也发现了一些常见的错误和问题，并学会了如何解决它们。这些技能对于未来的开发工作将会非常有用。这次的Web应用实战开发项目让我获得了很多宝贵的经验和教训。我学会了规划任务、团队合作、微信小程序开发以及自我提升。我相信这些经验将对我未来的学习和职业发展产生积极的影响。

    六、拓展学习
    微信小程序开发文档

    微信开放社区