uniapp与webview之间的相互传值

阳光穿透心脏的1/2处 2023-07-17 07:26 65阅读 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传值

uniapp接受

//message接受方法
    
    <template>