uni-app web-view nvue向网页传参，网页向nvue传参

 实现的逻辑很简单：就是用nvue的webview组件监听，网页加载成功后，然后用5+的API向网页注入一段JS代码。

1.务必保证网页是加载成功后再注入js发消息。

因为是通过5+的api注入js实现通讯，所以网页务必要在加载成功后才能去用js请求注入。如果网页压根没加载成功 那你注入js当然是无效的。所以要在webview组件中监听@pagestart来监听网页加载成功。

2.怎么传对象或字符串？

templeate代码示例
<web-view class="web-view" src="http://www.jalon888.com/webview.html" ref="webview" @pagestart="onPageStart" @onPostMessage="handlePostMessage" @pagefinish="onPageFinish" @error="" @receivedtitle="onReceivedTitle"></web-view>

 

js代码示例(传参对象)
this.$refs.webview.evalJs("jsfunction({'aaa':'bbb','ccc':'dddd'})"); // 这里面怎么拼接对象就自行补脑js知识了。

js代码示例(传参字符串，和对象没啥很大的区别啊。。。)
this.$refs.webview.evalJs("jsfunction('我就是个参数啊')"); // 这里面怎么拼接就自行补脑js知识了。

3.网页接收参数代码怎么写？

自己在你的网页中插入如下代码
// 如果你不想用 jsfunction 你自己改个名字呗，比如 zhangsan lisi ，记住这里改了对应上面的 this.$refs.webview.evalJs("jsfunction('我就是个参数啊')") 也需要修改 window.jsfunction = function(data){ console.log('data', data); }

4.网页怎么给uniapp发送通知消息？

其实就是利用uniapp的webview的js啦，没什么难点，文档webview文档

首先引入js-sdk代码 （注意，如果uniapp的webview-sdk升级了务必自行改成官方最新的js-sdk）
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>

然后写如下的js代码
// 先监听 UniAppJSBridgeReady document.addEventListener('UniAppJSBridgeReady', function() { // 下面就是js知识了，点击某个按钮后发消息。 document.getElementById('postMessage').addEventListener('click', function() { // 这里调用uniapp的api执行消息发送 uni.postMessage({ data: { user_id:111, user_token:'sa1s6a1s9a81s98q1w6q51s6a81s6q561sa65', user_info:{ nickname:'Jalon', headImg:'https://img-cdn-qiniu.dcloud.net.cn/uploads/avatar/000/86/77/53_avatar_max.jpg' } } }); }); });

uni-app web-view nvue向网页传参，网页向nvue传参https://ext.dcloud.net.cn/plugin?id=1120