微信小程序开发工具加返回按钮

微信小程序是一种轻量级的应用程序，可以在微信平台上快速开发和发布。在小程序开发中，有时候我们需要返回到上一个页面，但是微信开发工具默认是没有返回按钮的。因此，我们需要手动添加返回按钮。

添加返回按钮的方法有两种，一种是使用微信开发者工具自带的 `navigateBack()` 方法，另一种是通过自定义组件实现。

方法一：使用 `navigateBack()` 方法

`navigateBack()` 方法是微信小程序官方提供的返回上一级页面的方法。可以在页面js文件中使用该方法实现返回操作。如下所示：

```

// 点击返回按钮时触发的函数

back() {

wx.navigateBack({

delta: 1

})

}

```

其中，`navigateBack()` 方法需要传入一个 `delta` 参数，表示返回的层数。例如，如果当前页面是第四级，则传入 1 表示返回上一级（第三级）页面。

接下来，在小程序页面的 `wxml` 文件中添加返回按钮。如下所示：

```

```

其中，`back-btn` 是返回按钮的样式类名，`back` 是上面定义的返回函数，`/images/back.png` 是本地图片资源。需要在项目中创建 `images` 文件夹，将图片资源存放在其中。

然后，在页面的 `wxss` 文件中定义 `back-btn` 样式，如下所示：

```

.back-btn {

position: absolute;

top: 40rpx;

left: 20rpx;

width: 30rpx;

height: 30rpx;

}

```

其中，`position` 属性用于设置元素的定位方式，`top` 和 `left` 属性用于设置元素的位置，`width` 和 `height` 属性用于设置元素的大小。

完成以上操作后，就可以在小程序中看到返回按钮了。

方法二：通过自定义组件实现

如果需要在多个小程序页面中使用相同的返回按钮，可以通过自定义组件的方式实现。具体步骤如下：

1. 新建自定义组件

在小程序项目中，右键新建文件夹，命名为 `components`，在文件夹中新建 `back-btn` 目录，并在该目录中新建 `back-btn.js`、`back-btn.wxml` 和 `back-btn.wxss` 文件。

2. 编写组件代码

在 `back-btn.js` 文件中，可以使用 `navigateBack()` 方法实现返回操作。代码如下所示：

```

// 返回按钮组件

Component({

/**

* 组件的属性列表

*/

properties: {},

/**

* 组件的初始数据

*/

data: {},

/**

* 组件的方法列表

*/

methods: {

// 点击返回按钮时触发的函数

back() {

wx.navigateBack({

delta: 1

})

}

}

})

```

在 `back-btn.wxml` 文件中，可以添加返回按钮的样式和图片资源。代码如下所示：

```

```

在 `back-btn.wxss` 文件中，可以定义返回按钮样式。代码如下所示：

```

.back-btn {

position: absolute;

top: 40rpx;

left: 20rpx;

width: 30rpx;

height: 30rpx;

}

```

3. 使用自定义组件

在需要使用返回按钮的页面中，引用自定义组件。代码如下所示：

```

```

这样就可以在页面中使用返回按钮组件了。

总结：

通过以上两种方法，我们可以在小程序中添加返回按钮。对于第一种方法，适用于只需在单个页面中进行返回操作的情况；对于第二种方法，适用于在多个页面中使用相同的返回按钮的情况。选择哪种方法，可以根据实际需求进行选择。