微信小程序开发自定义组件（微信小程序开发自定义组件是什么）
本篇文章给大家谈谈微信小程序开发自定义组件，以及微信小程序开发自定义组件是什么对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、【微信小程序】图片裁剪 前端裁剪 后端裁剪
- 2、微信小程序之自定义日历组件
- 3、微信小程序自定义组件-可清除的input组件
- 4、微信小程序之vant组件自定义样式（外部样式）
- 5、微信小程序从入门到学会第七天-小程序的自定义组件
【微信小程序】图片裁剪 前端裁剪 后端裁剪
微信小程序裁剪组件，支持前端裁剪和后端裁剪两种方式
1.前端裁剪：将裁剪框指定的区域，单独生成图片，获取裁剪图片的临时文件路径
2.后端裁剪：获取裁剪框相对于原图的像素坐标位置，将裁剪区域坐标以及原图临时文件路径，传到后端进行图片裁剪
使用微信小程序自定义组件开发
小程序自定义组件官网：
添加image-cropper标签，如下
可以在image-cropper标签内添加操作按钮，如下
首先需要在onLoad方法中，设置裁剪标签属性
然后添加按钮相应的绑定方法
获取到的res如下
获取到的裁剪参数的对应关系图
获取到裁剪参数后，将原图以及裁剪参数传到后台进行裁剪
2.获取裁剪图片地址
获取到的res如下
微信小程序之自定义日历组件
我们单位实行的大小周工作制，即大周休息2天，小周消息一天。因这点小特殊，总有同事常记错周六这天是否上班。也因这点，在程序上需要特别体现出大小周的提示，于是需要设计一个日历组件，并在日历上标注出排班名称和大小周。最终实现图如下:
微信小程序demo提供了一个简单的日历组件，vant也提供了一个日历组件，在github上也有一些日历组件，我试用了一番，都多少存在一些不符合之处。重点说一下vant，它有几个问题：一是加载数据太大，一运行就加载至少一年以上的数据；二是样式不好控制，大小相修改一下就会变形；三是在日期上下方加文字不方便。
因为没有找到太好的组件可以引用，就自己想设计一个能方便控制的，遂有下面的设计，
1、采用grid组件显示日期，分三行，中间一行为日期具体天的数字，上面一行显示大小周提示、下面一行显示排班名称
2、采用scroll-view动态包含grid数目
3、一行显示几天，可以动态设置
1、日历头部
2、日历内容
3、日历结构体
4、具体每个月的日历算法
获取某个月的第一天和最后一天，再获取每天的星期数，循环放到grid结构体中
优点：一是加载数据量少，可控制；二是显示内容丰富，可以控制；三是也是显示可以使用slot，更加丰富
缺点：一不是专业日历组件，样式简单了些；二是加载数据量有限，grid自身也是一个组件，加载多了额外的开销肯定大起来。
微信小程序自定义组件-可清除的input组件
最近正在做的一个小程序项目中需要用到一个可清除的输入框控件，为了在项目中使用方便以及方便其他项目直接使用，便封装了一个可清除的input自定义组件。
组件需要达到的需求是：输入框内没有内容时，删除按钮隐藏；当输入框内有内容时，删除按钮显示，点击删除按钮则清空输入框内所有内容。并且还可以设置输入框整体样式以及输入框左侧图标。
明确了需求之后，就可以开始着手实现了。
首先，在目标目录下新建一个自定义组件
建好之后，我们需要来设计布局。根据需求来看，我们只需要三个组件：两个image和一个input。左边一个image提示图标，然后一个input输入框，最后一个image删除按钮。我们要把尽可能多的数据设置成可以修改的绑定数据，提高自定义组件的可扩展性。
最终确定的wxml布局文件如下：
然后，我们就要来设置组件的一些属性和监听方法了。小程序的组件属性列表是定义在.js文件的properties里的。把需要暴露出去并可以修改的属性都写在这里面。其语法示例如下：
我的属性列表如下：
完成了属性列表的编写之后，接下来我们需要为自定义组件添加监听事件。
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
监听以及触发事件的语法是这样的：
这里我们需要设置的触发事件有，输入框的输入事件以及输入框的确认事件。通过 triggerEvent 方法指定事件名以及事件触发事件参数
以上就已经完成了这个可清除input组件的自定义开发了。现在来看怎么使用这个组件。
首先在需要使用此组件的页面.json文件中设置usingComponents属性来引入这个自定义组件
然后，我们就可以在页面中引用这个自定义组件了，引用的方式非常简单，通过我们在上一步设置的标签名称就可以引用了。
最终实现的效果图如下：
项目GitHub地址：
微信小程序酒店类模板
微信小程序捐款类模板
微信小程序之vant组件自定义样式（外部样式）
vant 很多组件带自定义样式custom-class，方便使用者修改或者扩展。
本文以vant-cell修改背景色为例，说明自定义属性的使用。
xml引入vant-cell
原始效果如下图
xml申明custom-class属性
wxss实现具体的样式
效果如下图，背景色样式已经被修改了，
微信小程序从入门到学会第七天-小程序的自定义组件
当我们多次使用同一个组件的时候，我们可以将其进行封装然后进行使用，这个时候，自定义组件就起到了很好的作用，前面虽然我们讲到了自定义组件，不过那都是皮毛，仅仅只是讲到了自定义组件的创建和使用罢了，下面我们来深入剖析自定义组件。首先看下目录：
匿名插槽
具名插槽
外部样式
多样化的组件通信
1.双向绑定
2.父子组件互相传
组件共享
组件关系
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：
注：以上内容来源于微信开放文档 二、自定义组件的参数
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：
注：以上内容来源于微信开放文档 二、自定义组件的参数
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：
注：以上内容来源于微信开放文档 二、自定义组件的参数
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this访问。组件还有一些通用属性和方法，如下：
关于微信小程序开发自定义组件和微信小程序开发自定义组件是什么的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
