Technical blog: Front-end Vue custom WeChat menu bar button component development practice
With the continuous development of technology, the complexity of development is also increasing. The traditional development method makes a system an entire application, but it often happens that a small change or an addition of a small function may cause the modification of the overall logic, causing the whole body to be affected. In order to solve this problem, we can adopt the idea of componentization for development, so as to achieve the effect of separate development and maintenance, and they can be combined at will, which greatly improves the development efficiency and reduces the maintenance cost.
In this technical blog, I will introduce a button component based on Vue front-end development that imitates WeChat's menu bar component. This component provides a simple way to create and manage menu bar buttons, enabling developers to more quickly build application interfaces that meet their needs. Attached source code download address: https://ext.dcloud.net.cn/plugin?id=13610
The renderings are as follows:
First, let's take a look at the renderings. By using this component, you can easily create a button layout similar to the WeChat menu bar, including common button functions such as "My Balance", "Online Customer Service", "Invitation Courtesy" and "About Us". Each button can set the corresponding image address, title and click event callback function.
Next, I'll provide the implementation code for this component. The first is cc-wxBtnhow to use it. You can see how to use this component through the following code example:
<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>
The above is the usage code of this component. You can further expand and improve the function of this component according to your own needs. Hope this technical blog is helpful to you!