uni-app web-view 加载第三方链接（unicloud的前端网页托管链接）失败

示例代码：

<template>  
    <view>  
        <web-view src="https://static-mp-a2f873cf-9e82-4201-a4bc-f5da55fa9121.next.bspapp.com" @error="error"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: ''  
            }  
        },  
        methods: {  
            error(e) {  
                console.log(e)  
            }  
        }  
    }  
</script>  

<style>  

</style>

操作步骤：

<template>  
    <view>  
        <web-view src="https://static-mp-a2f873cf-9e82-4201-a4bc-f5da55fa9121.next.bspapp.com" @error="error"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: ''  
            }  
        },  
        methods: {  
            error(e) {  
                console.log(e)  
            }  
        }  
    }  
</script>  

<style>  

</style>

预期结果：

成功加载外部链接

实际结果：

执行后失败

10:28:55.908 at https://g.alicdn.com/AWSC/et/1.77.3/et_f.js:3  
10:28:56.008 Uncaught SyntaxError: Unexpected token import at https://static-mp-a2f873cf-9e82-4201-a4bc-f5da55fa9121.next.bspapp.com/assets/index-15998083.js:6

bug描述：

web-view 加载第三方链接（unicloud的前端网页托管链接）有的手机可以正常加载，有的手机会报错加载不出。目前加载不出的那台手机是nova手机安卓系统8.1，如果换成其它不是unicloud托管的链接每个手机都能打开

wuwangju 1楼•21 天前

报什么错？

h691938207 2楼•21 天前

不好意思报错信息忘写了。 10:28:55.908 at https://g.alicdn.com/AWSC/et/1.77.3/et_f.js:3 10:28:56.008 Uncaught SyntaxError: Unexpected token import at https://static-mp-a2f873cf-9e82-4201-a4bc-f5da55fa9121.next.bspapp.com/assets/index-15998083.js:6

nodeper 3楼•21 天前

unicloud使用的是阿里云

yibo5220 4楼•21 天前

安卓手机自带webview版本多少？可以用web-view组件加载 https://www.mydevice.io/ 查看

bupafengyu 5楼•21 天前

webview版本号怎么看啊。。这里回复没办法放图片，我把图片回复到下面了

ionicwang 6楼•21 天前

webview版本号怎么看啊。。

bupafengyu 7楼•21 天前

chrome62无法支持vue3项目运行，最低chrome64

gougou168 8楼•21 天前

回复 DCloud_uniCloud_WYQ: 感谢官方大大，明白了，我改成vue2的可以正常显示了，，，谢谢

h691938207 9楼•21 天前

在 uni-app 中使用 web-view 组件加载第三方链接（例如 UniCloud 的前端网页托管链接）时，可能会遇到加载失败的情况。以下是一些可能的原因和解决方法：

1. 检查链接是否正确

确保你提供的链接是有效的，并且可以通过浏览器直接访问。
如果链接是 UniCloud 的前端网页托管链接，确保你的 UniCloud 服务已经正确部署，并且托管的前端页面可以正常访问。

2. 检查网络请求权限

在 manifest.json 文件中，确保你为 web-view 请求的域名配置了正确的网络请求权限。例如：

{
  "networkTimeout": {
    "request": 60000,
    "connectSocket": 60000,
    "uploadFile": 60000,
    "downloadFile": 60000
  },
  "app-plus": {
    "webView": {
      "domainList": [
        "https://your-unicloud-domain.com"
      ]
    }
  }
}

如果你没有配置域名白名单，web-view 可能无法加载外部链接。

3. 检查 UniCloud 的跨域设置

如果你在 web-view 中加载的页面需要请求后端 API，确保 UniCloud 的后端服务已经配置了跨域支持。

你可以在 UniCloud 的 uni-config-center 中配置跨域规则：

{
  "cors": {
    "origin": "*",
    "methods": "GET,POST,PUT,DELETE,OPTIONS",
    "headers": "Content-Type,Authorization"
  }
}

4. 检查 SSL 证书

如果你使用的是 HTTPS 链接，确保你的 UniCloud 前端网页托管服务已经配置了有效的 SSL 证书。
如果 SSL 证书无效或过期，web-view 可能会拒绝加载页面。

5. 调试错误信息

使用 web-view 的 @error 事件来捕获加载失败的错误信息：

<web-view :src="url" @error="handleError"></web-view>

methods: {
  handleError(e) {
    console.error('WebView加载失败:', e);
  }
}

通过控制台输出的错误信息，可以更好地定位问题。

6. 兼容性检查

确保你使用的 uni-app 版本支持 web-view 组件的最新功能。
如果你在特定平台（如微信小程序）上遇到问题，检查该平台对 web-view 的支持情况。

7. 尝试使用 iframe

如果 web-view 无法正常加载链接，可以尝试使用 iframe 标签（在 H5 环境下）来加载页面：

<iframe v-if="isH5" :src="url" style="width: 100%; height: 100%;"></iframe>

computed: {
  isH5() {
    return uni.getSystemInfoSync().platform === 'web';
  }
}