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


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 相关文章推荐
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
setTimeout和setInterval的区别你真的了解吗?
Mar 31 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
Jan 09 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
javascript实现手机震动API代码
Aug 05 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
node thread.sleep实现示例
Jun 20 Javascript
js回调函数原理与用法案例分析
Mar 04 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 Javascript
Vue表单提交点击事件只允许点击一次的实例
Oct 23 Javascript
在react项目中使用antd的form组件,动态设置input框的值
Oct 24 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 socket(fsockopen)的应用实例分析
2013/06/02 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
laravel框架实现后台登录、退出功能示例
2019/10/31 PHP
解决PHP Opcache 缓存刷新、代码重载出现无法更新代码的问题
2020/08/24 PHP
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
使用百度地图api实现根据地址查询经纬度
2014/12/11 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
纯JS打造网页中checkbox和radio的美化效果
2016/10/13 Javascript
微信小程序实战之自定义模态弹窗(8)
2017/04/18 Javascript
node实现的爬虫功能示例
2018/05/04 Javascript
了解ESlint和其相关操作小结
2018/05/21 Javascript
Vue的click事件防抖和节流处理详解
2019/11/13 Javascript
js实现内置计时器
2019/12/16 Javascript
js实现双色球效果
2020/08/02 Javascript
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Django跨域请求问题的解决方法示例
2018/06/16 Python
解决pandas .to_excel不覆盖已有sheet的问题
2018/12/10 Python
解决Python设置函数调用超时,进程卡住的问题
2019/08/08 Python
在python中利用pycharm自定义代码块教程(三步搞定)
2020/04/15 Python
Python实现自动打开电脑应用的示例代码
2020/04/17 Python
python字典key不能是可以是啥类型
2020/08/04 Python
数控专业应届生求职信
2013/11/27 职场文书
巾帼文明岗申报材料
2014/05/01 职场文书
支部鉴定材料
2014/06/02 职场文书
银行业务授权委托书
2014/10/10 职场文书
基层党员学习党的群众路线教育实践活动心得体会
2014/11/04 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
推广普通话的宣传语
2015/07/13 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书
python数字图像处理实现图像的形变与缩放
2022/06/28 Python