首页 > 移动平台 > 详细

uniapp与webview之间的相互传值

时间:2019-12-08 15:51:03      阅读:1327      评论:0      收藏:0      [点我收藏+]

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) {
          //这里对要传入到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;
            }

2.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>

 

uniapp与webview之间的相互传值

原文:https://www.cnblogs.com/lizhao123/p/12005868.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!