您好,登錄后才能下訂單哦!
前言
最近接觸微信小程序,再次之前公司用的前端框架是vue ,然后對比發(fā)現(xiàn),開發(fā)小程序是各種限制,對于開發(fā)者非常不友好。各種槽點太多,完全吐槽不過來,所以在此不多說,打算下次專門寫一篇文章吐槽一下。本次主要分享下小程序自定義組件的一點思路,小程序官方提供的框架比較簡陋,原始,可復用較差,沒有實現(xiàn)自定義組件的功能,這讓很多使用vue ,react前端開發(fā)非常難受。網(wǎng)上存在各種吐槽,也有分享實現(xiàn)自定義組件的方法,但是要么過于復雜,要么是微信小程序升級之后就不兼容,反正是各種坑你沒商量。在這分享下本人在項目中是如何實現(xiàn)的,歡迎指正批評,互相學習。
toast自定義組件實現(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 非必傳 顯示時間秒 */ 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、調(diào)用
toast(this, '填寫詳細信息')
改進及更多擴展
實際項目中會有toast confirm loading ···等多個通用組件 ,還有大量的業(yè)務(wù)組件,我們可以把js都引入到一個js文件中,然后在頁面加載的時候(onLoad方法)中注冊this(page),這樣只需要注冊一次便可以使用所有的組件,如
toast(this,'填寫詳細信息'')
變成
toast('填寫詳細信息'')
同樣的思路,我們可以實現(xiàn)類似vue中混合(mixin)的功能,在業(yè)務(wù)復雜的項目中,大大提高代碼的可復用 性和可維護性。
公司小程序只有我一個人開發(fā),不存在多人協(xié)作開發(fā)小程序的情況,在這方面下的功夫不多。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持億速云。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。