如何优化小程序wx.navigateBack，使其返回操作更便捷高效？

本文共计1051个文字，预计阅读时间需要5分钟。

相信只需开发小程序，wx.navigateBack这个API就不会出问题。在慰问单车的小程序中，它也被改造得更加方便，能满足复杂的业务需求，可谓加强版的wx.navigateBack。先来看看官方文档中的加强版wx.navigateBack介绍。

相信只要开发过小程序，对wx.navigateBack 这个 api都不会陌生。在摩拜单车的小程序中，它也被改造的更方便满足复杂的业务需求，可谓之 增强型的 wx.navigateBack。

先来看看官方文档中的用法：

wx.navigateBack({ delta: 2 })

delta 表示返回的层级数。通过具体的业务示例来说明我们如何改造它：

余额充值的例子

两个页面：

• A 页面展示用户余额，使用 H5 实现，通过 web-view 嵌套在小程序里
• B 页面为用户充值，为了方便使用支付api，用小程序原生页面实现

用户在 B 页面充值完成后返回页面 A，更新用户余额。翻译成技术语言就是：从小程序原生页面返回到 H5 页面，需要刷新。

简单的业务代码如下：

<!-- pages/balance/index.wxml --> <web-view src="{{url}}"></web-view>

Page({ data: { url: 'balance/url' }, onShow() { // ... }, onHide() { // ... } })

只要再次进入 A 页面更新 URL，就能达到刷新的目的。