uniapp內嵌H5頁面和uniapp頁面相互傳值

阿新 • • 發佈：2021-10-07

最近專案有一個需求 —— 做一個百人抽獎的模組，要求展示百人的頭像並且不斷變化排列組合

先展示一部分的使用者頭像，然後每增加一個使用者就增加一個頭像在百人排列裡面

我整一個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>