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-viewwx: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')
},

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频剪辑有妙招:批量置入封面,轻松提升视频效果

随着社交媒体的兴起&#xff0c;视频已经成为分享和交流的重要方式。无论是专业的内容创作者还是普通的社交媒体用户&#xff0c;都要在视频剪辑上下一番功夫&#xff0c;才能让视频更具吸引力。而一个吸引的封面往往能在一瞬间抓住眼球&#xff0c;提高点击率。还在因如何选择…

uni-app - 弹出框

目录 1.基本介绍 2.原生uinapp 通过uni.showActionSheet实现 3.使用组件 Popup 弹出层 ③效果展示 1.基本介绍 弹出框让我们在需要时在屏幕底部弹出一个菜单&#xff0c;它通常用于在各种应用程序中进行选择操作。Uniapp为我们提供了基本的底部弹出框组件&#xff0c;但它也有…

OpenSearch开发环境安装Docker和Docker-Compose两种方式

文章目录 简介常用请求创建映射写入数据查询数据其他 安装Docker方式安装OpenSearch安装OpenSearchDashboard Docker-Compose方式Docker-Compose安装1.设置主机环境2.下载docker-compose.yml文件3.启动docker-compose4.验证 问题问题1&#xff1a;IPv4 forwarding is disabled.…

如何搭建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;自己搭建网站制作网页是绕…

Altium Designer学习笔记11

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

CSGO搬砖干货,全网最详细教学!

CSGO游戏搬砖全套操作流程及注意事项&#xff08;第一课&#xff09; 在电竞游戏中&#xff0c;CSGO&#xff08;Counter-Strike: Global Offensive&#xff09;被广大玩家誉为经典之作。然而&#xff0c;除了在游戏中展现个人实力和团队合作外&#xff0c;有些玩家还将CSGO作为…

Java之API(上)

前言&#xff1a; 这一次内容主要是围绕Java开发中的一些常用类&#xff0c;然后主要是去学习这些类里面的方法。 一、高级API&#xff1a; (1)介绍&#xff1a;API指的是应用程序编程接口&#xff0c;API可以让编程变得更加方便简单。Java也提供了大量API供程序开发者使用&…

如何使用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;企业…

RTT打印在分区跳转后无法打印问题

场景&#xff1a; RTT打印仅占用JLINK的带宽&#xff0c;比串口传输更快更简洁&#xff0c;同时RTT可以使用jscope对代码里面的变量实时绘图显示波形&#xff0c;而采用串口打印波形无法实时打印。同时可以保存原始数据到本地进行分析&#xff0c;RTT在各方面完胜串口。 问题描…

【Vue入门篇】基础篇—Vue指令,Vue生命周期

&#x1f38a;专栏【JavaSE】 &#x1f354;喜欢的诗句&#xff1a;更喜岷山千里雪 三军过后尽开颜。 &#x1f386;音乐分享【如愿】 &#x1f384;欢迎并且感谢大家指出小吉的问题&#x1f970; 文章目录 &#x1f354;Vue概述&#x1f384;快速入门&#x1f33a;Vue指令⭐v-…

AI绘画工具汇总:免费、简单易上手

欢迎来到魔法宝库&#xff0c;传递AIGC的前沿知识&#xff0c;做有格调的分享❗ 喜欢的话记得点个关注吧&#xff01; 提到AI绘画&#xff0c;许多人通常会想到Midjourney和Stable Diffusion等工具&#xff0c;然而&#xff0c;这些工具对于新手而言门槛较高&#xff0c;不太友…

【C++】——标准模板库STL作业(其一)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

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

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

【实用】PPT没几页内存很大怎么解决

PPT页数很少但导出内存很大解决方法 1.打开ppt点击左上角 “文件”—“选项” 2.对话框选择 “常规与保存” &#xff08;1&#xff09;如果想要文件特别小时可 取消勾选 “将字体嵌入文件” &#xff08;2&#xff09;文件大小适中 可选择第一个选项 “仅最入文档中所用的字…

每日一题 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 …

Oracle-客户端连接报错ORA-12545问题

问题背景: 用户在客户端服务器通过sqlplus通过scan ip登陆访问数据库时&#xff0c;偶尔会出现连接报错ORA-12545: Connect failed because target host or object does not exist的情况。 问题分析&#xff1a; 首先&#xff0c;登陆到连接有问题的客户端数据库上&#xff0c;…

单片机调试技巧--修改bin文件实现断点

fromelf --text -a -c --outputall.dis F103_Moduel\F103_Moduel.axffromelf --bin --outputtest.bin F103_Moduel\F103_Moduel.axf 在启动文件中&#xff0c;修改UsageFault_Handler UsageFault_Handler\PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE…

2014年08月25日 Go生态洞察:深入理解Go中的常量

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

高通OTA升级非常规分区方法

高通OTA升级非常规分区方法 1. 高通LE OTA背景2. 高通LE OTA升级方案2.1 SDX12 OTA方案2.2 OTA升级TZ/RPM/Aboot OTA是一个通用述语&#xff0c;常见的解释为over the air。通过这一解释&#xff0c;OTA最开始的概念&#xff0c;是空中升级。后来&#xff0c;又衍生出了FOTA&am…