微信云开发：组件的使用

组件大致分为两种，一种是微信云开发库内自带的组件如image，video等媒体组件，input，form表单等数据组件等等，另一类则是需要拓展的或者自定义的组件，先前的文章应该有讲过组件的位置感兴趣的可以去翻看一下，我的文章比较零散因为时间不是那么大块不过都是比较贴合基础薄弱的同学，我会多讲一些理解性的东西，细节也比较多，感谢你的阅读，也请耐心读完。

在使用组件之前，我们需要明白库自带组件和拓展自定义组件的区别

目录

一、npm的构建

 二、组件的声明与调用

三、组件调用的细节更改

---

为此我么需要牢记三个网址：

1.wantui：Vant Weapp - 轻量、可靠的小程序 UI 组件库

2.微信文档组件：https://developers.weixin.qq.com/miniprogram/dev/component

3.微信文档拓展组件：https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus

微信文档内组件都是库内自带的不需要声明的，而拓展组件和vantui是需要声明和定义的

库内组件可以直接使用这里就不再多讲，一些细节放在后面再说，拓展组件和vantui的使用是需要构建npm的，就是程序内打包，稍后按顺序解释，首先我们先讲解npm的构建

一、npm的构建

首先检查npm是否正确安装，一般npm是随着node.js的包一起安装的

windows+r打开运行输入cmd打开命令窗口

输入指令npm -v 查看npm版本 

可以看到我的npm已经安装版本为6.14.13

打开vantui的快速上手

我们可以看到文档内有教程，按照官网教程来就可以了 ，我这里讲一下细节步骤

打开小程序根目录（app.js所在目录）在地址栏输入cmd并回车打开命令行

输入官网给的指令通过nmp下载npm包    npm i @vant/weapp -S --production 

npm i @vant/weapp -S --production

两个黄色的WARN是说package-lock.json无说明，没有存储字段，意思就是空的，由于我们是新建的项目肯定是空的所以不管。

可以看到加入了一个更新了一个包并审核了4个包（就是package）

记事本打开app.josn去除"style": "v2"，这是覆盖基础样式 

记住一定要把 "sitemapLocation": "sitemap.json" 后的逗号消除，因为这是命令分隔符

记事本打开project.config.josn覆盖粘贴命令

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

不要不小心把逗号多删了，这里修改的是默认路径，需要正确读取npm包的位置

勾选使用npm模块构建npm，这里盗一张官方图

如果你构建成功了恭喜你，如果遇到问题了也是正常的，每次笔主都会遇到的问题 

 解决方法：

     1.打开小程序根目录（app.js所在目录）打开cmd命令行输入指令

npm init -y

         这里的参数-y意思是对npm要求提供的信息都选择默认值并回车

      2.输入指令npm i miniprogram-sm-crypto --production

npm i miniprogram-sm-crypto --production

          下载npm依赖，其中也就包含组件的文件如图

  

      可以看到每个组件内都会有类似文件，这些都是自定义组件的代码，事实上如果你可以自己敲        完全可以不用npm下载包并引用，不过这肯定巨麻烦，所以还是老老实实用npm吧

      结束了再次构建npm，完成构建。 

 二、组件的声明与调用

  1.组件的引用

  首先我们尝试wantui的组件

 引入组件

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

  让我们来分析一下代码的意思：@vant文件夹内weapp文件夹内button内的index

因为@vant有设置索引所以前面的不需要加位置，我们很简单就能找到

 里面的index就是指这几个文件的总称了

组件未找到：蛋疼的来了，开始报错（如果你下载正确是不会有报错的可以直接使用跳过）

提示button未找到，这是为什么呢？打开node_modules发现并没有@vant文件夹

  这是因为刚开始的时候没有npm依赖并且识别错误指令（没错，这个和上面的错误是连环的0.0）

解决方法：很简单，重新下载一遍就可以了

  1.打开初始目录（miniprogram文件夹所在目录）并打开cmd命令行输入指令

npm init -y

  2.继续输入指令下载npm资源包

npm i @vant/weapp -S --production

  下载好后打开node_modulse文件夹发现出现了@vant文件夹，不过这只是资源包，需要重新构建npm让小程序可以识别

 构建完npm发现小程序不再报错并且打开mpniprogram文件夹内miniprogram_npm文件夹发现多了个@vant文件夹表示npm构建成功小程序可以正确引用组件

 构建页面在index.wxml文件内 输入button调用语句

 可以看到出现了一个按钮，注意不使用组件也是有button可用的，不过<van-button>给了更多的自定义和更改空间

 以上便是组件的调用，要注意的点是在调用多个组件声明部分要在不同的组件声明之间加上逗号（英文）否则会引起冲突，最后一行可以不加，如图

  在组件的调用时更好有布局的运用，比如线性布局linearlayout等，在视觉显示不同位置用view隔开，在修改和查看代码时一目了然。

三、组件调用的细节更改

  平时我们在使用软件时见过形形色色的触发方式，单说button按钮这一项就有许多的样式，上面我们示例的默认按钮没有颜色只有细长单调的边界框和中心的自编辑文字，虽然也时同样可以绑定事件触发的，但是依旧看起来不怎么美观，为什么我示例的button这么难看？如果你看过我之前初始化项目的文章，你应该能发现我把index.wxss（保存样式的文件）内的所有内容都删除了，所以这一个button的样式就需要你自己去编辑了，当然会有默认样式和标准样式，接下来我会一一细讲

 打开我们熟知的vant-ui导航页找到button标签

  左侧是vant-ui的导航栏，中间是更多button的信息，右侧是效果展示，可以根据需求挑选需要的button，可以看到按钮标准类型有default，primary，info，warning，danger，这些用type进行约束，如type="primary"，注意type只能定义一种，你也可以在wxss文件内自己设置type

  在第一个大于小于号括内定义所有参数，不只是type，同样也有color，size等等具体在button标签下API中查看

 左侧参数下是各种参数的名称，基本定义方式为  参数名="参数值"  注意不同的参数定义之间要有明显的空格隔开，默认值则是在不定义时输出的button参数值，这里要注意的是可以看到参数color，id和icon默认值是'' - "，是因为这些参数的参数值是需要自己定义的，id的作用是绑定事件，存储数据，做标签，作为桥梁连接其他组件等等，color的参数值可以使用十六色代码来表示比如#00FF00代表绿色，记住不能省略#号，icon则更为特殊，要绑定src资源地址，另谈。

  官方文档是存在一定阙漏的，因为有很多参数名是没有具体参数值列表的，这些就需要你自己去查和单独开文档试验了