微信小程序中自定义组件的示例分析

这篇文章主要介绍了微信小程序中自定义组件的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

toast自定义组件实现

• 这里用最简单的toast组件为例子

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

• 但是这个功能不 支持js，样式封装，需要在对应的页面做处理，且模板还有自己的作用域，需要使用data传入。

• 把功能封装成独立的组件，需要和页面独立，在使用时将组件挂载到对应的页面，所以组件需要传入页面this(Page)对象 ，实现代码如下
  

目录结构

|------components
       |------toast
               |------toast.js
               |------toast.wxml
               |------toast.wxss

代码

toast.wxml

<template name='toast'>   <view class="s-toast" wx:if="{{msg}}">     <view class="s-toast-content">{{msg}}</view>   </view> </template>

toast.js

/**  * toastMsg 必传 提示内容  * showTime 非必传 显示时间秒 */ function toast(page, toastMsg, showTime) {   let timer   page.setData({ toastMsg })   showTime = showTime || toastMsg.length / 4   console.log(showTime)   clearTimeout(timer)   timer = setTimeout(() => {     page.setData({ toastMsg: '' })     clearTimeout(timer)   }, showTime * 1000) } module.exports = {   toast: toast, } toast.wxss .s-toast-content {   position: fixed;   left: 50%;   color: #fff;   width: 500rpx;   bottom: 120rpx;   background: hsla(0,0%,7%,.7);   padding: 15rpx;   text-align: center;   -webkit-transform: translateX(-50%);   transform: translateX(-50%);   border-radius: 4rpx;   z-index: 6999; }

使用方法

1、wxml引用页面模板

2、js 文件引用 toast.js

import { toast } from '../../../project/component/toast/toast.js'

3、调用

toast(this, '填写详细信息')

改进及更多扩展

实际项目中会有toast confirm loading ···等多个通用组件 ，还有大量的业务组件，我们可以把js都引入到一个js文件中，然后在页面加载的时候（onLoad方法）中注册this(page)，这样只需要注册一次便可以使用所有的组件，如

toast(this,'填写详细信息'')

变成

toast('填写详细信息'')

同样的思路，我们可以实现类似vue中混合（mixin）的功能，在业务复杂的项目中，大大提高代码的可复用 性和可维护性。

公司小程序只有我一个人开发，不存在多人协作开发小程序的情况，在这方面下的功夫不多。

感谢你能够认真阅读完这篇文章，希望小编分享的“微信小程序中自定义组件的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!