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


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 相关文章推荐
JavaScript子窗口ModalDialog中操作父窗口对像
Dec 11 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
Javascript加载速度慢的解决方案
Mar 11 Javascript
JavaScript DOM进阶方法
Apr 13 Javascript
jQuery垂直多级导航菜单代码分享
Aug 18 Javascript
jQuery手机拨号界面特效代码分享
Aug 27 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
vue实现登录后页面跳转到之前页面
Jan 07 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
Feb 24 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
php中http_build_query 的一个问题
2012/03/25 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
JavaScript的类型简单说明
2010/09/03 Javascript
jQuery.validate 常用方法及需要注意的问题
2013/03/20 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
jquery实现华丽的可折角广告代码
2015/09/02 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
Bootstrop实现多级下拉菜单功能
2016/11/24 Javascript
Windows下快速搭建NodeJS本地服务器的步骤
2017/08/09 NodeJs
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
为nuxt项目写一个面包屑cli工具实现自动生成页面与面包屑配置
2019/09/29 Javascript
[02:23]DOTA2英雄基础教程 幻影长矛手
2013/12/09 DOTA
[01:06] DOTA2英雄背景故事第三期之秩序法则光之守卫
2020/07/07 DOTA
Python中正则表达式的详细教程
2015/04/30 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
利用Python读取文件的四种不同方法比对
2017/05/18 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python设计模式之组合模式原理与用法实例分析
2019/01/11 Python
解决python tkinter界面卡死的问题
2019/07/17 Python
Python sep参数使用方法详解
2020/02/12 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
Python实现自动装机功能案例分析
2020/10/22 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
暑期实践思想汇报
2014/01/06 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
开学典礼策划方案
2014/05/28 职场文书
小学教师读书活动总结
2014/07/08 职场文书
大学生感恩父母演讲稿
2014/08/28 职场文书
Oracle11g r2 卸载干净重装的详细教程(亲测有效已重装过)
2021/06/04 Oracle
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
mysql查询结果实现多列拼接查询
2022/04/03 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js