h5如何使用navigateBack回退到微信小程序页面并携带参数

前言

在h5中使用navigateBack回退到微信小程序页面很常见,但是有一种交互需要在回退之后的页面可以得到通知,拿到标识之后,进行某些操作,这样的话,由于微信官方并没有直接提供这样的api,就需要我们开动脑筋曲线救国一下:navigateBack + postMessage

前置资源引入jssdk

微信端

在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

备注:支持使用 AMD/CMD 标准模块加载方法加载。

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

支付宝端

支付宝小程序可以使用 webview 承载一个 H5 页面,但是不能在 webview 中直接调起支付,需要引入支付宝的  https://appx/web-view.min.js (此链接仅支持在支付宝客户端内访问)文件。

  <script>
    if (navigator.userAgent.indexOf('AlipayClient') > -1) {
      document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>')
    }
  </script>

核心代码

H5页面

// 方法封装
export function navigateBackJumpParams(paramObj) {
  if (typeof window.my !== 'undefined') {
    // 支付宝小程序
    window.my.postMessage({
      data: JSON.stringify(paramObj)
    })
    window.my.navigateBack({ delta: 1 })
  } else {
    // 小程序
    window.wx.miniProgram.postMessage({
      data: JSON.stringify(paramObj)
    })
    window.wx.miniProgram.navigateBack({ delta: 1 })
  }
}

// 场景触发
 const paramObj = {
     couponSelectFlag: false,
     pageFromKey: "confirmOrderCouponListKey"
 }
 navigateBackJumpParams(paramObj)

1、支付宝小程序使用window.my对象;微信小程序使用window.wx.miniProgram对象

2、发送消息的方式是调用postMessage方法,该方法接受一个对象作为参数,参数必须使用固定字段【data】;paramObj 必须是一个 JavaScript 对象,否则无法使用 JSON.stringify 函数将其转换为 JSON 字符串。

3、回退到当前小程序页面是调用navigateBack函数,该方法接受一个对象作为参数,delta表示返回的页面数,如果 delta 大于现有页面数,则返回到首页。

微信项目中

承载网页的容器 - web-view

// template
<web-view
   wx:if="{{ url }}"
   src="{{ url }}"
   bindmessage="getMessageFromHTML"
   binderror="handleWebViewError"
></web-view>

