uniapp小程序开发
1 | https://uniapp.dcloud.net.cn/ |
uni-app
1 | npm config set registry https://registry.npmmirror.com |
引入vant v2，参考https://vant-ui.github.io/vant/v2/#/zh-CN/quickstart
1 | npm i vant@latest-v2 |
在main.js文件引入挂载vant
1 | import Vant from './node_modules/vant/lib/vant' |
app.vue中引入vant 样式文件
1 | @import '@/node_modules/vant/lib/index.css'; |
引入Vant Weapp，参考https://vant-ui.github.io/vant-weapp/#/quickstart
1 | npm i @vant/weapp -S --production |
将node_modules/@vant/weapp/dist/*复制到wxcomponents/vant/下
1 | { |
设计模式
在软件开发中，设计模式帮助我们组织代码，使其更易于维护和扩展。MVC、MVP和MVVM是三种常见的设计模式，用于分离应用程序中的不同部分，使代码更加模块化。下面，我们用通俗易懂的话来介绍这三种设计模式。
1. MVC（Model-View-Controller）
MVC（模型-视图-控制器）是最早出现的一种设计模式。它将应用程序分为三部分：
- Model（模型）：处理数据和业务逻辑。比如，你的应用程序需要从数据库中获取用户信息，这部分逻辑就放在Model中。
- View（视图）：负责显示数据和用户界面。比如，应用程序的网页、按钮、文本框等，都是视图的一部分。
- Controller（控制器）：处理用户输入，并更新模型和视图。比如，当用户点击一个按钮，控制器会响应这个动作，更新数据（Model），然后刷新界面（View）。
举个例子：
- Model：用户信息（比如名字、年龄）。
- View：显示用户信息的网页。
- Controller：当用户点击“更新”按钮时，控制器会获取新数据，更新用户信息，并刷新网页。
2. MVP（Model-View-Presenter）
MVP（模型-视图-主持人）是对MVC的一种改进，特别适合用于桌面应用程序或需要复杂用户交互的场景。它也分为三部分：
- Model（模型）：和MVC中的模型一样，负责处理数据和业务逻辑。
- View（视图）：和MVC中的视图类似，负责显示数据和用户界面。
- Presenter（主持人）：类似于控制器，但它不仅处理用户输入，还负责从Model获取数据，并更新View。Presenter和View之间的互动通常通过接口进行，这样可以更容易地进行单元测试。
在MVP中，View比较被动，只负责显示数据和传递用户操作，而Presenter则承担了更多的逻辑处理。
举个例子：
- Model：用户信息。
- View：显示用户信息的网页。
- Presenter：处理用户点击“更新”按钮的操作，从Model获取新数据，然后更新View。
3. MVVM（Model-View-ViewModel）
MVVM（模型-视图-视图模型）最常用于现代前端开发框架，比如Angular、Vue.js和React。它将应用程序分为：
- Model（模型）：处理数据和业务逻辑。
- View（视图）：负责显示数据和用户界面。
- ViewModel（视图模型）：连接Model和View。它从Model中获取数据，并通过双向绑定（数据绑定）将数据传递给View。同时，它也处理用户的输入，将这些输入转换为Model中的数据。
MVVM的核心在于数据绑定，它使得View和ViewModel自动同步。当Model中的数据发生变化时，View会自动更新，反之亦然。
举个例子：
- Model：用户信息。
- View：显示用户信息的网页。
- ViewModel：从Model获取用户信息，并将其绑定到View。用户在网页上修改信息时，ViewModel会自动更新Model。
总结
- MVC：分为Model、View和Controller。Controller处理用户输入，更新Model和View。
- MVP：分为Model、View和Presenter。Presenter处理所有逻辑，View比较被动。
- MVVM：分为Model、View和ViewModel。ViewModel通过数据绑定自动同步Model和View。
这些设计模式帮助我们组织代码，使应用程序更易于理解、维护和扩展。选择哪种模式取决于你的项目需求和技术栈。