百度小程序之间的页面通信过程详解


Posted in Javascript onJuly 18, 2019

背景

主要是针对小程序开发中页面之间进行通信的问题,在涉及支付的场景中,用户从页面支付入口进行跳转进行支付之后,回到原来页面,在原来的页面需要进行相应的状态刷新,比如用户身份状态、支付状态、文档或商品情况。

遇到的问题

在使用百度小程序的 swan.navigateBack 进行回跳页面时,API中的方法参数不支持携带参数,只支持number参数。

所以就涉及了几个单独页面之间的通信问题。如下主要列出了几个方法,供参考。

swan.navigateBack

参数名 类型 必填 默认值 说明
delta Number 1 返回的页面数,如果 delta 大于现有页面数,则返回到首页1。
success function - 接口调用成功的回调函数
fail function - 接口调用失败的回调函数
complete function - 接口调用结束的回调函数(调用成功、失败都会执行)

解决方法

主要有以下三种方法,实现各page之间通信。

解决方法一:利用app.js,设置公共变量

利用app.js的公共特性,将变量挂在APP上。

// app.js 启动文件
App({
 globalData: {
  isLogin: false,
  userInfo: null,
  networkError: false,
  networkType: 'none'
 }
})

在其他页面Page上使用时,使用:

// test.js
const app = getApp();
const commonParams = app.globalData.isLogin;

但是存在的缺点也十分明显,当数据量比较大、数据关系比较复杂时,维护会比较复杂,逻辑会很混乱。

解决方法二:利用storage

利用小程序的全局storage,对数据进行存取,原理类似于解决方案一。

// 存储-异步
swan.setStorage({
 key: 'key',
 data: 'value'
});
// 存储-同步
swan.setStorageSync('key', 'value');

// 获取-异步
swan.getStorage({
 key: 'key',
 success: function (res) {
  console.log(res.data);
 },
 fail: function (err) {
  console.log('错误码:' + err.errCode);
  console.log('错误信息:' + err.errMsg);
 }
});

// 获取-同步
const result = swan.getStorageSync('key');

解决方法三: 利用事件中心

利用事件中心的进行订阅和发布。

// event.js 事件中心

class Event {
 on(event, fn, ctx) {
  if (typeof fn !== 'function') {
   console.error('fn must be a function');
   return;
  }

  this._stores = this._stores || {};
  (this._stores[event] = this._stores[event] || []).push({
   cb: fn,
   ctx: ctx
  });
 }
 emit(event, ...args) {
  this._stores = this._stores || {};
  let store = this._stores[event];
  if (store) {
   store = store.slice(0);
   for (let i = 0, len = store.length; i < len; i++) {
    store[i].cb.apply(store[i].ctx, args);
   }
  }
 }
 off(event, fn) {
  this._stores = this._stores || {};
  // all
  if (!arguments.length) {
   this._stores = {};
   return;
  }
  // specific event
  let store = this._stores[event];
  if (!store) {
   return;
  }
  // remove all handlers
  if (arguments.length === 1) {
   delete this._stores[event];
   return;
  }
  // remove specific handler
  let cb;
  for (let i = 0, len = store.length; i < len; i++) {
   cb = store[i].cb;
   if (cb === fn) {
    store.splice(i, 1);
    break;
   }
  }
  return;
 }
}

module.exports = Event;

在app.js中进行声明和管理

// app.js
import Event from './utils/event';

App({
 event: new Event()
})

订阅的页面中,使用on方法进行订阅

// view.js 阅读页进行订阅

Page({
 // 页面在回退时,会调用onShow方法
 onShow() {
  // 支付成功的回调,调起下载弹层
  app.event.on('afterPaySuccess', this.afterPaySuccess, this);
 },
 afterPaySuccess(e) {
  // ....业务逻辑
 }
})

发布的页面中,根据业务情况进行发布emit

// paySuccess.js

const app = getApp();

app.event.emit('afterPaySuccess', {
 docId: this.data.tradeInfo.docId,
 triggerFrom: 'docCashierBack'
});

根据事件中心的发布和订阅,实现了页面之间的通信,就能实现比如页面在支付成功后回退时,页面状态的改变的场景,同时利于维护页面之间的数据关系,能通过在发布时传递参数,实现数据之间的通信。

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

Javascript 相关文章推荐
用JS操作FRAME中的IFRAME及其内容的实现代码
Jul 26 Javascript
Javascript基础教程之数据类型 (布尔型 Boolean)
Jan 18 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
JavaScript对象学习小结
Sep 02 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
Nov 04 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
Dec 08 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
JavaScript实现的商品抢购倒计时功能示例
Apr 17 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
vue如何自动化打包测试环境和正式环境的dist/test文件
Jun 06 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
Oct 21 Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 #Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 #Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 #Javascript
移动端吸顶fixbar的解决方案详解
Jul 17 #Javascript
You might like
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
在IE下:float属性会影响offsetTop的取值
2006/12/22 Javascript
jquery 学习之二 属性相关
2010/11/23 Javascript
IE事件对象(The Internet Explorer Event Object)
2012/06/27 Javascript
如何在父窗口中得知window.open()出的子窗口关闭事件
2013/10/15 Javascript
JavaScript改变CSS样式的方法汇总
2015/05/07 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
文本框只能输入数字的js代码(含小数点)
2016/07/10 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
js Canvas实现圆形时钟教程
2016/09/19 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
Vue 单文件中的数据传递示例
2017/03/21 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
python爬虫基本知识
2018/03/05 Python
使用PyCharm创建Django项目及基本配置详解
2018/10/24 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
详解Python中正则匹配TAB及空格的小技巧
2019/07/26 Python
Win10环境中如何实现python2和python3并存
2020/07/20 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
德国滑雪和户外用品网上商店:XSPO
2019/10/30 全球购物
工厂厂长岗位职责
2013/11/08 职场文书
测试工程师岗位职责
2013/11/28 职场文书
关于青春的演讲稿500字
2014/08/22 职场文书
计算机科学与技术专业求职信
2014/09/03 职场文书
贷款承诺书
2015/01/20 职场文书
爱心捐助活动总结
2015/05/09 职场文书
图书借阅制度范本
2015/08/06 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
校园文化艺术节开幕词
2016/03/04 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
MySQL 数据丢失排查案例
2021/05/08 MySQL
浅谈如何提高PHP代码质量之单元测试
2021/05/28 PHP