小程序安装第三方组件库 如：vant

>

创建组件的方法：

步骤一

在小程序项目中添加一个components文件夹，里面存放自定义的组件，然后在components目录下新建一个customComponent文件夹，文件夹可以命名为自定义组件名字相关，用来存放自定义的组件。

在这个文件夹右键，选择新建组件，输入组件名，一个自定义组件由 json, wxml, wxss, js4个文件组成，此时将自动生成这四个文件。

步骤二

接下来进行组件的相关配置：

首先需要在 json 文件中进行自定义组件声明（将component 字段设为 true 可这一组文件设为自定义组件

步骤三

引用组件：

在父级中：“useingComponents”：{

“命名”：“子级路径”，

}

本系列主要对小程序常用的组件做一个总结，方便自己及其它小程序开发者作为字典查阅和检索。

小程序组件有一些公共属性，在每个组件中代表的意义和数据类型都是一样的。

容器组件：内部能嵌套任何标签。常用的视图容器有： view , scroll-view , swiper

<view/> 是一个块级容器组件，任何一种复杂的布局都可以嵌套在 <view/> 组件内，并在 wxss 中设置相关样式。

<view/> 除了上述组件共有的属性外，还包含一组关于点击行为的属性。

在布局中，需要容器具有可滑动的功能，且能监听滚动、触顶、触底等事件，就需要 <scroll-view/> 组件， <scroll-view/> 在 <view/> 组件上添加滚动相关的属性，通过这些属性，可以响应滚动相关事件。

注意:

<textarea/> , <video/> , <map/> , <canvas/> 不能嵌套在 <scroll-view/> 中使用

利用 swiper 组件，可以实现轮播图，滑动页面，预览等，一个完整的滑块视图软件由 <swiper/> 和 <swiper-item/> 两个标签组成，不能单独使用。一个 <swiper/> 只能嵌套一个或多个 <swiper-item/> 标签，放置其它的标签会被删除，其中， <swiper-item/> 中能放置任何标签，高度默认为 100% ,另外没有任何其它特殊属性。

<swiper/> 的属性如下：

封装hf-picker选择器。因为自带的picker在iOS 、安卓上显示的样式不一致，产品测试提出个能不能样式弄成一致。想系统提供了picker-view这个，应该是没问题的。 

一番 *** 作以后，发现在层级不复杂的页面效果很不错，但是在一些view嵌套view嵌套的很深，比如里面已经有非statics的父view时，那么这个选择器的d窗显示的位置就不对了。同事说这个通过view肯定是实现不了，毕竟父view范围就那么大，除非把选择器view放到page里面去 ,是可以实现，但是违背了封装组件的原则。同事说试试half-screen-dialog，结果发现提供的Slot效果达不到UI要求

如今有方法对half-screen-dialog的内部元素样式进行设置了，赶紧搞起。 最终结果还是挺好的。因为是dialgod出，所以不用考虑父view的范围问题了。 

最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其他项目直接使用，便封装了一个可清除的input自定义组件。

组件需要达到的需求是：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。

明确了需求之后，就可以开始着手实现了。

首先，在目标目录下新建一个自定义组件

建好之后，我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。

最终确定的wxml布局文件如下：

然后，我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下：

我的属性列表如下：

完成了属性列表的编写之后，接下来我们需要为自定义组件添加监听事件。

事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。

监听以及触发事件的语法是这样的：

这里我们需要设置的触发事件有，输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数

以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。

首先在需要使用此组件的页面json文件中设置usingComponents属性来引入这个自定义组件

然后，我们就可以在页面中引用这个自定义组件了，引用的方式非常简单，通过我们在上一步设置的标签名称就可以引用了。

最终实现的效果图如下：

项目GitHub地址：

微信小程序酒店类模板

微信小程序捐款类模板

以上就是关于小程序安装第三方组件库 如：vant全部的内容，包括:小程序安装第三方组件库 如：vant、微信小程序_组件、小程序创建和引用组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！