uniapp内嵌H5页面和uniapp页面相互传值
最近项目有一个需求 —— 做一个百人抽奖的模块，要求展示百人的头像并且不断变化排列组合
先展示一部分的用户头像，然后每增加一个用户就增加一个头像在百人排列里面
我整一个gif图来展示一下
大概就是这种动画效果，
底层的动画效果我是通过jq22找的一个jquery插件，
然后改吧改吧改成现在这个样子了
因为html页面，我就直接使用了h5外链的形式引入了进去
但是应用宝审核警告这个链接可能有风险，让我尽量少用
然后我就添加进去uniapp项目里面了，之后我就遇到了html页面和uniapp的vue页面需要相互传值
（1）uni-app需要向H5页面传递数据
（2）H5页面也需要向uni-app传递数据
话不多说，直接上代码
这里是uni-app里面代码
注意： @message="getMessage"是监听H5页面传递的数据
官方有文档：https://uniapp.dcloud.io/component/web-view
这里是vue页面
<template>
<view class="redirect">
<web-view
v-if="userData"
@message="getMessage"
:src="
'https://ycttest.cms.diyibox.com/staffcenter/login.html?userData=' + JSON.stringify(userData)
"
>
</web-view>
</view>
</template> <script>
export default {
data () {
return {
userData: null
}
},
methods: {
getMessage(message){
console.log('h5退出通知uni--->message', message.detail)
if (message.detail.data[0].action === 'logout') {
const storageKey = message.detail.data[0].account
uni.removeStorageSync(storageKey)
this.$Router.replaceAll('pages/login/index')
}
}
},
created() {
const query = this.$Route.query
console.log('路由参数', query)
const userData = JSON.parse(uni.getStorageSync(query.account))
this.userData = userData
console.log('用户信息1', userData)
}
}
</script>
然后是H5页面的代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
</head>
<body>
<div id="testdiv" style="display: none;text-align: center;">
触发了
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
// QQ 小程序
document.write('<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>');
} else if (/miniProgram/i.test(userAgent) || /MicroMessenger/i.test(userAgent)) {
// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
} else if (/toutiaomicroapp/i.test(userAgent)) {
// 字节跳动小程序 JS-SDK 如果不需要兼容字节跳动小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
} else if (/swan/i.test(userAgent)) {
// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
document.write('<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>');
}
if (!/toutiaomicroapp/i.test(userAgent)) {
// document.querySelector('.post-message-section').style.visibility = 'visible';
}
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
document.addEventListener('UniAppJSBridgeReady', function() {
document.getElementById('testdiv').addEventListener('click', function() {
uni.postMessage({
data: {
action: '这是我传递的数据1',
account: '123456789'
}
});
})
});
</script>
</body>
</html>
动画效果就不贴出来啦，这篇随笔主要是写uniapp的vue页面和html页面相互传值的方法
uniapp内嵌H5页面和uniapp页面相互传值的更多相关文章
- 安卓内嵌H5只展示部分静态页面
问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android 关闭硬件加速 android:hardwareAccelerated=" ...
- ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号
异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...
- APP中内嵌H5页面为什么不能下载？
在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...
- 小程序中webview内嵌h5页面
小程序内嵌h5页面跳转小程序指定页面, 需要引用 JSSDK: <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...
- 微信小程序中使用 <web-view> 内嵌 H5 时，登录问题的处理方法
在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...
- 小程序内嵌H5——判断小程序环境的坑
现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...
- android内嵌H5页（webview）如何定位
一.切换至webview后再定位元素 (1)获取页面上下文 contexts = driver.contexts (2)切换至webview driver.switch_to.context(cont ...
- appium常见问题02_android内嵌H5页（webview）如何定位
现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...
- 小程序通过 url 向内嵌 H5 传参注意事项
当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示. ...
随机推荐
- SpringBoot中的thymeleaf引擎报错
关于:thymeleaf报错: An error happened during template parsing (template: "class path resource [temp ...
- Java编码的问题
<转> 由于JDK是国际版的,在编译的时候,如果我们没有用-encoding参数指定我们的Java源程序的编码格式,则javac.exe首先获得我们操作系统默认采用的编码格式,也即在编译j ...
- 详解 Apache SkyWalking 跨进程传播协议
简介 SkyWalking 跨进程传播协议是用于上下文的传播,本文介绍的版本是3.0,也被称为为sw8协议. Header项 Header应该是上下文传播的最低要求. Header名称:sw8. He ...
- Java网络编程之TCP
Java网络编程之TCP TCP主要需要两个类:Socket和ServerSocket,Socket是客户端连接服务器时创建,参数需要指定服务器的ip和端口,ServerSocket是服务器端创建 ...
- 利用 Spring Boot 中的 @ConfigurationProperties，优雅绑定配置参数
使用 @Value("${property}") 注释注入配置属性有时会很麻烦,尤其是当你使用多个属性或你的数据是分层的时候. Spring Boot 引入了一个可替换的方案 -- ...
- 20210804 noip30
考场 第一眼感觉 T1 是状压 DP,弃了.T2 好像也是 DP???看上去 T3 比较可做. 倒序开题.T3 暴力是 \(O(pn\log p)\)(枚举 \(x\),二分答案,看能否分成合法的不超 ...
- Python - 面向对象编程 - __init__() 构造方法
什么是构造方法 在创建类时, 可手动添加一个 __init__() 方法,称为构造方法,这是一个实例方法 构造方法用于创建实例对象时使用,每当创建一个类的实例对象时,Python 解释器都会自动调 ...
- Apache Hudi内核之文件标记机制深入解析
1. 摘要 Hudi 支持在写入时自动清理未成功提交的数据.Apache Hudi 在写入时引入标记机制来有效跟踪写入存储的数据文件. 在本博客中,我们将深入探讨现有直接标记文件机制的设计,并解释了其 ...
- 反射应用和获取Class对象的三种方式
一.写一个"框架",可以创建任何对象运行任何方法 1.配置文件 2.使用类加载器ClassLoader,Properties集合是可以和IO流结合使用完成读取和写入数据的集合,方法 ...
- Spring Boot 入门系列（二十八） JPA 的实体映射关系，一对一，一对多，多对多关系映射！
前面讲了Spring Boot 使用 JPA,实现JPA 的增.删.改.查的功能,同时也介绍了JPA的一些查询,自定义SQL查询等使用.JPA使用非常简单,功能非常强大的ORM框架,无需任何数据访问层 ...