uniapp打包的h5与小程序web-view间的通讯、跳转

news/2024/10/23 15:24:06/

查询资料,网上千篇一律的都是围绕着官方文档展开的,内嵌的h5都是html,没有uniapp的写法,经过尝试,找到了一个方便快捷的方法,以下为本次成功的案例。
uniapp关于webview标签的使用 https://uniapp.dcloud.net.cn/component/web-view.html#web-view
小程序关于web-view标签的使用 https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
web-view中有些功能是受限,详细可查看上链接。例如支付功能受限,可通过与小程序间通信或者跳转传值在小程序端进新支付

小程序端(此代码为小程序原生代码)
此功能用到了小程序的web-view标签,用bindmessage进行监听内嵌页面传输上来的数据

<!--pages/webview/webview.wxml-->
<web-view src="{{src}}" bindmessage="onMessage"></web-view>

js中只需添加bindmessage对应的方法即可

<!--pages/webview/webview.js-->
Page({data: {},onMessage(e) {console.log('接收到H5页面的消息:', e.detail);}
})

uniapp端
1、首先在项目根目录执行命令
$ npm install weixin-js-sdk --save
2、待安装好之后就可以在所需调用的页面进行操作

// #ifdef H5
var weixin = require('weixin-js-sdk');
// #endif
export default {...methods: {yourFunction(){// #ifdef H5weixin.miniProgram.getEnv(function(thisenv) {console.log('当前环境weixin:' + JSON.stringify(thisenv));});//向小程序发送信息weixin.miniProgram.postMessage({data: {action: 'pay',message: 'message',data: res,}});// 返回,小程序端接收信息需要特定的动作才能触发,故后进行返回操作weixin.miniProgram.navigateBack();// #endif},yourFunctionNavigateTo: async function(){// #ifdef H5weixin.miniProgram.getEnv(function(thisenv) {console.log('当前环境weixin:' + JSON.stringify(thisenv));});// 跳转到小程序的页面(注:小程序接收参数时特殊字符会被截断,所以一下把"?"转成"%3F","="转成"%3D")weixin.miniProgram.navigateTo({url : "/pages/pay/index?pages=pages/order/payment%3Forder_sn%3D123456"});// #endif },}...
}

而跳转小程序页面接收参数的方法也是比较简单的

<!--js-->
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log('接收到的参数----',options);},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},})

http://www.ppmy.cn/news/1541365.html

相关文章

关于html的20道前端面试题2

21. 请解释HTML5中的新增语义标签&#xff0c;如<header>、<footer>、<section>等。 HTML5引入了一些新的语义标签&#xff0c;这些标签旨在帮助开发者更好地描述网页内容的结构。以下是一些常见的新增语义标签及其用途&#xff1a; <header>&#xf…

pb生成文件和反射

1.protoc生成文件 指定生成的目录和proto文件路径&#xff0c; protoc --cpp_out./ ./echo.proto // echo.proto syntax "proto3";package echo;option cc_generic_services true;message EchoRequest {string msg 1; }message EchoResponse {string msg 2; }…

Android 15 推出新安全功能以保护敏感数据

Android 15 带来了增强的安全功能&#xff0c;可保护您的敏感健康、财务和个人数据免遭盗窃和欺诈。 它还为大屏幕设备带来了生产力改进&#xff0c;并对相机、消息和密钥等应用进行了更新。 Android 防盗保护 Google 开发并严格测试了一套全面的功能&#xff0c;以在盗窃之…

C++ —— map系列的使用

目录 1. map和multimap参考文档 2. map类的介绍 3. pair 4. map的增删查 4.1 插入 4.2 删除 4.3 查找 5. map的数据修改 6. map的operator[] 7. multimap和map的差异 1. map和multimap参考文档 - C Referencehttps://legacy.cplusplus.com/reference/map/ 2. map类的…

Spring的底层原理

文章目录 1. Bean的生命周期2. 推断构造方法3. 依赖注入4. 初始化前5. 初始化6. 初始化后7. AOP8. Spring事务9. Spring事务失效10. Configuration11. 循环依赖12. Lazy 1. Bean的生命周期 UserService.class --> 推断构造方法 --> 普通对象 --> 依赖注入 --> 初始…

nosql课本习题

nosql题目 1. 文档数据库相比其他 NoSQL 的突出优势和特点是什么&#xff1f; 答案&#xff1a; 文档数据库的突出优势在于它的灵活性和可扩展性。不同于传统的关系型数据库&#xff0c;文档数据库允许存储半结构化和非结构化数据&#xff0c;每个文档可以有不同的字段&#x…

简述微服务高可用之Sentinel、Seate

简述微服务高可用之Sentinel、Seate使用 下文主要讲述使用sentinel,如何降级限流熔断及如何使用seata管理分布式事务 sentinel服务端安装与使用 1、下载 进入https://github.com/alibaba/Sentinel/releases 根据你的需求进行下载对应版本 我这里是JDK17 下载的1.8.8版本&am…

网络安全——防火墙技术

目录 前言基本概念常见防火墙技术防火墙的主要功能防火墙的不足之处相关题目1.组织外部未授权用户访问内部网络2.DMZ区3.包过滤防火墙和代理服务防火墙 前言 这是在软件设计师备考时编写的资料文章&#xff0c;相关内容偏向软件设计师 基本概念 防火墙技术是网络安全领域中的…