22

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <style>
            .btn{
                display: block;
                margin: 10px auto;
                width: 40%;
                height: 45px;
                line-height: 45px;
                text-align: center;
                border-radius: 10px;
                background-color: #259F3B;
                color: #FFFFFF;
                border: none;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <div>
                <div>
                    这里是小程序来的数据:{{wxdata}}
                </div>
                <button class="btn" @click="postWx">向页面发送数据1</button>
                <button class="btn" @click="postWx2">向页面发送数据2</button>
            </div>
            
        </div>

        <!-- 微信的SDK -->
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></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>
            var app = new Vue({
                el: '#app',
                data: {
                    wxdata: "abc"
                },
                mounted() {
                    this.$nextTick(() => {
                        document.addEventListener('UniAppJSBridgeReady', function() {
                            uni.getEnv(function(res) {
                                console.log('当前环境:' + JSON.stringify(res));
                            });
                        });
                    })

                },
                created() {
                    this.wxdata = this.getQueryString('wxdata') || 'abc'
                    console.log(this.wxdata)
                },
                methods: {
                    postWx() {
                        uni.switchTab({
                            url: '/pages/my/my'
                        });
                        uni.postMessage({
                            data: {
                                action2: '我是按钮2',
                                action1: '我是按钮1'
                            }
                        });
                    },
                    postWx2() {
                        uni.switchTab({
                            url: '/pages/my/my'
                        });
                        uni.postMessage({
                            data: {
                                action2: '我是按钮2',
                                action1: '我是按钮1'
                            }
                        });
                    },
                    getQueryString: function(name) {
                        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                        var r = window.location.search.substr(1).match(reg);
                        if (r != null) {
                            return decodeURIComponent(r[2]);
                        }
                        return null;
                    }
                }
            })
        </script>
    </body>
</html>
原文地址:https://www.cnblogs.com/aliyue/p/14123966.html