uniapp无法使用substr_在uniapp中优雅地使用WebView

[TOC]

# 在uniapp中优雅地使用WebView

## 从webview页面传值到uniapp中

官方文档已经很详细了，首先在webview页面中引入相关依赖：

```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)) {

// 微信小程序 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('

}

```

然后通过`uni.postMessage`向uniapp传值：

```js

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

uni.postMessage({

data: {

action: 'message'

}

});

uni.getEnv(function(res) {

console.log('当前环境：' + JSON.stringify(res));

});

});

```

在uniapp中监听message：

```vue

view

web-view.webview(:src="url" @message="getMessage")

export default {

data() {

return {

url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",

}

},

methods: {

getMessage(event) {

let data = event.detail.data

console.log(data);

}

}

}

$webviewHeight = 420rpx

.webview

width 750rpx

height $webviewHeight

```

## 从uniapp中动态传值到webview页面

按照官方文档，从uniapp传值到webview中，只能通过query：

```vue

view

web-view.webview(:src="url")

export default {

data() {

return {

url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html?data=123",

}

}

}

$webviewHeight = 420rpx

.webview

width 750rpx

height $webviewHeight

```

在webview中解析query：

```js

let data = getQuery('data')

console.log(data); // 获取 uni-app 传来的值

// 取url中的参数值

function getQuery(name) {

// 正则：[找寻'&' + 'url参数名字' = '值' + '&']('&'可以不存在)

let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

let r = window.location.search.substr(1).match(reg);

console.log(r);

if(r != null) {

// 对参数值进行解码

return decodeURIComponent(r[2]);

}

return null;

}

```

但是，我们发现，通过向web-view的src中传值，只能传一次，如果参数改变了，没法动态传到webview。

对于这种需要动态传递参数的需求，我们可以使用动态创建webview达到目的，而不是通过webview组件。

实现如下：

```vue

view

export default {

data() {

return {

url: "https://zys201811.boringkiller.cn/shianonline/webview/vod.html",

}

},

mounted() {

// #ifdef APP-PLUS

var w = plus.webview.create(this.url + '?data=good');

w.show();

setTimeout(() => {

plus.webview.close(w);

setTimeout(() => {

w = plus.webview.create(this.url + '?data=123');

w.show();

}, 1000)

}, 1000)

// #endif

}

}

```

以上，通过`plus.webview.create`创建一个webview，然后显示。如果数据更新了，可以先关闭之前的一个webview，然后重新创建一个，再显示。

也可以直接使用open刷新页面：

```js

// #ifdef APP-PLUS

var w = plus.webview.open(this.url + '?data=good');

setTimeout(() => {

w = plus.webview.open(this.url + '?data=123');

}, 1000)

// #endif

```

相关API：

```js

// 创建窗口

WebviewObject plus.webview.create( url, id, styles, extras );

// 创建并打开窗口

WebviewObject plus.webview.open( url, id, styles, aniShow, duration, showedCB );

// 显示窗口

void plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );

// 隐藏窗口

void plus.webview.hide( id_wvobj, aniHide, duration, extras );

// 关闭窗口

void plus.webview.close( id_wvobj, aniClose, duration, extras );

```

## 调用webview中的方法

动态传值还有一种解决方案，就是通过`evalJs`方法直接调用webview中方法。

具体实现如下：

在模板中，通过ref暴露web-view元素：

```vue

web-view(:src="url" ref="wb")

```

在mounted生命周期的时候获取此元素：

```js

// #ifdef APP-PLUS

this.wb = this.$refs.wb

// #endif

```

在需要调用webview中方法的时候使用`evalJs`：

```js

// #ifdef APP-PLUS

this.wb.evalJs(`showAlert(${this.num})`)

// #endif

```

在webview页面定义对应的方法即可：

```js

function showAlert(num) {

alert(num)

}

```

从uniapp动态传值，可以使用这种方式。

注意：

1. 在nvue中，只有通过ref暴露webview节点才能拿到webview本身

2. 注意`evalJs`的拼写方式，官方文档是`evalJS`，但通过ref获取时，`S`应该为小写

## 参考资料

- [uniapp web-view](https://uniapp.dcloud.io/component/web-view)

- [h5+ webview](https://www.html5plus.org/doc/zh_cn/webview.html)

- [uniapp 窗体](https://uniapp.dcloud.io/api/window/window)

- [uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)](https://ask.dcloud.net.cn/article/35036)

- [在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯](https://ask.dcloud.net.cn/article/35083)

- [封装一个简单实用的 plusready 方法](https://ask.dcloud.net.cn/article/34922)

- [plus.webview.create()创建的webview 怎么接受网页发送的postMessage数据？](https://ask.dcloud.net.cn/question/93615)