此次开发只为学习和巩固，第一次学习开发

一、开发前需要了解：

开发框架MVVM、痛点、开源工具、VUE前端框架、微信支付模块、uni-app前端框架、小程序申请、开发工具下载、编写测试小程序、小程序结构

1、什么是MVVM？

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

2、开发痛点？

缺少小程序开发案例，没开发过商业小程序，想做全栈小程序，想用Vue开发

本人属于以上问题，单也没学过Vue框架。

3、java全栈开源工具？

　　　　后台管理系统

springMVC、mybatis、Shiro、JWT

　　　　小程序（用户端）

Uni-app、 VUE、生成原生小程序

4、VUE前端框架

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。真正的做到了前后端分离。

5、微信支付模块

申报材料

　　微信支付的资质困扰

iOS限制

6、uni-app app

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码,可编译到Android、iOS、H5、小程序等多个平台。uni-app在跨端数量、拓展能力、性能体验、周边生态、学习成本、开发成本等6大关键指标上拥有极强的竞争优势,解决了现有跨平台框架存在的问题。一次编译，应用于多个平台。

7、学习建议

 8、小程序申请及开发流程

9、开发工具下载

下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

10、编写测试小程序

 11、小程序结构

二、开发前的系统分析：

1.商业小程序（在线学习课堂）用例图

2.项目架构图

3、开发目标

4、前置知识

5、推荐课程

6、小程序学习路线

 7、MVVM设计思想

model层相当于.js（函数调用，书写）

小测试

测试结果

这样就基本了解了mvvm的设计思想

其实就是model-view-viewmodel的相互联系，写好基础函数，在页面绑定事件，执行

8、引用全局样式

要在app.wxss里面书写，要设置的样式，必须是页面里有的样式标签，统一风格

如果要在单个页面里引用另一个样式文件，那么就如下写法：

首先新建一个xcss文件

运行结果