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


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 相关文章推荐
jquery 事件对象属性小结
Apr 27 Javascript
关于Javascript模块化和命名空间管理的问题说明
Dec 06 Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
vuex实现简易计数器
Oct 27 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
angular2中Http请求原理与用法详解
Jan 11 Javascript
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
vue项目中使用Svg的方法
Oct 24 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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 addslashes和mysql_real_escape_string
2010/01/24 PHP
探讨如何把session存入数据库
2013/06/07 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
显示、隐藏密码
2006/07/01 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
jquery Moblie入门—hello world的示例代码学习
2013/01/08 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
javascript常用方法汇总
2014/12/02 Javascript
Javascript实现获取及设置光标位置的方法
2015/07/21 Javascript
jQuery操作基本控件方法实例分析
2015/12/31 Javascript
JavaScript字符串对象
2017/01/14 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
js实现带三角符的手风琴效果
2017/03/01 Javascript
详解vue-element Tree树形控件填坑路
2019/03/26 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
python中getaddrinfo()基本用法实例分析
2015/06/28 Python
使用Python设计一个代码统计工具
2018/04/04 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
python获取引用对象的个数方式
2019/12/20 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
毕业生个人求职信范文分享
2014/01/05 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
领导欢迎词范文
2015/01/26 职场文书
中学生自我评价2015
2015/03/03 职场文书
通知函格式范文
2015/04/27 职场文书
领导视察通讯稿
2015/07/18 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书