uniapp小程序开发

1	https://uniapp.dcloud.net.cn/

uni-app

1
2
3

npm config set registry https://registry.npmmirror.com
npm config get registry
npm install -g @vue/cli

引入vant v2，参考https://vant-ui.github.io/vant/v2/#/zh-CN/quickstart

1	npm i vant@latest-v2

在main.js文件引入挂载vant

1 2	import Vant from './node_modules/vant/lib/vant' Vue.use(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/下

{
    "path" : "pages/plan/plan",
    "style" : 
    {
        "navigationBarTitleText" : "发送",
        "usingComponents": {
            // "van-action-sheet": "/wxcomponents/vant/action-sheet/index",
            "van-area": "/wxcomponents/vant/area/index",
            "van-button": "/wxcomponents/vant/button/index",
            // "van-card": "/wxcomponents/vant/card/index",
            "van-cell": "/wxcomponents/vant/cell/index",
            "van-cell-group": "/wxcomponents/vant/cell-group/index",
            "van-checkbox": "/wxcomponents/vant/checkbox/index",
            "van-checkbox-group": "/wxcomponents/vant/checkbox-group/index",
            // "van-col": "/wxcomponents/vant/col/index",
            "van-dialog": "/wxcomponents/vant/dialog/index",
            "van-field": "/wxcomponents/vant/field/index",
            // "van-goods-action": "/wxcomponents/vant/goods-action/index",
            // "van-goods-action-icon": "/wxcomponents/vant/goods-action-icon/index",
            // "van-goods-action-button": "/wxcomponents/vant/goods-action-button/index",
            "van-icon": "/wxcomponents/vant/icon/index",
            "van-loading": "/wxcomponents/vant/loading/index",
            "van-nav-bar": "/wxcomponents/vant/nav-bar/index",
            "van-notice-bar": "/wxcomponents/vant/notice-bar/index",
            "van-notify": "/wxcomponents/vant/notify/index",
            // "van-panel": "/wxcomponents/vant/panel/index",
            "van-popup": "/wxcomponents/vant/popup/index",
            // "van-progress": "/wxcomponents/vant/progress/index",
            // "van-radio": "/wxcomponents/vant/radio/index",
            // "van-radio-group": "/wxcomponents/vant/radio-group/index",
            // "van-row": "/wxcomponents/vant/row/index",
            // "van-search": "/wxcomponents/vant/search/index",
            // "van-slider": "/wxcomponents/vant/slider/index",
            // "van-stepper": "/wxcomponents/vant/stepper/index",
            // "van-steps": "/wxcomponents/vant/steps/index",
            "van-submit-bar": "/wxcomponents/vant/submit-bar/index",
            // "van-swipe-cell": "/wxcomponents/vant/swipe-cell/index",
            // "van-switch": "/wxcomponents/vant/switch/index",
            // "van-tab": "/wxcomponents/vant/tab/index",
            // "van-tabs": "/wxcomponents/vant/tabs/index",
            // "van-tabbar": "/wxcomponents/vant/tabbar/index",
            // "van-tabbar-item": "/wxcomponents/vant/tabbar-item/index",
            // "van-tag": "/wxcomponents/vant/tag/index",
            "van-toast": "/wxcomponents/vant/toast/index",
            // "van-transition": "/wxcomponents/vant/transition/index",
            // "van-tree-select": "/wxcomponents/vant/tree-select/index",
            "van-datetime-picker": "/wxcomponents/vant/datetime-picker/index",
            "van-rate": "/wxcomponents/vant/rate/index",
            // "van-collapse": "/wxcomponents/vant/collapse/index",
            // "van-collapse-item": "/wxcomponents/vant/collapse-item/index",
            "van-picker": "/wxcomponents/vant/picker/index"
        }
    }
}

设计模式

在软件开发中，设计模式帮助我们组织代码，使其更易于维护和扩展。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。

这些设计模式帮助我们组织代码，使应用程序更易于理解、维护和扩展。选择哪种模式取决于你的项目需求和技术栈。