// methods
async getMessageFromHTML(e) {
        if(e.detail?.data) {
          const postMessageInfo = Array.isArray(e.detail.data)
              ? e.detail.data[0] || ''
              : e.detail.data || ''
          let postMessageInfoParse = {}
          try {
            postMessageInfoParse = postMessageInfo ? 
            JSON.parse(postMessageInfo) : {}
          } catch (error) {
            postMessageInfoParse = postMessageInfo
          }
          // 获取与h5页面商定的事件名称逻辑
          if(postMessageInfoParse.pageFromKey === 'confirmOrderLslCouponList' && postMessageInfoParse.couponSelectFlag) {
            EventBus.emit('confirmOrderLslQueryEstimate', {
              couponSelectLslFlag: true
            })
            return
          }
}

使用页面的监听

// confirmOrderLslQueryEstimate是web-view发出的事件名称
async attached() {
      EventBus.on('confirmOrderLslQueryEstimate', (data) => {
        // doing 监听到该事件时,页面具体做的操作
      })
}

// 组件的页面生命周期-监听页面卸载
detached() {
      EventBus.un('confirmOrderLslQueryEstimate')
},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/180338.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 6

1、明明买了一个扫地机器人&#xff0c;可以通过以下指令控制机器人运动: F:向前走 10 个单位长度 L:原地左转 90 度 R:原地右转 90 度 机器人初始方向向右&#xff0c;需要按顺序执行以下那条指令&#xff0c;才能打扫完下图中的道路 A、F-L-F-R-F-F-R-F-L-F B、F-R-F-L-F-F…

如何搭建Zblog网站并通过内网穿透将个人博客发布到公网

文章目录 1. 前言2. Z-blog网站搭建2.1 XAMPP环境设置2.2 Z-blog安装2.3 Z-blog网页测试2.4 Cpolar安装和注册 3. 本地网页发布3.1. Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网站制作网页是绕…

virtualList 封装使用 虚拟列表 列表优化

虚拟列表 列表优化 virtualList 组件封装 virtualList 组件封装 本虚拟列表 要求一次性加载完所有数据 不适合分页 新建一个select.vue 组件页面 <template><div> <el-select transfer"true" :popper-append-to-body"true"popper-class…

redis-cluster集群(目的:高可用)

1、特点 集群由多个node节点组成&#xff0c;redis数据分布在这些节点中&#xff0c;在集群中分为主节点和从节点&#xff0c;一个主对应一个从&#xff0c;所有组的主从形成一个集群&#xff0c;每组的数据是独立的&#xff0c;并且集群自带哨兵模式 2、工作原理 集群模式中…

Android系统调试工具大全:解密adb、dumpsys、procrank等神器

Android系统调试工具大全&#xff1a;解密adb、dumpsys、procrank等神器 引言 Android开发中&#xff0c;调试是一个非常重要的环节&#xff0c;本文将介绍一些常用的Android系统调试工具&#xff0c;包括adb、logcat、procrank、dumpsys、dmesg、top、free、df、trace、pm、…

如何使用Google My Business来提升您的内容和SEO?

如果您的企业有实体店&#xff0c;那么使用Google My Business&#xff08;GMB&#xff09;来改善您的本地SEO并增强您的在线形象至关重要。Google My Business &#xff08;GMB&#xff09; 是 Google 提供的补充工具&#xff0c;使企业能够控制其在 Google 搜索和地图上的数字…

【数字化转型方法论读书笔记】-数据中台角色解读

一千个读者&#xff0c;就有一千个哈姆雷特。同样&#xff0c;数据中台对于企业内部不同角色的价值也不同&#xff0c;下面分别从董事长、CEO、 CTO/CIO、IT 架构师、数据分析师这 5 个角色的视角详细解读数据中台。 1、董事长视角下的数据中台 在数字经济时代&#xff0c;企业…

【从入门到起飞】JavaSE—多线程(3)(生命周期,线程安全问题,同步方法)

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f354;生命周期&#x1f384;线程的安全问题&#…

每日一题 1410. HTML 实体解析器(中等,模拟)

模拟&#xff0c;没什么好说的 class Solution:def entityParser(self, text: str) -> str:entityMap {&quot;: ",&apos;: "",>: >,<: <,&frasl;: /,&amp;: &,}i 0n len(text)res []while i < n:isEntity Falseif …

Java—学生信息管理系统(简单、详细)

文章目录 一、主界面展示二、学生类三、系统功能方法3.1 main()方法3.2 添加学生信息3.3 删除学生信息3.4 修改学生信息3.5 查看所有学生信息 四、完整代码4.1 Student .Java4.2 StudentManger.Java 前言&#xff1a;本案例在实现时使用了Java语言中的ArrayList集合来储存数据。…

【Java系列】SpringBoot 集成MongoDB 详细介绍

目录 写在前面 一、步骤介绍 步骤 1: 添加 MongoDB 依赖 步骤 2: 配置 MongoDB 连接信息 步骤 3: 创建实体类 步骤 4: 创建 Repository 接口 步骤 5: 使用 Repository 进行操作 二、特殊处理 写在前面 在Spring Boot中集成MongoDB的过程相对简单&#xff0c;以下是一个…

git的用法

目录 一、为什么需要git 二、git基本操作 2.1、初始化git仓库 2.2、配置本地仓库的name和email 2.3、认识工作区、暂存区、版本库 三、git的实际操作 3.1 提交文件 3.2 查看git状态以及具体的修改 3.3 git版本回退 git reset 3.1 撤销修改 四、git分支管理 4.…

一体化大气环境监测设备实时守护我们的空气质量

WX-CSQX12 随着空气污染问题的日益严重&#xff0c;大气环境监测设备成为了我们生活中不可或缺的一部分。而一体化的大气环境监测设备&#xff0c;更是为我们的环境保护工作带来了更多的便利和效益。 一体化大气环境监测设备是一种集成了多种功能于一体的环保设备&#xff0c;…

USB驱动开发基础

USB标准 USB1.0&#xff0c; 1996&#xff0c;低速1.5Mbps和高速12Mbps&#xff0c;USB1.1 iMac G3&#xff0c;Type A和Type B接口USB 2.0 2000&#xff0c; 480Mpbs&#xff0c;Type A/B/C接口、Micro A/BUSB 3.0 5Gbps, 随着USB 3.2命名规定&#xff0c;现在也叫USB 3.2 Ge…

Altium Designer学习笔记11

画一个LED的封装&#xff1a; 使用这个SMD5050的封装。 我们先看下这个芯片的功能说明&#xff1a; 5050贴片式发光二极管&#xff1a; XL-5050 是单线传输的三通道LED驱动控制芯片&#xff0c;采用的是单极性归零码协议。 数据再生模块的功能&#xff0c;自动将级联输出的数…

代码随想录算法训练营Day 60 || 84.柱状图中最大的矩形

84.柱状图中最大的矩形 力扣题目链接(opens new window) 给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 1 < heights.length <10^50 < hei…

安卓毕业设计基于安卓android微信小程序的家校通系统

运行环境 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序运行软件&#xff1a;微信开发者 项目介绍 基于微信小程序的家校通系统的设计基…

ECRS生产工时分析软件:工业效率提升的隐形引擎

降本增效往往是企业开工规划的第一步。那到底降什么本&#xff0c;增什么效呢&#xff0c;对于很多企业来说&#xff0c;都是从采购成本入手&#xff0c;结果采购成本是降下来了&#xff0c;但是整体品质却下降了。实际上&#xff0c;要降本增效&#xff0c;优化现场管理才是企…

DBS note4:Buffer Management

目录 1、介绍 2、缓冲池 3、处理页面请求 4、LRU替换和时钟策略 1&#xff09;顺序扫描性能 - LRU 5、最近最常使用替换策略&#xff08;MRU Replacement&#xff09; 1&#xff09;Sequential Scanning Performance - MRU 6、练习题 1&#xff09;判断真假 2&#xf…

python实战—核心基础3(RGB模式颜色转换器) lv1

目录 一、核心代码解释 二、代码 三、运行截图 一、核心代码解释 1、hex() 函数 参数说明&#xff1a; x -- 10进制整数 返回值&#xff1a; 返回16进制数&#xff0c;以字符串形式表示。 实例&#xff1a; 以下实例展示了 hex 的使用方法&#xff1a; >>>h…