心得技巧
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

uniapp内嵌H5页面和uniapp页面相互传值

发布时间：2022-07-03 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了uniapp内嵌H5页面和uniapp页面相互传值，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

我整一个gif图来展示一下

 

                           

uniapp内嵌H5页面和uniapp页面相互传值

 

大概就是这种动画效果，

底层的动画效果我是通过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页面相互传值全部内容，希望文章能够帮你解决uniapp内嵌H5页面和uniapp页面相互传值所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：javajavascriptlistloadloadphppythonString参数参数文档文档程序员程序员
猜你在找的心得技巧相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新心得技巧教程
热门心得技巧教程