這篇文章主要為大家詳細(xì)介紹了微信小程序自定義組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言
最近接觸微信小程序，再次之前公司用的前端框架是vue ，然后對(duì)比發(fā)現(xiàn)，開(kāi)發(fā)小程序是各種限制，對(duì)于開(kāi)發(fā)者非常不友好。各種槽點(diǎn)太多，完全吐槽不過(guò)來(lái)，所以在此不多說(shuō)，打算下次專(zhuān)門(mén)寫(xiě)一篇文章吐槽一下。本次主要分享下小程序自定義組件的一點(diǎn)思路，小程序官方提供的框架比較簡(jiǎn)陋，原始，可復(fù)用較差，沒(méi)有實(shí)現(xiàn)自定義組件的功能，這讓很多使用vue ,react前端開(kāi)發(fā)非常難受。網(wǎng)上存在各種吐槽，也有分享實(shí)現(xiàn)自定義組件的方法，但是要么過(guò)于復(fù)雜，要么是微信小程序升級(jí)之后就不兼容，反正是各種坑你沒(méi)商量。在這分享下本人在項(xiàng)目中是如何實(shí)現(xiàn)的，歡迎指正批評(píng)，互相學(xué)習(xí)。
toast自定義組件實(shí)現(xiàn)
這里用最簡(jiǎn)單的toast組件為例子
官方框架只提供了 頁(yè)面模板功能 ： WXML提供模板（template），可以在模板中定義代碼片段，然后在不同的地方調(diào)用。
但是這個(gè)功能不 支持js，樣式封裝，需要在對(duì)應(yīng)的頁(yè)面做處理，且模板還有自己的作用域，需要使用data傳入。
把功能封裝成獨(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
<template name='toast'>
<view class="s-toast" wx:if="{{msg}}">
<view class="s-toast-content">{{msg}}</view>
</view>
</template>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;
}使用方法
1、wxml引用頁(yè)面模板
2、js 文件引用 toast.js
import { toast } from '../../../project/component/toast/toast.js'3、調(diào)用
toast(this, '填寫(xiě)詳細(xì)信息')
改進(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ì)信息'')
變成
toast('填寫(xiě)詳細(xì)信息'')
同樣的思路，我們可以實(shí)現(xiàn)類(lèi)似vue中混合（mixin）的功能，在業(yè)務(wù)復(fù)雜的項(xiàng)目中，大大提高代碼的可復(fù)用 性和可維護(hù)性。
公司小程序只有我一個(gè)人開(kāi)發(fā)，不存在多人協(xié)作開(kāi)發(fā)小程序的情況，在這方面下的功夫不多。
以上是微信小程序中自定義組件的詳細(xì)介紹的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門(mén)文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
如何在Netflix中快速設(shè)置自定義頭像
Feb 19, 2024 pm 06:33 PM
Netflix上的頭像是你流媒體身份的可視化代表。用戶(hù)可以超越默認(rèn)的頭像來(lái)展示自己的個(gè)性。繼續(xù)閱讀這篇文章，了解如何在Netflix應(yīng)用程序中設(shè)置自定義個(gè)人資料圖片。如何在Netflix中快速設(shè)置自定義頭像在Netflix中，沒(méi)有內(nèi)置功能來(lái)設(shè)置個(gè)人資料圖片。不過(guò)，您可以通過(guò)在瀏覽器上安裝Netflix擴(kuò)展來(lái)實(shí)現(xiàn)此目的。首先，在瀏覽器上安裝Netflix擴(kuò)展的自定義個(gè)人資料圖片。你可以在Chrome商店買(mǎi)到它。安裝擴(kuò)展后，在瀏覽器上打開(kāi)Netflix并登錄您的帳戶(hù)。導(dǎo)航至右上角的個(gè)人資料，然后單擊
wapi是什么東西詳細(xì)介紹
Jan 07, 2024 pm 09:14 PM
wapi這個(gè)名詞用戶(hù)們可能在使用網(wǎng)絡(luò)得時(shí)候見(jiàn)到過(guò)，但是對(duì)于一部分人來(lái)說(shuō)肯定都不知道wapi是什么，下面就帶來(lái)了詳細(xì)介紹，幫助不知道小伙伴去了解。wapi是什么東西：答：wapi是無(wú)線局域網(wǎng)鑒別和保密的基礎(chǔ)結(jié)構(gòu)。這就像紅外線和藍(lán)牙等功能一樣，一般都覆蓋在辦公樓等地方的附近?；径际菫橐粋€(gè)小部門(mén)所有的，所以這個(gè)功能涉及的范圍只有幾公里。wapi相關(guān)介紹：1、wapi是無(wú)線局域網(wǎng)里面的一種傳輸協(xié)議。2、這款技術(shù)是可以去避免窄頻帶通信的問(wèn)題，可以更好的去進(jìn)行傳播。3、僅僅只需要一個(gè)代碼就可以去傳送信號(hào)了
詳解win11能否運(yùn)行PUBG游戲
Jan 06, 2024 pm 07:17 PM
pubg又稱(chēng)絕地求生，是一款非常經(jīng)典的射擊大逃殺類(lèi)型游戲，從2016年火爆以來(lái)一直擁有非常多的玩家。在最近的win11系統(tǒng)推出后，就有不少玩家想要在win11上游玩它，下面就跟著小編來(lái)看看win11是否可以玩pubg吧。win11能玩pubg嗎：答：win11可以玩pubg。1、在win11推出之初，因?yàn)閣in11需要開(kāi)啟tpm的緣故，所以導(dǎo)致很多玩家被pubg封號(hào)處理了。2、不過(guò)后來(lái)根據(jù)玩家的反饋，藍(lán)洞方面已經(jīng)解決了這個(gè)問(wèn)題，目前已經(jīng)可以在win11中正常玩pubg了。3、如果大家遇到了pub
Eclipse中自定義快捷鍵設(shè)置的方法
Jan 28, 2024 am 10:01 AM
如何在Eclipse中自定義快捷鍵設(shè)置？作為一名開(kāi)發(fā)人員，在使用Eclipse進(jìn)行編碼時(shí)，熟練掌握快捷鍵是提高效率的關(guān)鍵之一。Eclipse作為一款強(qiáng)大的集成開(kāi)發(fā)環(huán)境，不僅提供了許多默認(rèn)的快捷鍵，還允許用戶(hù)根據(jù)自己的偏好進(jìn)行個(gè)性化的定制。本文將介紹如何在Eclipse中自定義快捷鍵設(shè)置，并給出具體的代碼示例。打開(kāi)Eclipse首先，打開(kāi)Eclipse，并進(jìn)入
edius自定義屏幕布局的操作流程
Mar 27, 2024 pm 06:50 PM
1、下圖是edius默認(rèn)的屏幕布局，默認(rèn)的EDIUS窗口布局是橫向版式，因此在單顯示器環(huán)境中，許多窗口是重疊在一起的，且預(yù)覽窗口為單窗口模式。2、您可以通過(guò)【視圖】菜單欄啟用【雙窗口模式】，使預(yù)覽窗口同時(shí)顯示播放窗口和錄制窗口。3、您可以通過(guò)【視圖菜單欄>窗口布局>常規(guī)】來(lái)恢復(fù)默認(rèn)屏幕布局。另外您還可以自定義適合您的布局方式，并保存為常用屏幕布局：將窗口拖動(dòng)成適合自己的布局，然后點(diǎn)擊【視圖>窗口布局>保存當(dāng)前布局>新建】，在彈出的【保存當(dāng)前布局】小窗口中輸入布局名稱(chēng)，單擊確定
i5處理器是否能裝win11詳細(xì)介紹
Dec 27, 2023 pm 05:03 PM
i5是英特爾旗下的一系列處理器，擁有到現(xiàn)在11代i5的各種不同版本，每一代都有著不同性能。因此對(duì)于i5處理器是否能夠安裝win11，還需要看是第幾代的處理器，下面就跟著小編一起來(lái)分別了解一下吧。i5處理器能裝win11嗎：答：i5處理器能裝win11。一、第八代及之后的i51、第八代及后續(xù)的i5處理器是能夠滿(mǎn)足微軟的最低配置需求的。2、因此我們只需要進(jìn)入微軟網(wǎng)站，下載一個(gè)“win11安裝助手”3、下載完成后，運(yùn)行該安裝助手，根據(jù)提示進(jìn)行操作就可以安裝win11了。二、第八代之前的i51、第八代之
excel怎么自定義x軸和y軸？(excel坐標(biāo)軸刻度如何自定義)
Mar 14, 2024 pm 02:10 PM
在excel表格中，有時(shí)候可能需要插入坐標(biāo)軸，能夠更加直觀地看到數(shù)據(jù)的變化趨勢(shì)。還有些小伙伴不清楚怎么在表中插入坐標(biāo)軸，接下來(lái)小編就跟大家分享一下excel自定義坐標(biāo)軸刻度的方法吧?！ ∽鴺?biāo)軸插入方法： 1、在excel界面中，選中數(shù)據(jù)?！ ?、在插入界面中，點(diǎn)擊插入柱形圖或條形圖。 3、在展開(kāi)的界面中，選擇形圖類(lèi)型?！ ?、在表格右擊界面中，點(diǎn)擊選擇數(shù)據(jù)?！ ?、在展開(kāi)的界面中，進(jìn)行自定義即可。
介紹最新的Win 11聲音調(diào)法方法
Jan 08, 2024 pm 06:41 PM
很多用戶(hù)更新了最新的win11之后發(fā)現(xiàn)自己系統(tǒng)的聲音有了些許的變化，但是又不知道該怎么去進(jìn)行調(diào)整，所以今天本站就給你們帶來(lái)了電腦最新win11聲音調(diào)法介紹，操作不難而且選擇多樣，快來(lái)一起下載試試吧。電腦最新系統(tǒng)windows11聲音如何調(diào)1、首先右擊桌面右下角的聲音圖標(biāo)，并選擇“播放設(shè)置”。2、然后進(jìn)入設(shè)置中點(diǎn)擊播放欄中的“揚(yáng)聲器”。3、隨后點(diǎn)擊右下方的“屬性”。4、點(diǎn)擊屬性中的“增強(qiáng)”選項(xiàng)欄。5、此時(shí)如果“禁用所有聲音效果”前的√勾上了就把他取消。6、之后就可以選擇下面的聲音效果來(lái)進(jìn)行設(shè)置并點(diǎn)
