微信小程序中自定义组件的详细介绍(如何介绍小程序组件)

本文主要详细介绍了微信小程序自定义组件的相关信息，有一定的参考价值，感兴趣的朋友可以参考一下。

序

最近接触了微信小程序。同样，公司使用的前端框架是vue。然后通过对比发现小程序的开发是各种限制，对开发者很不友好。槽点太多，根本吐不出来，这里就不多说了。打算下次写篇文章把他们吐槽出来。这次主要分享一些关于小程序自定义组件的想法。小程序的官方框架比较粗糙、原始、复用性差，而且没有实现自定义组件的功能，让很多使用Vue和React的前端开发很不适应。网上有各种抱怨，也有分享自定义组件的方法，但是微信小程序升级后要么太复杂，要么不兼容。反正还有各种坑你没商量。下面是我在项目中的体会。请指正，互相学习。

Toast自定义组件实现

以最简单的吐司组件为例。

官方框架只提供页面模板功能:WXML提供了一个模板，在模板中可以定义代码片段，然后在不同的地方调用。

但该功能不支持js，style封装，需要在相应页面进行处理。而且模板有自己的作用域，需要带数据导入。

将功能封装到一个独立的组件中需要独立于页面。使用时，组件会挂载在相应的页面上，所以组件需要传入page this(Page)对象。实现代码如下

目录结构

|——组件| & # 8212；—敬酒| & # 8212；—toast.js | & # 8212—toast.wxml | & # 8212—toast.wxss

密码

toast.wxml

& lt模板名称= & # 039；敬酒& # 039；& gt& ltview class = & quotS-吐司& quotwx:if = & quot；{ { msg } } & quot& gt& ltview class = & quotS-祝酒词-内容& quot& gt{ { msg } } & lt/view & gt；& lt/view & gt；& lt/template & gt；toast.js

/** * toastMsg强制提示内容* showTime非强制显示时间秒*/function toast(page，toastMsg，show time){ let timer page . setdata({ toastMsg })show time = show time | | toastMsg . length/4 console . log(show time)clear time out(timer)timer = setTimeout(()= & gt；{ page . setdata({ toastMsg:& # 039；'}) clearTimeout(timer) }，show time * 1000)} module . exports = { toast:toast，} toast . wxss . S-toast -content { position:fixed；左:50%；颜色:# fff宽度:500rpx底部:120rpx背景:hsla(0，0%，7%，. 7)；填充:15rpxtext-align:居中；-WebKit -transform:translate x(-50%)；transform:translate x(-50%)；border -radius:4r px；Z-指数:6999；}使用方法

1.wxml参考页面模板

2.js文件引用toast.js

从& # 039；导入{ toast };../../../project/component/toast/toast . js & # 039；3.打电话

敬酒(这个，& # 039；填写详细信息& # 039；)的改进和更多扩展

实际中会有很多Toast确认加载之类的通用组件，项目中也会有大量的业务组件。我们可以将js引入到一个js文件中，然后在页面加载时注册这个(页面)(onLoad方法)，这样所有组件都可以只使用一次，比如

敬酒(这个，& # 039；填写详细信息& # 039；')成为

吐司(& # 039；填写详细信息& # 039；')同样的思路，我们可以在vue中实现类似mixin的功能，大大提高复杂业务项目中代码的可重用性和可维护性。

公司只有我一个人开发小程序，不存在多人协作开发小程序的情况。我在这方面没有太多的努力。