脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → uni-app和web-view页面相互传参

uni-app和web-view页面相互传参方法实例

 更新时间：2023年06月23日 09:12:19   作者：湫风洛夜  
web-view是一个web浏览器组件,可以用来承载网页的容器,会自动铺满整个页面,下面这篇文章主要给大家介绍了关于uni-app和web-view页面相互传参的相关资料,需要的朋友可以参考下

首先：这里说的是uni-app开发的APP项目，嵌入web-view页面，并进行相互传参，如果和您想了解的内容相符，请继续阅读。

一、说到web-view嵌入uni-app开发的APP，传参方面很多人首先会想到url传参。

<!-- app端 -->
<view>
    <web-view src="www.xxxxx?name=张三"></web-view>
</view>
//web端
alert(this.$route.query.name) //张三

这种方法是app向webview传参最简单的方式，但也存在许多弊端：

1.参数会被抓取，如果携带敏感信息会存在安全隐患；

2.url会有长度限制，如果携带的数据过多会传不过去；

3.没有对应的webview向app传参的回传方法；

4.（重要）不够装逼！！！

二、下面详细说一下我在项目中用的方法，使用plus.webview.create(url, id, style, {data:{}})的方法携带参数，并使用uni.postMessage()的方法回传参数。

当app给web传参时：

app中代码如下：

let wv = plus.webview.create(
    'xxx.xxxx.xxx?t=' + new Date().getTime(),//date保证不走缓存
    'batch_view',
    {
        top: '0',
        left: '0',
        height: '100%',
        width: '100%'
    },
    {
        data: {
            token: token,
            userInfo: userInfo,
            implantType: 'uniapp'
        }
    }) //不用data键值对的方式传的话，h5接收后会是多个字段，而非一个对象
let currentWebview = this.$mp.page.$getAppWebview()
currentWebview.append(wv);//重要，否则会失效

H5中代码如下：

if (window.plus) {
    plusReady();
}//加上此判断以免再浏览器打开h5页面时报plus is not define
function plusReady() {
    if (plus.webview.getWebviewById("batch_view")) {
        const appData = plus.webview.getWebviewById("batch_view").data;
        alert(JSON.stringfy(appData))
    }
}

当web给app传参时：

H5中代码如下：

<!-- index.html中body引入uni.webview -->
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
    <script
            type="text/javascript"
            src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"
            ></script>
    <!-- 以下为验证是否引入成功（可删） -->
    <script type="text/javascript">
        //  待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
        document.addEventListener("UniAppJSBridgeReady", function () {
            uni.postMessage({
                data: {
                    action: "6666", // 这是传的参数
                },
            });
        });
    </script>
</body>
//正常使用直接调用即可
uni.postMessage({
    data: {
        action: "noToken", // 这是传的参数
    },
});

app中代码如下：

//建议写在该webview嵌入页面的onLoad生命周期中
plus.globalEvent.addEventListener('plusMessage', function(msg) {
    console.log(msg.data.args.data.arg)//web传来的参数
    if (msg.data.args.data.arg?.action == 'noToken') {
        uni.clearStorageSync()
        uni.reLaunch({
            url: '/pages/login/index'
        })
    } 
})

这里说一下，官方官方推荐写法是下面这样，如果是自己再html中方创建的可以使用这种方式，我们是使用plus.webview.create创建的webview木有@message，故用了以上方法。

<web-view  @message="handlePostMessage"></web-view>

总结

到此这篇关于uni-app和web-view页面相互传参的文章就介绍到这了,更多相关uni-app和web-view页面相互传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • JavaScript实现梯形乘法表的方法

    JavaScript实现梯形乘法表的方法

    这篇文章主要介绍了JavaScript实现梯形乘法表的方法,涉及基本javascript结合表格操作的技巧,需要的朋友可以参考下
    2015-04-04
  • JavaScript复制文案到剪贴板小技巧

    JavaScript复制文案到剪贴板小技巧

    这篇文章主要为大家介绍了JavaScript复制文案到剪贴板实现小技巧,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • js瀑布流布局的实现

    js瀑布流布局的实现

    这篇文章主要为大家详细介绍了js瀑布流布局的实现，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-06-06
  • JScript内置对象Array中元素的删除方法

    JScript内置对象Array中元素的删除方法

    JScript内置对象Array中元素的删除方法...
    2007-03-03
  • 纯javascript判断查询日期是否为有效日期

    纯javascript判断查询日期是否为有效日期

    很多网站都涉及到输入日期选项，如果客户日期输入错误，可能导入查询不到甚至查询到错误的信息，为了更好的满足用户需求，需要对日期进行校验，下面给大家介绍使用纯javascript如何判断查询日期是否为有效日期，需要的朋友可以参考下
    2015-08-08
  • Javascript使用post方法提交数据实例

    Javascript使用post方法提交数据实例

    这篇文章主要介绍了Javascript使用post方法提交数据,实例分析了javascript实现post提交数据的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • JS组件系列之Bootstrap table表格组件神器【终结篇】

    JS组件系列之Bootstrap table表格组件神器【终结篇】

    Bootstrap Table是轻量级的和功能丰富的以表格的形式显示的数据，支持单选，复选框，排序，分页,显示/隐藏列,固定标题滚动表,响应式设计，Ajax加载JSON数据，点击排序的列，卡片视图等。本文给大家介绍JS组件系列之Bootstrap table表格组件神器【终结篇】，一起学习吧
    2016-05-05
  • layui表格内放置图片,并点击放大的实例

    layui表格内放置图片,并点击放大的实例

    今天小编就为大家分享一篇layui表格内放置图片,并点击放大的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • Javascript中对象继承的实现小例

    Javascript中对象继承的实现小例

    这篇文章主要介绍了Javascript中对象继承的实现,需要的朋友可以参考下
    2014-05-05
  • ajax请求乱码的解决方法(中文乱码)

    ajax请求乱码的解决方法(中文乱码)

    这篇文章主要介绍了ajax请求乱码的解决方法(中文乱码),需要的朋友可以参考下
    2014-04-04

最新评论