uniapp小程序与H5之间的通信

<template>
    <view>
        <web-view :src="src" @message="handleMessage"></web-view>
    </view>
</template>

<script>
    import {
        mapGetters
    } from "vuex"
    import qs from "qs"
    export default {
        data() {
            return {
                src: ""
            }
        },
        computed: {
            ...mapGetters(['user', 'school', 'token', 'school_token'])
        },
        onLoad(option) {
            // decodeURI避免中文乱码，
            this.src = "xxxxxxx?" + decodeURI(qs.stringify({
                isView: 'true',
                school: this.school,
                token: this.token,
                school_token: this.school_token,
                user: this.user
            }))
        },
    }
</script>

1     import qs from "qs"
2         onLaunch: function() {
3             console.log('App Launch')
4             const obj = qs.parse(window.location.href.split('?')[1]) || null;
5             if (obj && Object.keys(obj).length > 0) {
6             //如果有参数就对参数进行处理，但是有一点需要注意，如果传递过来的对象，最后一个属性值是字符串，后面值会自己跟一个  #/ ，具体为啥不知道，没有去找原因，反正我接收到的参数值是这样的，（我也是第一次用qs序列化参数，url拼接的是一个对象这样传参）
7             }
8         },

1 <script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>

 1     <script type="text/javascript">
 2         var userAgent = navigator.userAgent;
 3         if (userAgent.indexOf('AlipayClient') > -1) {
 4             // 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。
 5             document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
 6         } else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
 7             // QQ 小程序
 8             document.write(
 9                 '<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
10             );
11         } else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
12             // 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。
13             document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
14         } else if (/toutiaomicroapp/i.test(userAgent)) {
15             // 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。
16             document.write(
17                 '<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
18         } else if (/swan/i.test(userAgent)) {
19             // 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。
20             document.write(
21                 '<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
22             );
23         } else if (/quickapp/i.test(userAgent)) {
24             // quickapp
25             document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
26         }
27     </script>
28 
29     <!--上面的都是copy uni-app web-view组件官方的案例，懒得再去删减修改了 -->
30 
31     <!-- uni 的 SDK -->
32     <script type="text/javascript" src="<%= BASE_URL %>static/uni.webview.js"></script>
33     <script type="text/javascript">
34         // 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
35         document.addEventListener('UniAppJSBridgeReady', function() {
36             webUni.getEnv(function(res) {
37                 console.log('当前环境：' + JSON.stringify(res));
38             });
39         });
40     </script>

 1             changeSchoolHandle() {
 2             //如果想要点击按钮后，小程序退出H5页面，那么就在postMessage前进行路由跳转，具体支持的路由跳转方法，可以查看官方文档，
 3                     webUni.reLaunch({
 4                         url: '/pages/school/school'
 5                     })
 6                     webUni.postMessage({
 7                         data: {
 8                             type: 'backSchool'
 9                         }
10                     })
11             },

1 //webView中使用@message对消息进行处理
2 <web-view :src="src" @message="handleMessage"></web-view>