Skip to main content

微信小程序开发-重点：组件库

danger

这是比较重要的内容

为什么要使用组件库？​

虽然建议初学者都使用原生进行开发，以便于熟悉语言和架构，但是对于学习时间紧、急于拿出成果的开发者来说，组件库是一个更好的选择（也可以说它是一个框架）。程序员做的事就是让后来的程序员更加轻松，因此，诞生了许多组件库。当然，这里说的组件库只是UI组件库，必须和vue、react等js框架区分开。

怎么理解UI组件库

我们用房屋装修作为例子。你的房子里面需要一些家具。假如你前往宜家家居购买一些家具，比如沙发、床、桌子等，那么这时我们就可以把宜家比喻成一个装修组件库。你只需要把沙发从宜家里面拿出来，放到你的家里，你就完成了一个沙发的构建。但是，如果你不使用类似的组件库而只使用原生呢？就相当于如果你需要一个沙发，你就需要从锯木头、织布开始，慢慢地依靠自己造出这个沙发。

UI组件库就是这样，如果你需要一个搜索框，你只需要将它调用出来，而不是自己去写嵌套结构。因此使用UI组件库能够帮你减少很多css代码和html代码的书写。

选择一个组件库​

小程序方面，由于其生态良好性，因此它也有很多组件库，请看这篇文章 ，它介绍了很多主流的小程序组件库。
本文选择使用Vant Weapp,请马上收藏这个文档。Vant是有赞前端团队基于有赞统一的规范实现的 Vue、React、微信小程序组件库，提供了一整套 UI 基础组件和业务组件。 image.png

选好组件库之后，建议团队里的设计人员也按照这个选定的框架进行设计，很多设计软件提供组件库原型的下载。例如即时设计-vant设计规范
image.png

下载安装vant​

步骤一​

使用npm安装

tip

这个方法要求你的电脑里安装了node.js环境，如果没有请看电脑配置npm环境。这个不会的话，可以给我留个言，我来写一个文档。这个工具以后也会用到，大家可以花点时间给装上。

打开微信IDE里的终端。
1656503085963.png
输入npm指令安装。 

# 通过 npm 安装
npm i @vant/weapp -S --production

image.png

步骤二​

安装后，修改 app.json，将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

image.png

步骤三​

然后修改 project.config.json，需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。 

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

image.png

步骤四​

构建npm包
点击工具-构建npm。
1656505382742.png

tip

经过上面的操作之后，就可以快乐地进行接口调用啦！

开始开发​

俗话说，程序员就是API调用师（bushi），那么我们就来快乐地调用API吧！

使用如下的tabbar配置,这还没用到vant：
image.png

效果如下

1ac24299f941b48589dd43480b59001.jpg

调用一个日历选择组件​

现在我们想要在首页上加一个日历！
首先，我们到vant的文档找到日历所在位置，然后查看调用方式。
1656507890592.png
他告诉我们要先声明组件，好，那我们就声明组件。
在app.json或index.json中引入组件。如果在app.json中引用，就可以全局使用，如果在某个界面的index.json中引用，则只能那个页面使用，这里我们在app.json中声明组件。

这里官方文档有点问题，实际上得引入两个组件。 

"usingComponents": {
  "van-calendar": "@vant/weapp/calendar/index",
  "van-cell": "@vant/weapp/cell/index"
}

image.png

然后我们在主页,index.wxml中调用这个组件。 

<van-cell title="选择单个日期" value="{{ date }}" bind:click="onDisplay" />
<van-calendar show="{{ show }}" bind:close="onClose" bind:confirm="onConfirm" />

然后在index.js中加入逻辑代码，这些都是从文档上直接copy的。 

Page({
  data: {
    date: '',
    show: false,
  },

  onDisplay() {
    this.setData({ show: true });
  },
  onClose() {
    this.setData({ show: false });
  },
  formatDate(date) {
    date = new Date(date);
    return `${date.getMonth() + 1}/${date.getDate()}`;
  },
  onConfirm(event) {
    this.setData({
      show: false,
      date: this.formatDate(event.detail),
    });
  },
});

image.png

image.png

实现效果如下

image.png

tip

怎么样？有没有觉得非常的简单方便，就能写一个很复杂的日历组件啦？

调用一个开关组件​

我们再来举一个例子，调用一个开关组件。

同样，添加app.json代码。 

"usingComponents": {
  "van-switch": "@vant/weapp/switch/index"
}

image.png

然后在index.wxml中引用它。 

<van-switch checked="{{ checked }}" bind:change="onChange" />

在index.js中添加逻辑代码，注意，切不可直接复制粘贴，要将需要的代码补充到应该有的地方。 

Page({
  data: {
    checked: true,
  },

  onChange({ detail }) {
    // 需要手动对 checked 状态进行更新
    this.setData({ checked: detail });
  },
});

前面带红色断点的是我这次添加的内容：
image.png
效果如图：
image.png

结语

好了，这就是本节的内容了，vant-ui组件库是一个非常齐全的组件库，经过上面两个例子相信你已经能够触类旁通，使用组件库里的组件，构造出你想要的页面了.