這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

最近接觸微信小程序，再次之前公司用的前端框架是vue ，然后對(duì)比發(fā)現(xiàn)，開(kāi)發(fā)小程序是各種限制，對(duì)于開(kāi)發(fā)者非常不友好。愛(ài)掏網(wǎng) - it200.com各種槽點(diǎn)太多，完全吐槽不過(guò)來(lái)，所以在此不多說(shuō)，打算下次專門寫(xiě)一篇文章吐槽一下。愛(ài)掏網(wǎng) - it200.com本次主要分享下小程序自定義組件的一點(diǎn)思路，小程序官方提供的框架比較簡(jiǎn)陋，原始，可復(fù)用較差，沒(méi)有實(shí)現(xiàn)自定義組件的功能，這讓很多使用vue ,react前端開(kāi)發(fā)非常難受。愛(ài)掏網(wǎng) - it200.com網(wǎng)上存在各種吐槽，也有分享實(shí)現(xiàn)自定義組件的方法，但是要么過(guò)于復(fù)雜，要么是微信小程序升級(jí)之后就不兼容，反正是各種坑你沒(méi)商量。愛(ài)掏網(wǎng) - it200.com在這分享下本人在項(xiàng)目中是如何實(shí)現(xiàn)的，歡迎指正批評(píng)，互相學(xué)習(xí)。愛(ài)掏網(wǎng) - it200.com

toast自定義組件實(shí)現(xiàn)

• 這里用最簡(jiǎn)單的toast組件為例子

• 官方框架只提供了 頁(yè)面模板功能 ： WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。愛(ài)掏網(wǎng) - it200.com

• 但是這個(gè)功能不 支持js，樣式封裝，需要在對(duì)應(yīng)的頁(yè)面做處理，且模板還有自己的作用域，需要使用data傳入。愛(ài)掏網(wǎng) - it200.com

• 把功能封裝成獨(dú)立的組件，需要和頁(yè)面獨(dú)立，在使用時(shí)將組件掛載到對(duì)應(yīng)的頁(yè)面，所以組件需要傳入頁(yè)面this(Page)對(duì)象 ，實(shí)現(xiàn)代碼如下
  

目錄結(jié)構(gòu)

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

代碼

toast.wxml

登錄后復(fù)制

toast.js

/**
 * toastMsg 必傳 提示內(nèi)容
 * showTime 非必傳 顯示時(shí)間秒
*/
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;
}

登錄后復(fù)制

使用方法

1、wxml引用頁(yè)面模板

2、js 文件引用 toast.js

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

登錄后復(fù)制

3、調(diào)用

toast(this, '填寫(xiě)詳細(xì)信息')

登錄后復(fù)制

改進(jìn)及更多擴(kuò)展

實(shí)際項(xiàng)目中會(huì)有toast confirm loading ···等多個(gè)通用組件 ，還有大量的業(yè)務(wù)組件，我們可以把js都引入到一個(gè)js文件中，然后在頁(yè)面加載的時(shí)候（onLoad方法）中注冊(cè)this(page)，這樣只需要注冊(cè)一次便可以使用所有的組件，如

toast(this,'填寫(xiě)詳細(xì)信息'')

登錄后復(fù)制

變成

toast('填寫(xiě)詳細(xì)信息'')

登錄后復(fù)制

同樣的思路，我們可以實(shí)現(xiàn)類似vue中混合（mixin）的功能，在業(yè)務(wù)復(fù)雜的項(xiàng)目中，大大提高代碼的可復(fù)用 性和可維護(hù)性。愛(ài)掏網(wǎng) - it200.com

公司小程序只有我一個(gè)人開(kāi)發(fā)，不存在多人協(xié)作開(kāi)發(fā)小程序的情況，在這方面下的功夫不多。愛(ài)掏網(wǎng) - it200.com

以上就是微信小程序中自定義組件的詳細(xì)介紹的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注愛(ài)掏網(wǎng) - it200.com其它相關(guān)文章！