admin管理员组

文章数量:1641928

1.uni-app 如何发送数据到 H5？ 其实很接单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：

<template>
    <view class="advertisement" style="width: 100%;">
        <web-view :src="url" @message="message"></web-view>
    </view>
</template>
 
<script>
export default {
    data() {
        return {
            url:'/hybrid/html/local.html?data='
        };
    },
    onLoad(data) {<br>　　　　　　　　　　//这里对要传入到webview中的参数进行encodeURIComponent编码否则中文乱码
        this.url+=encodeURIComponent(data.data)
    },
    mounted() {},
    methods: {
        message(event){
            console.log(event.detail.data);
        }
    }
};
</script>
 
<style scoped="scoped" lang="scss">
@import './advertisement.scss';
</style>

那么在 H5 中是如何接收值得呢？

复制代码
console.log(getQuery('data'));  //获取 uni-app 传来的值
            
            
            //取url中的参数值
            function getQuery(name) {
                // 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
                let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
                let r = window.location.search.substr(1).match(reg);
                console.log(r);
                if(r != null) {
                    // 对参数值进行解码
                    return decodeURIComponent(r[2]);
                }
                return null;
            }

webview向uniapp传值

<script>
    document.addEventListener('UniAppJSBridgeReady', function() {
        //向uniapp传值
        uni.postMessage({
            data: {
                action: 'message'
            }
        });
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
    });
</script>    

uniapp接受


//message接受方法

<template>
    <view class="advertisement" style="width: 100%;">
        <web-view :src="url" @message="message"></web-view>
    </view>
</template>

本文标签： 跳转uniappwebviewhtml

版权声明：本文标题：【uniapp】webview跳转html传值问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729331021a1196398.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。