[TOC]

## test.nvue

> 如果调用webview的页面使用nvuew才可以实现彼此实时通讯；

> nvue 调用 webview 需要手动指定宽高，不像vue页面的 webview是自动铺满，如果不需要进行通讯情况下，可采用vue

~~~

export default {

methods:{

message:function(res){

console.log(res)

}

}

}

~~~

## h5页面

> 参考 https://uniapp.dcloud.io/static/web-view.html

~~~

网络网页

var userAgent = navigator.userAgent;

if (userAgent.indexOf('AlipayClient') > -1) {

// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 JS 文件。

document.writeln('

} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {

// QQ 小程序

document.write('

} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {

// 微信小程序 JS-SDK 如果不需要兼容微信小程序，则无需引用此 JS 文件。

document.write('

} else if (/toutiaomicroapp/i.test(userAgent)) {

// 头条小程序 JS-SDK 如果不需要兼容头条小程序，则无需引用此 JS 文件。

document.write('

} else if (/swan/i.test(userAgent)) {

// 百度小程序 JS-SDK 如果不需要兼容百度小程序，则无需引用此 JS 文件。

document.write('

} else if (/quickapp/i.test(userAgent)) {

// quickapp

document.write('

}

if (!/toutiaomicroapp/i.test(userAgent)) {

document.querySelector('.post-message-section').style.visibility = 'visible';

}

document.addEventListener('UniAppJSBridgeReady', function() {

document.querySelector('.btn-list').addEventListener('click', function(evt) {

var target = evt.target;

if (target.tagName === 'BUTTON') {

var action = target.getAttribute('data-action');

switch (action) {

case 'switchTab':

uni.switchTab({

url: '/pages/tabBar/API/API'

});

break;

case 'reLaunch':

uni.reLaunch({

url: '/pages/tabBar/component/component'

});

break;

case 'navigateBack':

uni.navigateBack({

delta: 1

});

break;

default:

uni[action]({

url: '/pages/component/button/button'

});

break;

}

}

});

document.getElementById('postMessage').addEventListener('click', function() {

uni.postMessage({

data: {

action: 'message'

}

});

});

});

~~~

## 官方教程

> https://uniapp.dcloud.io/component/web-view