微信小程序自定义组件-可清除的input组件

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

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

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

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

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

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

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

我的属性列表如下：

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

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

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

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

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

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

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

最终实现的效果图如下：

项目GitHub地址：

微信小程序酒店类模板

微信小程序捐款类模板

html铺满整个页面

html铺满整个页面_小程序富文本（HTML+MarkDown），200+种语言代码高亮支持

蓝丨飘

原创

关注

0点赞·164人阅读

介绍

今天为大家带来的是一个用于在微信小程序中渲染html和Markdown的富文本组件，而且支持代码高亮，它就是html2wxml！

Github

>

fatherjson

注意：要使子组件可以在父组件展示需在父组件的json中引入并定义。

fatherwxml

注意：fatherTOson属性写在son标签上，fatherTOson不是固定的，可以修改其值。

sonjs

注意：即在sonjs的properties中定义父组件要传过来的参数类型

sonwxml

总结： 父组件向子组件传参，实际上就是在父组件中引入子组件的时候，带上一个属性fatherTOson，并且给其赋值，然后子组件通过这个属性名称fatherTOson，获取其值。

sonwxml

sonjs

注意：bindtap='change'定义了一个方法在sonjs的methods完成向父组件传值。thistriggerEvent固定不变，myevent是在父组件中定义的方法。sonTOfather是传给父组件的变量名。

fatherwxml

注意：myevent是在父组件中定义的方法；sonTOfather是声明的变量接收子组件的值

fatherjs

注意：在fatherjs中声明变量sonTOfather，用来接收子组件穿来的参数。

如果在引入物流查询插件后，微信小程序中的新页面空白，可以尝试以下几种方法进行排查：

1 检查物流查询插件是否配置正确：检查在小程序管理后台中物流查询插件的配置是否正确，比如检查物流公司编码是否正确、订阅地址是否设置等。

2 检查网络连接：可能是网络连接问题导致的空白页面，可以尝试切换网络或重启设备后再试。

3 检查代码实现：在代码中检查是否引入了正确的物流查询插件组件，以及组件的方法是否正确使用和调用。

4 检查权限问题：物流查询插件需要用户的授权才能获取物流信息，检查是否在代码中正确申请了用户授权。

5 检查数据源问题：如果有第三方数据源，需要确保数据源的接口稳定可靠，数据能正常返回，避免因数据源方面的问题导致页面空白。

如果上述方法仍然无法解决问题，可以尝试联系微信技术支持或相关技术人员进行进一步排查和解决。

以上就是关于微信小程序自定义组件-可清除的input组件全部的内容，包括:微信小程序自定义组件-可清除的input组件、小程序引入html全屏、微信小程序 父子组件间传参等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！