最近项目有一个需求 —— 做一个百人抽奖的模块，要求展示百人的头像并且不断变化排列组合
先展示一部分的用户头像，然后每增加一个用户就增加一个头像在百人排列里面
我整一个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页面相互传值的方法