uniapp h5 和 小程序互相传值

小程序端

复制代码
<template>
    <div>
        <web-view :webview-styles="webviewStyles" :src="webViewUrl" @message="getMessage"></web-view>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '44444',
                progress: { color: '#FF3333' }
            }
        },
        created() {
            this.webViewUrl =
                `http://192.168.101.25:5173/?data=${encodeURIComponent(this.url)}` //pdf地址添加参数
        },
        onLoad() {

        },
        methods: {
            getMessage(data) {
             uni.showToast({
                title: "reciveMessage接收到消息:" + JSON.stringify(data.detail),
                duration: 2000,
                icon: 'none'
            });
            console.log("接收到消息:" + JSON.stringify(data.detail));
            },
        },
    }
</script>

h5 端

复制代码
npm i weixin-js-sdk
//下载微信sdk

<template>
    <view class="content">
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view>
        <view class="">
            {{data}}
        </view>
        <button @click="chufa">点击</button>
        <button @click="tiaozhuan">点击</button>
    </view>
</template>
<script>
    import wx from 'weixin-js-sdk';
    export default {
        data() {
            return {
                title: 'Hello',
                data:{}
            }
        },
        onLoad(e) {
        this.data=e
        },
        methods: {
        chufa(){
            // 传参
            wx.miniProgram.postMessage({ 
                data: { 
                          action: '我要向微信端传递的数据',
                             phoneNumber: '15314601234'
                    } 
            });
        },
        tiaozhuan(){
            // 跳转小程序路由
            const name = '天天'
            wx.miniProgram.navigateTo({
              url: `/pages/user/user?name=${name}` , // 小程序地址
              success () {
                console.log('question success')
              },
              fail (error) {
                console.log(error)
              }
            })

        }
        }
    }
</script>