uniapp webview引入另一个uniapp打包的h5传值问题

1.文档背景：最近有朋友问我我的https://www.cnblogs.com/lizhao123/p/12005868.html这个webview传值收不到（原因引入了另一个uniapp打包的h5）

2.实现方案

　　首先你要引入的另一个uniapp的h5,这个uniapp项目中需要引入官方的https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js

　　引入方式有两种方式：1.在main.js中引入

import * as webview from '@/common/function/webview.1.5.3.js'

　　第二种引入方式：在根目录下创建template.h5.html内容如下

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <title>
            <%= htmlWebpackPlugin.options.title %>
        </title>
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
    </head>
    <body>
        <noscript>
            <strong>Please enable JavaScript to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
    <script type="text/javascript" src="/common/function/webview.1.5.3.js"></script>
    <script>
        document.addEventListener('UniAppJSBridgeReady', function() {
            uni.webView.getEnv(function(res) {
                console.log('当前环境：' + JSON.stringify(res));
            });
        });
    </script>
</html>

并在manifest.json的源码视图中添加刚刚的html

 "h5" : {
        "template" : "template.h5.html",
    }

这样uniapp的h5项目就可以使用一些特定的api了如传值到另一个APP中

        uni.webView.getEnv(function(res) {
                    console.log('当前环境：' +     JSON.stringify(res));
                });
    uni.webView.postMessage({
        data:{
            action: 'message',
            aaa:'112121'
            }
    })
    uni.webView.navigateBack()

 

二、APP的接收（记住这app不能运行到浏览器，需要真机运行才能接收到h5发送过来的值）原因：因为uniapp运行到浏览器是h5,你h5去引入另一个uniapp打包的h5，前者必须是app

//@message为接收的方法

<web-view :src="webView.src" @message="messageFn"></web-view>

 

posted @ 2022-04-20 15:46  奔跑吧前端（李钊）  阅读(1761)  评论(2)  编辑  收藏  举报