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

前言

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

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

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

|------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;  }

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('填写详细信息'')

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

以上就是微信小程序中自定义组件的详细介绍的详细内容，更多内容请关注技术你好其它相关文章！