基于springboot+微信小程序实现垃圾分类小程序演示【附项目源码】

系统开发环境??

微信小程序的运行环境分为渲染层和逻辑层，分别有两个线程进行管理，界面使用 WebView 进行渲染，逻辑层则采用 JsCore运行 JavaScript 脚本，这两个线程的通信经由微信客户端做中转，微信客户端通过HTTPS 请求与第三方服务器进行交互，而且微信给开发者开放了很多的功能，实现起来还是非常的方便。微信小程序为学习者带来很多便利，同时也减少了为不同设备、不同操作系统适配的工作量，因此本系统采用微信小程序的架构进行开发。

微信小程序相关技术

微信小程序上线的初衷除了让用户使用更加方便，同时也给开发者提供更加方便便捷的开发环境来进行更加高效的进行开发。任何一套系统的设计与开发都需要一套完整的系统框架，用来保证整套系统的完整运作。对于微信小程序来说，为了使开发更加快捷，微信小程序采用的框架为 MINA 应用框架。MINA 框架主要为一个负责数据交互的系统。其构成主要包括用来显示页面的视图层结构与负责实现数据交互的逻辑层系统。其中，视图层负责发出事件请求，逻辑层负责接受数据，处理数据。当逻辑层接收到数据后，视图层再根据逻辑层的数据改变，从而做出相应的更新，MINA 框架使逻辑层和视图层内的数据变化达到同步。

框架还负责很多的交互操作，开发者只需负责将要实现页面方法与函数输入进去，框架就可以管理整个程序的页面路由与生命周期，让小程序可以在不同的子级页面跳转时无缝流畅。MINA 框架中的视图层用来开发小程序的前端界面，page建立界面，使用 WXML 和 WXSS 语言进行开发。WXML 和 WXSS 语言都是框架自身提供的描述语言，WXML 用来描述页面结构。WXSS 用来控制页面的展示样式，搭建页面的基础视图结构。AppService 逻辑层是 MINA 的服务中心，负责页面渲染需要的数据以及页面交互所处理的逻辑，管理应用的生命周期以及页面路由，视图层向逻辑层发送事件请求，逻辑层通过请求进行页面数据处理与传输，再发送给视图层进行页面渲染。逻辑层使用 JavaScript 语言编写，实现页面的交互，网络请求以及数据的加工处理，逻辑层含有小程序强大的 API 接口功能，开发者在开发时，需要哪些功能直接调用即可，包括获取用户信息接口，支付功能接口，定位服务功能接口等。此外，小程序借助 JSBridge 实现对底层API 接口的调动，JSBridge 通过 JavaScript 连接 Web 与 Native,使 Native 可以调用WEB 的 js 代码，让 Web 可以调用原生的代码。所以微信小程序的开发无需考虑ios 和安卓操作系统的差异，两者兼容，只需在视图层和逻辑层进行开发即可。下图主要展示了 MINA 框架的主要结构：

微信小程序文件目录

每一个微信小程序的开发，都必定包括一个 app—其主要功能是针对于小程序整体进行描述，以及一个 page—主要用于描述小程序的页面。在开发小程序时，微信小程序初始化的代码架构目录是十分简单明了的,仅仅显示了 2 个目录,即 pages 目录还有 utils 目录,以及 app.js、app.json、app.wxss 这 3 个应用文件。针对于 pages 目录来说，其主要功能相当于一个“存储器”，用来“存放”小程序的各个显示页面。一个页面对应着一个目录,目录里包含着 js 文件,wxml 文件,wxss 文件,json 文件这四个文件。如下图所示，pages 的目录里面主要存放着index 与 logs 这两个页面的构成文件。Utils 负责存放 js 库和数字格式化文件

由 2.2.1 节介绍可知，MINA 框架共有逻辑层、视图层、数据层三个重要的功能层，每层之间联系紧密，缺一不可。

（一）逻辑层

逻辑层由JavaScript语言编写，这是所有页面JS脚本文件的集合，实现业务逻辑处理，并在视图层进行事件传输和数据处理。但是，为了提高小程序的开发效率，小程序使用的JavaScript与传统的Java脚本之间存在一些差异。 微信研究团队进行了一些修改，主要如下：

（1）添加app（）用于程序注册，page（）用于页面注册；

（2）包含丰富的API，享受微信独特服务如支付，扫一扫等；

（3）每个页面都有自己的范围并提供模块化

另外，由于微信小程序是在移动终端上的微信内部使用的，而不是在浏览器中运行的，因此某些document、window方法不适用。

（二）视图层

框架的视图层由WXML与WXSS编写，微信小程序的视图层，实际就是所有程序中.wxml文件与.wxss文件的集合

（1）wxml 文件实现页面的结构描述。

（2）wxss 文件实现页面的样式描述。

（三）数据层

数据层包括临时数据或缓存、文件存储、网络存储与调用。

（1）页面临时数据缓存。在 Page()中，主要用到 set Data 函数，让数据可以在逻辑层与视图层之间传输交换。 ?

（2）文件存储（本地存储），使用数据 API 接口

（3）网络存储或调用，上传或下载文件 API 接口。

系统页面展示

如需要可扫取文章下方二维码联系得源码