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

来源:脚本之家  责任编辑:小易  

www.zgxue.com防采集请勿采集本网。

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

你对数据进行判断不就行啦,你后端函数返回对应数据,然后在wx.if里面进行判断

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

你看看这个东西,可能图片不清晰。。 小程序开发文档里有。 web-view

wx.navigateBack({ delta: 2})

微信小程序onShareAppMessage分享怎么能设置标题和路径为当前页面wx.request获取到的值呢 30  我来答 分享 微信扫一扫 网络繁忙请稍后重试 新浪微博 QQ空间

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

域名授权,进小程序后台 添加request 域名

余额充值的例子

今年1月,张小龙在首次公开演讲上抛出重磅消息,微信将在订阅号和服务号的基础上推出“应用号”。他说公众平台目前来看更像一个媒体化的平台,仅仅对写字传播内容的人很有效。但公众平台的出发点不是针对媒体的,在2016年微信将做一些面向开发团队

两个页面: 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 再刷新重新请求接口。‘

wx:if和wx:else是取反关系,只会有一个显示出来,不知道你百这个先出来是怎么做到的。就是说如果wx:if里的值为真,就度显示内它里面的内容,如果不为真,就显示wx:else里的内容。如果代码的展示效果与容你想的不一样,那就看看if判断是否正确。追问就是wx:if="{{movieList}}" 这个movieList数组原来是空数组,页面加载的时候发送请求得到数据并赋值给movieList数组,然后才有数据加载到页面上。但是在加载过程中,wx:else之内的数据会先显示到页面上,这个问题有办法解决吗?追答在外面再套一层,wx:if="{{loadList}}",设定为false,显示等待画面,获取数据成功,赋值为true,显示你的movieList,如果movieList没有内容,那就显示wx:else的内容。意思就是在外面套了一层if判断,判断数据请求是否完成。还有一种简单粗暴,数据获取完成,再加载显示页面。建议onLoad的时候就请求数据内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序wx.navigateto中events属性实现页面间通信传值,数据同步
  • 微信小程序出现wx.navigateto页面不跳转问题的解决方法
  • 微信小程序使用navigateto数据传递的实例
  • js使用对象的defineproperty进行变量监控操作示例
  • 原生js实现贪吃蛇小游戏
  • javascript必知必会(四)js类型转换
  • js ie和ff兼容性问题汇总
  • 原生js开发的日历插件
  • js回溯法计算最佳旅行线路代码实例
  • bootstrap的alert提示框的关闭后再显示怎么解决
  • js日历功能对象
  • 微信小程序开发技巧汇总
  • javascript数组的排序 sort()方法和reverse()方法
  • 微信小程序wx:else的页面比wx:if的页面先出来 这个...
  • 目前来说微信小程序 wx:for 能否控制从哪里开始输...
  • 在微信小程序中,一个方法可不可以写两个wx.request
  • 微信小程序wx.uploadfilejava后台怎么接收
  • 微信小程序wxif可以请求后端js函数吗
  • 个人wx小程序可以加入外链吗?
  • 微信小程序onShareAppMessage分享怎么能设置标题和...
  • 微信小程序体验版 wx:for循环内容不显示
  • 微信小程序 wx.request 数据经过腾讯吗
  • 小程序wx.request能自己封装吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序wx.navigateto中events属性实现页面间通信传值,数据同步微信小程序出现wx.navigateto页面不跳转问题的解决方法微信小程序使用navigateto数据传递的实例js使用对象的defineproperty进行变量监控操作示例原生js实现贪吃蛇小游戏javascript必知必会(四)js类型转换js ie和ff兼容性问题汇总原生js开发的日历插件js回溯法计算最佳旅行线路代码实例bootstrap的alert提示框的关闭后再显示怎么解决js日历功能对象微信小程序开发技巧汇总javascript数组的排序 sort()方法和reverse()方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包利用html5+socket.io实现摇一摇控制pc端歌js中捕获console.log()输出的方法原生js操作网页给p元素添加onclick事件及该如何加载google-analytics(或其他第三方修复ie9&safari 的sort方法javascript实现的浏览器下载文件的方法js判断是否按下了shift键的方法js简单的轮播的图片滚动实例开启javascript中apply、call、bind的用法给easyui的datebox控件添加清空按钮的实现
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved