组件大致分为两种，一种是微信云开发库内自带的组件如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资源地址，另谈。

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

微信云开发：组件的使用相关推荐

【微信小程序-原生开发】实用教程08 - 开通微信云开发，操作云数据库新增数据（含修改数据权限），初始化云服务（含获取微信云环境 id），获取云数据，滚动公告栏
开始前,请先完成圆梦宝典中宫格导航的开发,详见 [微信小程序-原生开发]实用教程 07 - Grid 宫格导航,详情页,侧边导航(含自定义页面顶部导航文字) https://blog.csdn.net ...
微信小游戏开发之Cocos Creator使用微信云开发和微信开放能力
主题 Cocos Creator集成微信云开发和调用微信开放能力特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有 ...
基于微信云开发的微信小程序之搜索功能的实现
文章目录搜索功能的设计代码逻辑页面设计效果展示搜索功能的设计功能描述: 该模块主要是基于云开发实现小程序搜的搜索功能.如果搜索框输入为空或直接点击搜索按钮,显示对应弹窗:如果搜索框输入内容 ...
抛砖引玉(3): 微信云开发最佳实践
抛砖引玉(3): 微信云开发最佳实践概览微信云开发是一个打通了微信生态的BaaS (后端即服务)平台,开发方便,快捷,计费友好,适合个人开发者,以及小团队使用. 它主要由云数据库,云存储,云函数 ...
uniapp 微信云开发静态网站和云函数跳转小程序
uniapp 微信云开发静态网站和云函数跳转小程序云开发静态网站的创建云函数及copy-webpack-plugin 安装copy-webpack-plugin可能遇到的问题静态网站和云函数的搭 ...
微信云开发-事件触发器的使用
文章目录一.在哪用二.怎么用三.问题四.摸索五.关于cms的webhook 六.我对触发器函数文件夹的架构想法小结微信开发文档对这个部分的使用资料很少,一个demo都没有,全靠开发者去尝 ...
基于微信云开发的商家转账至零钱
基于微信云开发的商家转账至零钱相关简介开通功能阅读文档技术框架配置环境编写代码注意事项相关参考相关简介本篇文章主要介绍如何通过微信云开发的云函数实现商家转账到零钱.(让那些没有服务 ...
springboot 做表白墙_基于微信云开发 SayLove 表白墙微信小程序V1.0
基于微信云开发 SayLove 表白墙微信小程序后续会继续更新,敬请期待2.0全新版本~ 欢迎添加左边的微信一起探讨! 注意: 云函数的wx-server-sdk依赖需要更新才能正常使用,这里的都是 ...
微信云开发Al短视频一键换脸小程序源码
微信云开发Al一键视频换脸小程序源码是由极客二改后发布的,小程序增加了广告控制, 插屏广告,激励广告和原生广告,由于采用了微信云开发没有后台, 所以不需要域名和服务器也可以正常搭建使用,所有的配置都可 ...

微信云开发：组件的使用

一、npm的构建

二、组件的声明与调用

三、组件调用的细节更改

微信云开发：组件的使用相关推荐

最新文章

热门文章