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

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

我整一个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. CentOS7 yum方式安装MySQL5.7 + 远程连接

    1 下载并安装MySQL官方的 Yum Repository [root@localhost ~]# wget -i -c http://dev.mysql.com/get/mysql57-commu ...

  2. windows下mysql5.7.17配置

    1.官网下载mysql5.7.17 64位 https://dev.mysql.com/downloads/mysql/ 2.安装完解压到E盘主目录下,改文件名为mysql 3.配置环境变量 我的电脑 ...

  3. mybatis第一个程序随笔

    今天继续学习了解如何写一个mybatis程序 创建了Dao层 1.1 创建一个UserDao接口 1.2 创建UserMapper.xml文件 在mybaits中文手册查找配置信息 <?xml ...

  4. 5M1E，软件质量管理最佳解决方案

    - 如何做好一个产品? - 用户.需求.文化.价值.设计.流程,这些因素缺一不可.- 那么,如何做好产品的质量管理?- 人.机器.物料.方法.环境.测量,这些因素同样缺一不可.能够影响产品质量波动的因 ...

  5. C# ThreadPool 分批处理数据,所有数据执行完再返回

    这是一个调用翻译数据的功能,所有数据一次性提交会造成后台服务压力大,接口反应时间也长. 所以做了一个分批处理,等待所有批次的数据调用接口都返回后再执行下一步. 1 /// <summary> ...

  6. Redis集群的搭建及与SpringBoot的整合

    1.概述 之前聊了Redis的哨兵模式,哨兵模式解决了读的并发问题,也解决了Master节点单点的问题. 但随着系统越来越庞大,缓存的数据越来越多,服务器的内存容量又成了问题,需要水平扩容,此时哨兵模 ...

  7. Asp.net MVC Vue Axios无刷新请求数据和响应数据

    Model层Region.cs using System; using System.Collections.Generic; using System.Linq; using System.Web; ...

  8. 通过HttpURLConnection下载图片到本地--批量下载

    一.背景说明 这篇文章讲述的是批量下载附件,在上一篇文章中,介绍了下载单个附件(上一篇文章). 二.实现思路 主要的实现思路:创建文件夹->文件夹中创建需要下载的文件->压缩文件夹-> ...

  9. 【第九篇】- Git 标签之Spring Cloud直播商城 b2b2c电子商务技术总结

    Git 标签 如果你达到一个重要的阶段,并希望永远记住那个特别的提交快照,你可以使用 git tag 给它打上标签. 比如说,我们想为我们的 xxx 项目发布一个"1.0"版本. ...

  10. bash-completion linux命令补全

    1.有时候用docker run 或者kubectl 想tab补全的时候用不了 这个时候可以安装一个神奇的包bash-completion yum install bash-completion 2. ...