uniapp 小程序开发修改按钮样式

Uniapp 是一个跨平台的开发框架，可以让我们一次编写，同时发布到多个平台，包括 H5、小程序、APP 等等。而小程序是其中比较重要的一部分，在小程序开发中，页面的按钮样式设计是非常重要的一环，可以为用户带来更好的使用体验。本文将详细介绍如何在 Uniapp 小程序开发中修改按钮样式。

在 Uniapp 的小程序开发中，通常使用的是微信小程序原生按钮控件。针对不同需求，我们可以通过以下几种方式修改按钮样式：

### 1. css 样式修改

Uniapp 使用类似于 web 开发的 css 样式来设置按钮的样式，具体的 bodyclass、app.wxss、page.wxss 以及组件 wxss 等文件中。

首先在 css 样式文件中定义需要用到的类名，然后在按钮的 wxml 文件中将该类名添加到按钮上即可。具体做法如下：

```html

.btn {

width: 100px;

height: 40px;

border: none;

border-radius: 20px;

background-color: #409eff;

color: #fff;

font-size: 16px;

text-align: center;

line-height: 40px;

}

```

上面的代码示例中，我们在 style.css 文件中定义了一个名为 btn 的类名，指定了按钮的样式，例如宽高、边框、背景色、字体颜色、字体大小等等属性。然后在组件中使用该类名即可。

需要注意的是，如果该组件内部有其他样式文件（如 scoped.wxss），则需要在其他样式文件中也定义该样式类。否则可能会出现样式被覆盖的问题。此外，还需要注意样式的优先级，需要根据实际情况调整样式的优先级。

### 2. 图片替换

如果我们需要自定义按钮的外观，例如使用图片作为按钮的背景，可以使用图片替换的方式。具体做法如下：

1. 首先，需要准备好需要使用的图片，例如我们需要将“确认”按钮修改为一个图片：


2. 将图片添加到小程序的某个目录下，并在组件的 wxml 文件中使用 image 标签将该图片插入：

```html

```

上面的代码中，我们在按钮内部使用了一个 image 标签，将图片插入到按钮内。

3. 隐藏原生按钮

为了实现完全自定义的按钮样式，需要将原生按钮进行隐藏，可以使用以下两种方式：

- 样式隐藏

使用 css 样式将原生按钮进行隐藏。具体做法如下：

```css

button {

display: none;

}

```

上面的代码中，我们将 button 标签进行了隐藏，这样就看不到原生按钮了。

- 属性隐藏

在按钮的 wxml 文件中使用 hidden 属性将原生按钮进行隐藏，具体做法如下：

```html

```

上面的代码中，我们在 button 标签中添加了 hidden="{{true}}" 属性，将原生按钮进行了隐藏。

通过这两种方式，我们都可以将原生按钮进行隐藏。

### 3. 自定义组件

如果需要多次使用同样的自定义按钮，可以将按钮封装成一个自定义组件。具体做法如下：

1. 创建组件

在小程序的某个目录下创建一个新文件夹，例如 my-button，然后在该目录下创建如下两个文件：

my-button.vue

```html

```

buttons.js

```javascript

import MyButton from './my-button.vue'

export default {

components: {

MyButton

}

}

```

上面的代码中，我们定义了一个名为 my-button 的组件，并在其中使用了之前讲过的图片替换的方式，将按钮的外观进行了自定义。同时，我们还定义了一个名为 buttons 的 js 文件，用来注册组件。

2. 使用组件

在需要使用自定义按钮的页面或组件中，引入 buttons.js 并使用 my-button 标签即可。具体做法如下：

```html

```

上面的代码中，我们引入了之前定义的 buttons.js 文件，并在其中使用 my-button 标签。在页面中就可以使用自定义的按钮了。

综上所述，以上就是 Uniapp 小程序开发中修改按钮样式的三种方式：使用 css 样式、图片替换、自定义组件。通过掌握这些技巧，可以让我们在开发中更好地应对不同的需求，实现更自由、灵活的页面设计。