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


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生成的html出现样式问题的解决方法
Apr 16 Javascript
jquery checkbox实现单选小例
Nov 27 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
javascript的document.referrer浏览器支持、失效情况总结
Jul 18 Javascript
js实现div层缓慢收缩与展开的方法
May 11 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
Javascript创建类和对象详解
May 31 Javascript
详解vue.js之props传递参数
Dec 12 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
Jul 24 Javascript
js DOM的事件常见操作实例详解
Dec 16 Javascript
JS数组属性去重并校验重复数据
Jan 10 Javascript
Js类的构建与继承案例详解
Sep 15 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实现TCP端口检测的方法
2015/04/01 PHP
php基本函数汇总
2015/07/09 PHP
PHP+MySQL之Insert Into数据插入用法分析
2015/09/27 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
YII框架http缓存操作示例
2019/04/29 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
百度 popup.js 完美修正版非常的不错 脚本之家推荐
2009/04/17 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
jQuery中filter()方法用法实例
2015/01/06 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
js 两数组去除重复数值的实例
2017/12/06 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
angularjs获取到My97DatePicker选中的值方法
2018/10/02 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
js HTML DOM EventListener功能与用法实例分析
2020/04/27 Javascript
typescript配置alias的详细步骤
2020/08/12 Javascript
Python argv用法详解
2016/01/08 Python
Python3自动生成MySQL数据字典的markdown文本的实现
2020/05/07 Python
用canvas画心电图的示例代码
2018/09/10 HTML / CSS
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
商务英语本科生的自我评价分享
2013/11/15 职场文书
目标管理责任书
2014/04/15 职场文书
有关爱国演讲稿
2014/05/07 职场文书
供电工程专业求职信
2014/08/09 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
一行Python命令实现批量加水印
2022/04/07 Python
Nginx的gzip相关介绍
2022/05/11 Servers