如何在vue项目中使用uni.webview.1.5.2.js，让其和uni-app开发的APP通信

分类：uni-app

vue_cli Vue uniapp

详细的需求是这样的

需要用 uni-app封装一个壳，然后通过web-view引入一个H5页面。

然后这个H5页面可以通过这个壳调用一些原生功能，这些功能uni-app都封装好了，所以直接使用就好。

这个H5项目是只用vue/vue-cli4 开发的

目前我知道怎么用html模式开发出上面说的效果

就是基于

https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js

·
现在卡在怎么在vue-cli上使用

2020-12-18 17:54 负责人:无分享

8 个回复

4***@qq.com - block

main.js

import * as uni from './utils/uni.webview.1.5.2.js.js'  

document.addEventListener("UniAppJSBridgeReady", function() {  
    Vue.prototype.myUni = uni  
});

使用

    sendMessage1() {     
      this.myUni.postMessage({  
        data: {  
          action: "uni.postMessage",  
          params: {  
            a: "a",  
            b: "b",  
            c: "c",  
            d: "d",  
          },  
        },  
      });  
    },  
    sendMessage2() {  
      this.myUni.webView.postMessage({  
        data: {  
          action: "uni.webView.postMessage",  
        },  
      });  
    },

姜同学

老哥，这么引入后不知道是不是没有触发UniAppJSBridgeReady,打印没有this.myUni对象，方法也用不了

2023-05-04 19:24
w***@163.com

回复 8***@qq.com: UniAppJSBridgeReady触发之后也依然没有this.myUni对象

2023-07-07 22:24
7***@qq.com

找了这么久，就老哥你的最对了，别的都不在点儿上

2024-01-04 10:35
6***@qq.com

有效了还是要引入的好给老哥点赞

2024-03-26 17:25

追光者

1 . main.js 里引入uni.webview.1.5.4.js，我是保存在项目里引入的

然后在需要用到的页面使用 uni.webView.xxx，注意一定要加上webView，例如：
```
uni.webView.navigateBack({  
delta: 1,  
})
```
花了半天时间，才找到这个语法，希望能帮助大家节省时间

6***@qq.com (作者)

https://github.com/vueadmin/h5plus

简单的写了一个demo

项目编译后上线的地址，就是被APP-webview引入的地址

Home.vue页面有相关代码

现在就是想知道怎么可以让2者通信上

麻烦各位大佬了

/public/index.html 引入了
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
如果是错误的方式，麻烦告知一下