Blog técnico: prática de desenvolvimento de componente de botão de barra de menu WeChat personalizado de front-end Vue
Com o desenvolvimento contínuo da tecnologia, a complexidade do desenvolvimento também está aumentando. O método tradicional de desenvolvimento faz de um sistema uma aplicação inteira, mas muitas vezes acontece que uma pequena alteração ou adição de uma pequena função pode causar a modificação da lógica geral, fazendo com que todo o corpo seja afetado. Para resolver esse problema, podemos adotar a ideia de componentização para desenvolvimento, de modo a obter o efeito de desenvolvimento e manutenção separados, e eles podem ser combinados à vontade, o que melhora muito a eficiência do desenvolvimento e reduz o custo de manutenção .
Neste blog técnico, apresentarei um componente de botão baseado no desenvolvimento front-end do Vue que imita o componente da barra de menus do WeChat. Este componente fornece uma maneira simples de criar e gerenciar botões da barra de menus, permitindo que os desenvolvedores criem mais rapidamente interfaces de aplicativos que atendam às suas necessidades. Endereço de download do código-fonte em anexo: https://ext.dcloud.net.cn/plugin?id=13610
As renderizações são as seguintes:
Primeiro, vamos dar uma olhada nas renderizações. Ao usar este componente, você pode criar facilmente um layout de botão semelhante à barra de menus do WeChat, incluindo funções de botão comuns como "Meu saldo", "Atendimento ao cliente online", "Convite de cortesia" e "Sobre nós". Cada botão pode definir o endereço da imagem correspondente, o título e a função de retorno de chamada do evento de clique.
Em seguida, fornecerei o código de implementação desse componente. A primeira é cc-wxBtncomo usá-lo. Você pode ver como usar este componente através do seguinte exemplo de código:
<template>
<view class="content">
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="../../static/image/member-menu4.png" title="我的余额" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="../../static/image/member-menu2.png" title="在线客服" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="../../static/image/member-menu3.png" title="邀请有礼" @menuClick="menuClick" ></cc-wxBtn>
<!-- mySrc:图片地址 title：标题 @menuClick：按钮点击 -->
<cc-wxBtn mySrc="../../static/image/member-menu5.png" title="关于我们" @menuClick="menuClick" ></cc-wxBtn>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
menuClick(name) {
uni.showModal({
title:'点击菜单',
content:'点击菜单名称 = ' + name
})
},
}
}
</script>
<style>
page {
background-color: white;
margin-bottom: 50px;
}
</style>
O acima é o código de uso deste componente. Você pode expandir e melhorar ainda mais a função deste componente de acordo com suas próprias necessidades. Espero que este blog técnico seja útil para você!