Rumah > applet WeChat > Pembangunan program mini > 微信小程序中自定义组件的详细介绍

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

黄舟
Lepaskan: 2018-05-25 14:10:16
asal
2696 orang telah melayarinya

这篇文章主要为大家详细介绍了微信小程序自定义组件的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

前言

最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好。各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下。本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受。网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量。在这分享下本人在项目中是如何实现的,欢迎指正批评,互相学习。

toast自定义组件实现

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

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

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

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

目录结构

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

代码

toast.wxml

<template name=&#39;toast&#39;>
  <view class="s-toast" wx:if="{{msg}}">
    <view class="s-toast-content">{{msg}}</view>
  </view>
</template>
Salin selepas log masuk

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: &#39;&#39; })
    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;
}
Salin selepas log masuk

使用方法

1、wxml引用页面模板

2、js 文件引用 toast.js

import { toast } from &#39;../../../project/component/toast/toast.js&#39;
Salin selepas log masuk

3、调用

toast(this, &#39;填写详细信息&#39;)
Salin selepas log masuk

改进及更多扩展

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

toast(this,&#39;填写详细信息&#39;&#39;)
Salin selepas log masuk

变成

toast(&#39;填写详细信息&#39;&#39;)
Salin selepas log masuk

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

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

Atas ialah kandungan terperinci 微信小程序中自定义组件的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan