uniapp 用web-view 嵌套uniapp

1. uniapp 用web-view 嵌套uniapp

  uniapp开发的APP要嵌套uniapp开发的h5,并且APP后面还要打包H5,这就涉及app和h5之间的通信,h5和h5之间的通信。

1.1. 准备工作

  无论是app和h5通信还是 h5和h5之间的通信都是需要引入web-view的sdk文件 我下载的是1.5.2版本,代码如下

!(function (e, n) {'object' == typeof exports && 'undefined' != typeof module? (module.exports = n()): 'function' == typeof define && define.amd? define(n): ((e = e || self).uni = n())
})(this, function () {'use strict'try {var e = {}Object.defineProperty(e, 'passive', {get: function () {!0},}),window.addEventListener('test-passive', null, e)} catch (e) {}var n = Object.prototype.hasOwnPropertyfunction t(e, t) {return n.call(e, t)}var i = [],a = function (e, n) {var t = { options: { timestamp: +new Date() }, name: e, arg: n }if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {if ('postMessage' === e) {var a = { data: [n] }return window.__dcloud_weex_postMessage? window.__dcloud_weex_postMessage(a): window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o = {type: 'WEB_INVOKE_APPSERVICE',args: { data: t, webviewIds: i },}window.__dcloud_weex_postMessage? window.__dcloud_weex_postMessageToService(o): window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if (!window.plus)return window.parent.postMessage({ type: 'WEB_INVOKE_APPSERVICE', data: t, pageId: '' },'*')if (0 === i.length) {var r = plus.webview.currentWebview()if (!r) throw new Error('plus.webview.currentWebview() is undefined')var d = r.parent(),s = '';(s = d ? d.id : r.id), i.push(s)}if (plus.webview.getWebviewById('__uniapp__service'))plus.webview.postMessageToUniNView({ type: 'WEB_INVOKE_APPSERVICE', args: { data: t, webviewIds: i } },'__uniapp__service')else {var w = JSON.stringify(t)plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat('WEB_INVOKE_APPSERVICE', '",').concat(w, ',').concat(JSON.stringify(i), ');'))}},o = {navigateTo: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.urla('navigateTo', { url: encodeURI(n) })},navigateBack: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.deltaa('navigateBack', { delta: parseInt(n) || 1 })},switchTab: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.urla('switchTab', { url: encodeURI(n) })},reLaunch: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.urla('reLaunch', { url: encodeURI(n) })},redirectTo: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},n = e.urla('redirectTo', { url: encodeURI(n) })},getEnv: function (e) {window.plus ? e({ plus: !0 }) : e({ h5: !0 })},postMessage: function () {var e =arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}a('postMessage', e.data || {})},},r = /uni-app/i.test(navigator.userAgent),d = /Html5Plus/i.test(navigator.userAgent),s = /complete|loaded|interactive/var w = window.my && navigator.userAgent.indexOf('AlipayClient') > -1var u =window.swan && window.swan.webView && /swan/i.test(navigator.userAgent)var c =window.qq &&window.qq.miniProgram &&/QQ/i.test(navigator.userAgent) &&/miniProgram/i.test(navigator.userAgent)var g =window.tt &&window.tt.miniProgram &&/toutiaomicroapp/i.test(navigator.userAgent)var v =window.wx &&window.wx.miniProgram &&/micromessenger/i.test(navigator.userAgent) &&/miniProgram/i.test(navigator.userAgent)var p = window.qa && /quickapp/i.test(navigator.userAgent)for (var l,_ = function () {;(window.UniAppJSBridge = !0),document.dispatchEvent(new CustomEvent('UniAppJSBridgeReady', {bubbles: !0,cancelable: !0,}))},f = [function (e) {if (r || d)return (window.__dcloud_weex_postMessage || window.__dcloud_weex_? document.addEventListener('DOMContentLoaded', e): window.plus && s.test(document.readyState)? setTimeout(e, 0): document.addEventListener('plusready', e),o)},function (e) {if (v)return (window.WeixinJSBridge && window.WeixinJSBridge.invoke? setTimeout(e, 0): document.addEventListener('WeixinJSBridgeReady', e),window.wx.miniProgram)},function (e) {if (c)return (window.QQJSBridge && window.QQJSBridge.invoke? setTimeout(e, 0): document.addEventListener('QQJSBridgeReady', e),window.qq.miniProgram)},function (e) {if (w) {document.addEventListener('DOMContentLoaded', e)var n = window.myreturn {navigateTo: n.navigateTo,navigateBack: n.navigateBack,switchTab: n.switchTab,reLaunch: n.reLaunch,redirectTo: n.redirectTo,postMessage: n.postMessage,getEnv: n.getEnv,}}},function (e) {if (u)return (document.addEventListener('DOMContentLoaded', e),window.swan.webView)},function (e) {if (g)return (document.addEventListener('DOMContentLoaded', e),window.tt.miniProgram)},function (e) {if (p) {window.QaJSBridge && window.QaJSBridge.invoke? setTimeout(e, 0): document.addEventListener('QaJSBridgeReady', e)var n = window.qareturn {navigateTo: n.navigateTo,navigateBack: n.navigateBack,switchTab: n.switchTab,reLaunch: n.reLaunch,redirectTo: n.redirectTo,postMessage: n.postMessage,getEnv: n.getEnv,}}},function (e) {return document.addEventListener('DOMContentLoaded', e), o},],m = 0;m < f.length && !(l = f[m](_));m++);l || (l = {})var E = 'undefined' != typeof uni ? uni : {}if (!E.navigateTo) for (var b in l) t(l, b) && (E[b] = l[b])return (E.webView = l), E
})

  下载到本地,嵌入的h5页面引入 也可以直接全局引入在main.js里面(本人是main.js里导入的)

//main.js引入
import uniview from './pages/login/uni.webview.1.5.2'
//挂载到全局实例上面
// web-view SDK
Vue.prototype.uniview = uniview

1.2. app和h5通信(真机调试 ||打包后)

  无论是app和h5通信还是 h5和h5之间的通信都是需要引入web-view的sdk文件 我下载的是1.5.2版本,代码如下

//app页面向h5页面传参采用的是路径传参<view class="content"><web-view :src="http://192.168.1.149:8082?token=1231" @message="getMessage" /></view>//h5页面接收
onLoad(options){console.log('第一次登录@', options.token)
}//h5页面向app页面传参this.uniview.webView.postMessage({data: {type: 'pay_copy',message: '传过去的参数',},}) 
//app页面接收  绑定@message事件   //只会在真机调试时生效！！！！！！！！！！！！！！！！
<view class="content"><web-view :src="http://192.168.1.149:8082?token=1231" @message="getMessage" /></view>getMessage(value) {console.log(value, '传过来的参数')
}

1.3. h5和h5之间通信

/内嵌的h5页面  (和h5传app一样不需要改)this.uniview.webView.postMessage({data: {type: 'pay_copy',message: this.detailList,},})
//父级h5(接收用window的方法接收)
onLoad() {
if (window) {window.addEventListener('message', (e) => {//可以通过e里面的参数 orgin判断是否是要嵌入的h5  (判断一下来源安全一些)console.log(e, 'h5传过来的')
})
}
}

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

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

相关文章

目标检测系列模型发展历程

目标检测系列模型发展历程

常见数据集&#xff1a; VOC-->COCO 模型发展&#xff1a; RCNN-->Fast RCNN-->Faster RCNN-->Mask RCNN 这一系列的模型&#xff08;RCNN、Fast RCNN、Faster RCNN、Mask RCNN&#xff09;代表了计算机视觉特别是在物体检测和分割领域的一系列重大进展。下面&a…
阅读更多...
神经网络：梯度下降法更新模型参数

神经网络：梯度下降法更新模型参数

作者&#xff1a;CSDN _养乐多_ 在神经网络领域&#xff0c;梯度下降是一种核心的优化算法&#xff0c;本文将介绍神经网络中梯度下降法更新参数的公式&#xff0c;并通过实例演示其在模型训练中的应用。通过本博客&#xff0c;读者将能够更好地理解深度学习中的优化算法和损…
阅读更多...
【LeetCode】20. 有效的括号(Java自用版)

【LeetCode】20. 有效的括号(Java自用版)

栈 首先&#xff0c;我们定义一个isValid方法&#xff0c;该方法接受一个字符串s作为参数&#xff0c;并返回一个布尔值来表示该字符串是否有效。 public boolean isValid(String s) {// 如果字符串为空&#xff0c;则自然是有效的if (s.isEmpty())return true;// 创建一个栈…
阅读更多...
帆软报表在arm架构的linux

帆软报表在arm架构的linux

有朋友遇到一个问题在部署帆软报表时遇到报错。 问 我在 arm架构的linux服务器上部署帆软报表遇到了一个棘手的问题&#xff0c;你有空帮忙看下嘛。 我看后台日志报的错是 需要升级 gcc、libmawt.so &#xff0c;是系统中缺少Tomcat需要的依赖库&#xff0c;你之前处理过类似…
阅读更多...
超级会员卡积分收银系统源码：积分+收银+商城三合一小程序 带完整的安装代码包以及搭建教程

超级会员卡积分收银系统源码：积分+收银+商城三合一小程序 带完整的安装代码包以及搭建教程

信息技术的迅猛发展&#xff0c;移动支付和线上购物已经成为现代人生活的常态。在这样的背景下&#xff0c;商家对于能够整合收银、积分管理和在线商城的综合性系统的需求日益强烈。下面&#xff0c;罗峰给大家分享一款超级会员卡积分收银系统源码&#xff0c;它集积分、收银、…
阅读更多...
机器学习（复试）

机器学习（复试）

学习分类 其学习形式主要分为&#xff1a;有监督学习、无监督学习、半监督学习 有监督 有监督学习&#xff08;supervised learning&#xff09;&#xff0c;需要你事先需要准备好要输入数据&#xff08;训练样本&#xff09;与真实的输出结果&#xff08;参考答案) 预测结…
阅读更多...
vector类（一）

vector类（一）

文章目录 vector介绍和使用1.vector的介绍2.vector的使用2.1 vector的定义2.2 vector iterator的使用2.3 vector空间增长问题2.4 vector增删查改2.5 vector迭代器失效问题 3.vector 在OJ中的使用 vector介绍和使用 1.vector的介绍 vector是表示 可变大小数组的 序列容器。 就…
阅读更多...
四、harmonyos实操一个toDoItem待办列表

四、harmonyos实操一个toDoItem待办列表

官方讲的很大概&#xff0c;有些细节得去看源码才能知道&#xff0c;不过还是撸出来一个简易版的的item了 import image from ohos.multimedia.image;Entry // 表示入口 Component struct Index {State isComplete:boolean false;private totalTasks: Array<string> […
阅读更多...
《数据结构学习笔记---第五篇》---链表OJ练习上

《数据结构学习笔记---第五篇》---链表OJ练习上

目录 CM11链表分割 OR36 链表的回文结构 160.相交链表 141&142环形链表 CM11链表分割 step1:思路分析 1.首先可以想到&#xff0c;我们可以将原链表的元素划分到两个新的链表之中&#xff0c;由于必须保持顺序&#xff0c;所以新链表我们要用尾插。 2.为了方便进行尾插我…
阅读更多...
自动化与智能化并行：数字化运维体系助力企业腾飞

自动化与智能化并行：数字化运维体系助力企业腾飞

文章目录 文章目录 文章目录 一、引言二、数字化运维体系的核心要素三、构建数字化运维体系的策略四、数字化运维体系的实施与挑战主要内容读者对象 一、引言 随着信息技术的迅猛发展&#xff0c;数字化转型已成为企业提升竞争力、实现可持续发展的必由之路。在数字化转型的过…
阅读更多...
JSP – 支持WORD上传的富文本编辑器

JSP – 支持WORD上传的富文本编辑器

1.下载示例 https://gitee.com/xproer/zyoffice-tinymce5 2.引入组件 3.配置转换接口 效果 泽优Office文档转换服务(zyOffice) 功能&#xff1a;一键导入Word转HTML&#xff0c;不装控件&#xff0c;不装Office&#xff0c;任意平台兼容(Windows,macOS,Linux,安卓Android,苹果…
阅读更多...
Java文件基本操作入门指南

Java文件基本操作入门指南

Java文件基本操作入门指南 文章目录 Java文件基本操作入门指南前言一、文件的基本操作1、文件的创建2、文件的写入3、文件的读取4、文件的删除 二、进阶操作与技巧1、文件的复制与移动2、文件内容的追加3、随机访问文件4、文件路径与名称操作 三、最佳实践与注意事项1、异常处理…
阅读更多...
flutter boost 如何从native跳转到flutter页面

flutter boost 如何从native跳转到flutter页面

Flutter Boost 是一个 Flutter 插件&#xff0c;它可以帮助开发者在原生应用和 Flutter 应用之间无缝跳转。以下是一些基本步骤&#xff0c;展示了如何使用 Flutter Boost 从原生&#xff08;Native&#xff09;页面跳转到 Flutter 页面。 ### 1. 配置 Flutter Boost 在你的 …
阅读更多...
【GPU系列】选择最适合的 CUDA 版本以提高系统性能

【GPU系列】选择最适合的 CUDA 版本以提高系统性能

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
什么是数据仓库

什么是数据仓库

数据仓库定义 数据仓库，按照传统的定义，数据仓库是一个面向主题的、集成的、持久的（非易失的）、反映历史变化（随时间变化），用来支持管理人员决策的数据集合。 通俗讲，企业希望能够更快得处理比较多的数据，数据仓库由此诞生。 就像是企业的财务系统。各个部门（面向主…
阅读更多...
nvm安装以后，node -v npm 等命令提示不是内部或外部命令

nvm安装以后，node -v npm 等命令提示不是内部或外部命令

因为有vue2和vue3项目多种&#xff0c;所以为了适应各类版本node,使用nvm管理多种node版本&#xff0c;但是当我按教程安装nvm以后&#xff0c;nvm安装以后&#xff0c;node -v npm 等命令提示不是内部或外部命令 首先nvm官网网址&#xff1a;https://github.com/coreybutler/…
阅读更多...
数据结构——栈(C语言版)

数据结构——栈(C语言版)

前言&#xff1a; 在学习完数据结构顺序表和链表之后&#xff0c;其实我们就可以做很多事情了&#xff0c;后面的栈和队列&#xff0c;其实就是对前面的顺序表和链表的灵活运用&#xff0c;今天我们就来学习一下栈的原理和应用。 准备工作&#xff1a;本人习惯将文件放在test.c…
阅读更多...
[C++]深入解析：如何计算C++类或结构体的大小

[C++]深入解析：如何计算C++类或结构体的大小

目录 什么是内存对齐 类的成员的存储规则 怎么进行内存对齐&#xff08;介绍规则与例子讲解&#xff09; 什么是内存对齐 内存对齐是指将数据存储在内存中时&#xff0c;按照一定的规则让数据排列在规定的地址上&#xff0c;以提高数据访问的效率和速度。在C中&#xff0c;结…
阅读更多...
维修贝加莱工业电脑触摸屏BR 5PP320.0571-39 Power Panel 300工控屏

维修贝加莱工业电脑触摸屏BR 5PP320.0571-39 Power Panel 300工控屏

维修贝加莱工业电脑触摸屏B&R 5PP320.0571-39 Power Panel 300工控屏 贝加莱工业电脑4P3040.01-490 描述 贝加莱电源面板4P3040.01-490 扩展产品类型&#xff1a;HMI/触摸屏 产品编号&#xff1a;4P3040.01-490 B&R 类型名称&#xff1a;HMI/触摸屏 描述 Power…
阅读更多...
鸿蒙OS开发问题：(ArkTS)【 RSA加解密，解决中文乱码等现象】

鸿蒙OS开发问题：(ArkTS)【 RSA加解密，解决中文乱码等现象】

RSA加解密开始构建工具类就是举步维艰&#xff0c;官方文档虽然很全&#xff0c;但是还是有很多小瑕疵&#xff0c;在自己经过几天的时间&#xff0c;彻底解决了中文乱码的问题、分段加密的问题。 首先看官方示例代码(以RSA非对称加解密&#xff08;多次调用doFinal实现分段&a…
阅读更多...
最新文章

Copyright @ 2022~2023