前言
Web是一种典型的分布式应用结构。第一阶段的Web,主要是用于静态Web页面的浏览。用户使用客户机端的Web浏览器,可以访问Internet上各个Web站点,在每一个站点上都有一个主页作为进入一个Web站点的入口。每一Web页中都可以含有信息及超文本连接,超文本连接可以带用户到另一Web站点或是其它的Web页。从服务器端来看,每一个Web站点由一台主机、Web服务器及许多Web页所组成,以一个主页为首其它的Web页为支点,形成一个树状的结构。每一个Web页都是以HTML的格式编写的。这一阶段，Web服务器基本上只是一人HTTP的服务器，它负责客户端浏览器的访问请求，建立连接，响应用户的请求，查找所需的静态的Web页面，再返回到客户端。
一、项目任务
本次项目以小组的形式进行开发，我学会了如何合理规划项目任务。在开始项目之前，我们详细讨论了项目的选择，最终选择了开发微信小程序送餐系统，并且将任务划分为不同的模块，明确每个模块的责任和完成时间。这样的规划使得整个项目的开发过程更加有序和高效。
二、开发项目
在开发过程中，我们前端和后端并行开发，不再需要等待对方完成才能进行下一步工作。并且前端可以使用各种现代化的前端框架和工具，提供更好的用户体验和交互效果。后端可以专注于业务逻辑和数据处理，提供高效的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表单结构如下：
-
<form bindsubmit="getinfo"> 输入内容：<input name="name" type="text" placeholder="code"></input> <button form-type="submit">提交</button> </form>
-
微信小程序里的from表单数据提交和普通的html里的from提交大致相同。
-
-
数据加载：
-
本地json数据加载：
xxx.js如下：
var json = [{"title":"……",……}] onLoad(){ this.setData({ dataList: json }); }xxx.wxml如下：
<block wx:for="{{dataList}}" wx:key="item"> <view> <view>Title:{{item.title}}</view> </view> </block> -
API接口数据请求与加载：
xxx.js如下：
var self = this; wx.request({ url: '请求url地址', //需要提前到小程序后台设置此接口域名。 data: { "x":x, "y":y }, header: { 'content-type': 'application/json' // 默认值 }, success(res) { console.log(res);//打印请求数据结果。 self.setData({ dataList: [{ "title": res.data.result.title,]}] });xxx.wxml如下：
<block wx:for="{{dataList}}" wx:key="item"> <view> <view>Title:{{item.title}}</view> </view> </block>
-
五、总结
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应用实战开发项目让我获得了很多宝贵的经验和教训。我学会了规划任务、团队合作、微信小程序开发以及自我提升。我相信这些经验将对我未来的学习和职业发展产生积极的影响。
131
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
