uni-app小程序 web-view 打开后端接口地址重定向回调h5链接时，有时候加载空白异常

uni-app小程序 web-view 打开后端接口地址重定向回调h5链接时，有时候加载空白异常

开发环境 版本号 项目创建方式
Windows windows 10 HBuilderX

操作步骤：

  • oppo服务小程序，打开首页，点击右下角的客服图标，加载显示空白页面了

预期结果：

  • 能正常打开页面

实际结果：

  • 部分用户加载显示空白页面了

bug描述：

uniapp小程序 web-view 打开后端接口地址，重定向回调h5链接，有时候加载空白异常, 页面进度条都没有加载，删掉小程序打开，又加载正常了，部分用户有问题，非必现，偶发性

<view id="page-container" v-if="url">
<web-view :src="url" [@message](/user/message)="getMessage"></web-view>
</view>  

url = https://sow-service-test-cn.wanyol.com/oppo-server/wechat/redirect?callback=https%3A%2F%2Fccp-user-dev.oasqa.com%2Fclient%3Fk%3D1f63ac57c8fa052f83c5434a0825255f%26wp%3D1%26robotShuntSwitch%3D0%26language%3Dzh-cn%26templateId%3D41&ticket=8aBUUd91FNJPUr4uQjy4zx_shouming

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241119/e19679be6e3604105da373c1804ac829.png)

更多关于uni-app小程序 web-view 打开后端接口地址重定向回调h5链接时，有时候加载空白异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app小程序 web-view 打开后端接口地址重定向回调h5链接时，有时候加载空白异常的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在开发uni-app小程序时，使用<web-view>组件加载后端接口地址并处理重定向到H5链接时，确实可能会遇到加载空白页面或异常的情况。这通常与页面跳转逻辑、跨域问题、以及小程序的安全策略有关。以下是一个简化的代码示例和说明，帮助你排查和解决这个问题。

步骤 1: 配置后端接口

确保后端接口能够正确返回重定向信息。例如，如果后端使用的是Node.js和Express框架，你可以这样设置重定向：

// server.js
const express = require('express');
const app = express();

app.get('/redirect', (req, res) => {
    res.redirect(302, 'https://your-h5-page.com');
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

步骤 2: 在uni-app中配置web-view

在你的uni-app页面中，使用<web-view>组件加载后端接口地址：

<!-- pages/index/index.vue -->
<template>
  <view>
    <web-view :src="webViewUrl"></web-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'http://localhost:3000/redirect' // 替换为你的后端接口地址
    };
  },
  onLoad() {
    // 可以在这里添加额外的逻辑，比如根据用户状态动态设置webViewUrl
  }
};
</script>

<style>
/* 样式根据需要调整 */
</style>

步骤 3: 检查小程序安全策略

确保你的小程序配置文件中已经添加了必要的域名白名单。在manifest.json中配置：

{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false,
      "requestDomain": ["localhost", "your-h5-page.com"], // 添加你的后端和H5域名
      "wsRequestDomain": [],
      "uploadDomain": [],
      "downloadDomain": [],
      "debug": false
    }
  }
}

注意事项

  1. 跨域问题：如果后端接口和H5页面跨域，确保后端正确设置了CORS（跨域资源共享）头部。
  2. HTTPS：小程序要求所有网络请求必须使用HTTPS协议，确保你的后端接口和H5页面都支持HTTPS。
  3. 重定向次数：避免重定向次数过多导致小程序加载失败。

通过以上步骤，你应该能够定位和解决uni-app小程序中使用<web-view>加载后端接口地址并重定向到H5链接时出现的加载空白异常问题。如果问题依旧存在，建议检查网络请求的具体响应内容，以及小程序的控制台日志输出，以获取更多调试信息。

回到顶部