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>

 

posted @ 2024-12-06 09:13  心动12138  阅读(59)  评论(0编辑  收藏  举报