uni-app NVUE 下 webview 的 evalJs 方法无效
uni-app NVUE 下 webview 的 evalJs 方法无效
示例代码：
没有什么特别的代码，就是 NVUE 下 webview 的evalJs方法显示不存在。
### 操作步骤：
NVUE 下 创建一个webview指向远程或者本地的预期结果：
调用evalJs，如：this.$refs.webview.evalJs(“document.body.style.background =’#00FF00’”);
### 实际结果：
webview.evalJs is not a function bug描述：
NVUE 页面 下 webview 的evalJs 方法无效 （纯vue没试过），显示：webview.evalJs is not a function ， 打印webview 是有信息的：
[
{
"ref": "2521",
"type": "u-web-view",
"attr": {
"src": "https://www.xxx.com/xxx/",
"webviewStyles": {
"progress": {
"color": "#e42417"
}
}
},
"style": {
"width": "375",
"height": 508
},
"event": [
"message",
"onPostMessage"
]
}
]安卓华为真机调试运行和iOS 模拟器都一样，试了远程和本地页面都一样抱错。我记得原来是可以的，但是不知道从哪个版本开始出的问题。
P.S. 网页向app PostMessage 可以成功收到
### 信息整理成表格
| 信息项 | 描述 |
|-----------------|--------------------------------------------|
| 产品分类 | uniapp/App |
| PC开发环境操作系统 | Mac |
| PC开发环境操作系统版本号 | 14.0 (23A344) |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.96 |
| 手机系统 | Android |
| 手机系统版本号 | Android 12 |
| 手机厂商 | 华为 |
| 手机机型 | nova |
| 页面类型 | nvue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
刚试了，可以 ，可能是修改的网址改了 background 体现不出来
<template>
<view>
<web-view ref=“webview” class=“webview” src=“https://uniapp.dcloud.net.cn/” @onPostMessage=“handlePostMessage”></web-view>
<button class=“button” @click=“evalJs”>evalJs(改变webview背景颜色)</button>
</view>
</template>
在 uni-app 的 nvue 页面中，webview 组件的 evalJs 方法在某些情况下可能会无效。这通常是由于 nvue 页面的渲染机制与 vue 页面不同，导致 webview 的行为也有所差异。
以下是一些可能的原因和解决方案：
1. 确保 webview 已加载完成
evalJs 方法需要在 webview 页面加载完成后才能执行。如果 webview 页面尚未加载完成，evalJs 方法将无法生效。
解决方案：
在 webview 的 @load 事件中执行 evalJs 方法，确保页面已加载完成。
<template>
<webview ref="webview" :src="url" @load="onWebviewLoad"></webview>
</template>
<script>
export default {
data() {
return {
url: 'https://example.com'
};
},
methods: {
onWebviewLoad() {
this.$refs.webview.evalJs('alert("Webview loaded!");');
}
}
};
</script>2. 检查 webview 的 ref 是否正确
确保 webview 组件的 ref 属性设置正确，并且通过 this.$refs.webview 能够正确获取到 webview 实例。
解决方案：
检查 ref 属性是否正确设置，并确保通过 this.$refs.webview 获取到 webview 实例。
<webview ref="webview" :src="url"></webview>this.$refs.webview.evalJs('alert("Hello, World!");');3. 检查 evalJs 的代码是否正确
evalJs 方法执行的 JavaScript 代码必须是有效的。如果代码有语法错误或逻辑问题，evalJs 方法将无法正常执行。
解决方案：
确保 evalJs 方法中的 JavaScript 代码是正确的，并且可以在浏览器中正常运行。
this.$refs.webview.evalJs('console.log("Hello, World!");');4. 使用 uni-app 的 plus API
如果 webview 的 evalJs 方法仍然无效，可以尝试使用 uni-app 的 plus API 来执行 JavaScript 代码。
解决方案：
使用 plus.webview API 来获取 webview 实例并执行 JavaScript 代码。
const currentWebview = this.$scope.$getAppWebview();
currentWebview.evalJS('alert("Hello, World!");');5. 检查 nvue 页面的兼容性
nvue 页面的渲染机制与 vue 页面不同，某些 API 在 nvue 页面中可能无法正常工作。如果以上方法都无法解决问题，可能需要考虑使用 vue 页面来代替 nvue 页面。
解决方案：
如果 nvue 页面的 webview 组件无法满足需求，可以尝试使用 vue 页面来实现相同的功能。
6. 更新 uni-app 版本
确保你使用的是最新版本的 uni-app，因为旧版本可能存在一些已知的 bug 或兼容性问题。
解决方案：
更新 uni-app 到最新版本，并重新测试 evalJs 方法。
npm update [@dcloudio](/user/dcloudio)/uni-app