小程序怎样让wx.navigateBack更好用的方法实现


Posted in Javascript onNovember 01, 2019

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

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

wx.navigateBack({
 delta: 2
})

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

余额充值的例子

小程序怎样让wx.navigateBack更好用的方法实现

两个页面:

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

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

简单的业务代码如下:

<!-- pages/balance/index.wxml -->
<web-view src="{{url}}"></web-view>
Page({
 data: {
 url: 'https://balance/url'
 },
 onShow() {
 // ...
 },
 onHide() {
 // ...
 }
})

只要再次进入 A 页面更新 URL,就能达到刷新的目的。可以每次动态加参数,也可以离开 A 时清空 URL,再次进入的时候还原回来:

const URL = 'https://balance/url'
Page({
 data: {
 url: URL
 },
 onShow() {
 this.setData({
 url: URL
 })
 },
 onHide() {
 setTimeout(() => {
 this.setData({
 url: ''
 })
 }, 800)
 }
})

为了不让屏幕突然变白,加了 setTimeout 延迟下。

选择性的返回刷新

上面虽然实现了需求,但是有个体验问题:不管用户充值与否,回到 A 页面都会刷新下。理论上,只有用户充值成功后才需要刷新 A 页面。

简单看下 B 页面的代码:

Page({
 data: {},
 onTopup() {
 wx.requestPayment({
 // ...
 success(res) {
 wx.navigateBack()
 }
 })
 }
})

可否在返回 A 的时候告诉 A 是否充值成功?这样 A 就能选择性的刷新。

const URL = 'https://balance/url'
Page({
 data: {
 url: URL,
 isPaySuccess: false
 },
 onShow() {
 if (this.data.isPaySuccess) {
 this.setData({
 url: URL + '?refresh=1'
 })
 }
 }
})

A 页面有个 isPaySuccess 标记位控制是否刷新,那么如何在 B 页面支付成功后去修改这个标记位?直接看 B 页面的代码:

Page({
 data: {},
 onTopup() {
 wx.requestPayment({
 // ...
 success(res) {
 let pages = getCurrentPages()
 let pageA = pages[pages.length - 2]
 pageA.setData({
  isPaySuccess: true
 })
 wx.navigateBack()
 }
 })
 }
})

封装成 this.$back

可以封装成通用的 back 方法,返回页面的同时更改其数据:

function back(config) {
 let prevPageData = config.prevPageData
 let delta = config.delta || 1
 if (prevPageData) {
 let pages = getCurrentPages()
 let prevPage = pages[pages.length - (delta + 1)]
 prevPage.setData(config.prevPageData)
 }
 wx.navigateBack(config)
}

通过这样封装,上面的页面 B 的代码可以改成这样:

let back = require('../utils/back')
Page({
 data: {},
 onTopup() {
 wx.requestPayment({
 // ...
 success(res) {
 back({
  prevPageData: {
  isPaySuccess: true
  }
 })
 }
 })
 }
})

如果看过globalData 的那些事儿,把 back 方法挂载到 this.$back 下,将会更方便使用:

Page({
 data: {},
 onTopup() {
 wx.requestPayment({
 // ...
 success(res) {
 this.$back({
  prevPageData: {
  isPaySuccess: true
  }
 })
 }
 })
 }
})

总结

简单的 api 也可以变得丰富,一切都是基于日益复杂的业务需求。通过增强 wx.navigateBack 不仅仅可以改变前一个页面的标记位,还可以改变其页面显示数据。比如页面 A 的余额值是小程序通过参数传给 H5 的,而页面 B 充值成功后接口返回用户新的余额。这样就可以在充值成功后直接改变页面 A 的余额数据,而不是先返回到页面 A 再刷新重新请求接口。‘

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与函数式编程解释
Apr 27 Javascript
js 数组的for循环到底应该怎么写?
May 31 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
May 29 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
js运动应用实例解析
Dec 28 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
Aug 05 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
javascript canvas API内容整理
Feb 16 Javascript
vue实现配置全局访问路径头(axios)
Nov 01 #Javascript
vue.js路由mode配置之去掉url上默认的#方法
Nov 01 #Javascript
js实现漂亮的星空背景
Nov 01 #Javascript
Vue实现push数组并删除的例子
Nov 01 #Javascript
vue实现跳转接口push 转场动画示例
Nov 01 #Javascript
JS实现动态星空背景效果
Nov 01 #Javascript
jQuery高级编程之js对象、json与ajax用法实例分析
Nov 01 #jQuery
You might like
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
跟我学Laravel之视图 &amp; Response
2014/10/15 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
Gird事件机制初级读本
2007/03/10 Javascript
JavaScript高级程序设计 阅读笔记(十四) js继承机制的实现
2012/08/14 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
extjs 时间范围选择自动判断的实现代码
2014/06/24 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
jQuery的css()方法用法实例
2014/12/24 Javascript
Node.js下自定义错误类型详解
2016/10/17 Javascript
vue组件实例解析
2017/01/10 Javascript
JavaScript实现的商品抢购倒计时功能示例
2017/04/17 Javascript
基于原生js运动方式关键点的总结(推荐)
2017/10/01 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue el-table实现行内编辑功能
2019/12/11 Javascript
bootstrap-table后端分页功能完整实例
2020/06/01 Javascript
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
解决python父线程关闭后子线程不关闭问题
2020/04/25 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
canvas之自定义头像功能实现代码示例
2017/09/29 HTML / CSS
Crocs卡骆驰洞洞鞋日本官方网站:Crocs日本
2016/08/25 全球购物
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
英国日常交易网站:Wowcher
2018/09/04 全球购物
美国家居装饰和豪华家具购物网站:One Kings Lane
2018/12/24 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
安全教育感言
2014/03/04 职场文书
综治宣传月活动总结
2014/04/28 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
Pytorch 如何实现常用正则化
2021/05/27 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript