最近项目有一个需求 —— 做一个百人抽奖的模块，要求展示百人的头像并且不断变化排列组合

先展示一部分的用户头像，然后每增加一个用户就增加一个头像在百人排列里面

我整一个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页面相互传值的更多相关文章

  1. 安卓内嵌H5只展示部分静态页面

    问题: 安卓内嵌H5在华为P9部分机型只展示h5静态页面无法展示接口返回渲染的页面 解决办法: Android  关闭硬件加速   android:hardwareAccelerated=" ...

  2. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  3. APP中内嵌H5页面为什么不能下载？

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  4. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  5. 微信小程序中使用 <web-view> 内嵌 H5 时，登录问题的处理方法

    在微信小程序的开发中,经常遇到需要使用 <web-view></web-view> 内嵌 H5 的需求.在这种需求中比较棘手的问题应该就是登录状态的判断了,小程序中的登录状态怎 ...

  6. 小程序内嵌H5——判断小程序环境的坑

    现在各种小程序风靡,这边H5的需求还没有搞定,产品又要求做小程序版本,做可以,关键是618前上线,我-- whatever,618要做推广,日期订了,剩下的就只能是排期,定方案,尽可能完成. 最后和产 ...

  7. android内嵌H5页（webview）如何定位

    一.切换至webview后再定位元素 (1)获取页面上下文 contexts = driver.contexts (2)切换至webview driver.switch_to.context(cont ...

  8. appium常见问题02_android内嵌H5页（webview）如何定位

    现在大多数app都是由原生页面和内嵌H5(即webview)组成,app原生页面直接定位即可,那内嵌H5页面要如何定位呢. 相信大多数人用appium做自动化时都有遇到这个问题,小编总结了下工作中该问 ...

  9. 小程序通过 url 向内嵌 H5 传参注意事项

    当在小程序中通过 url 向 <web-view> 内嵌的 H5 传参时,当包含特殊字符时需要进行编码处理(不然 <web-view> 中是拿不到值的,小程序竟然没有错误提示. ...

随机推荐

  1. WPF---数据绑定之Xml数据源（四）

    一.场景 现在外部有一xml文件,我们想将该xml文件中的内容绑定到ListView中,该如何实现? 二.实现 xml文件的内容如下: <?xml version="1.0" ...

  2. 【java虚拟机】内存溢出与内存泄漏

    作者:平凡希 原文地址:https://www.cnblogs.com/xiaoxi/p/7354857.html 一.基本概念 内存溢出:简单地说内存溢出就是指程序运行过程中申请的内存大于系统能够提 ...

  3. java Date操作的相关代码

    /** * 获取现在时间,这个好用 * * @return返回长时间格式 yyyy-MM-dd HH:mm:ss */ public static Date getSqlDate() { Date s ...

  4. MZY项目笔记：session歧路

    from my typora MZY项目笔记:session歧路 文章目录 MZY项目笔记:session歧路 那该怎么办? 1. 手动加上cookie的header. 2.自己模拟一个Session ...

  5. mzy git学习， 保留现场，恢复现场，以及bug分支处理(七)

    git stash 在git中有时候我们工作做了一半,但是有点急事需要离开一段时间,或者现在需要切换到另一个分支下,去维护和修改一些其它的东西,但是我们现在的工作还没有完成,提交上去的话,并不是完整的 ...

  6. Seq2Seq sequence-to-sequence模型 简介

    Sequence-to-sequence (seq2seq) 模型. 突破了传统的固定大小输入问题框架 开创了将DNN运用于翻译.聊天(问答)这类序列型任务的先河 并且在各主流语言之间的相互翻译,和语 ...

  7. 后端拜拜，用不到你了，前端开发数据模拟神器nodejs

    后端拜拜,用不到你了,前端开发数据模拟神器nodejs 欢迎关注博主公众号「java大师」, 专注于分享Java领域干货文章, 关注回复「资源」, 免费领取全网最热的Java架构师学习PDF, 转载请 ...

  8. 初识GDAL

    1.GDAL简介 GDAL(Geospatial Data Abstraction Library)是一个用于栅格数据操作的库,是开源地理空间基金会(Open Source Geospatial Fo ...

  9. 使用ogr裁剪矢量数据

    使用ogr裁剪矢量数据 由来: ​ 近期有个需求,内容是这样的:我们有两个矢量数据,现在要求以一个矢量文件为底板,按字段对另一个矢量文件进行分割,生成若干小的shpfile文件 分析: ​ 经过分析之 ...

  10. LVS负载均衡集群--NAT模式部署

    目录: 一.企业群集应用概述 二.负载均衡群集架构 三.负载均衡群集工作模式分析 四.关于LVS虚拟服务器 五.NAT模式 LVS负载均衡群集部署 一.企业群集应用概述 1.群集的含义 Cluster ...