uni-app web-view 小程序端加载页面空白

uni-app web-view 小程序端加载页面空白

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 20H2
HBuilderX类型 正式
HBuilderX版本号 2.7.14
第三方开发者工具版本号 1.02.2004020
基础库版本号 1.9.90
项目创建方式 HBuilderX

示例代码：

this.problem_id = 1037//options.problem_id;
this.token = uni.getStorageSync('token');
this.url = 'https://xx.xxxxx.com/wxproblem/#/problem?problem_id='+ this.problem_id +'&token='+this.token  

<web-view :webview-styles="webviewStyles" :src="url"></web-view>

操作步骤：

…

预期结果：

…

实际结果：

…

bug描述：

web-view 小程序工具 加载页面空白

<web-view :webview-styles="webviewStyles" :src="url"></web-view>

更多关于uni-app web-view 小程序端加载页面空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

楼主解决了么

更多关于uni-app web-view 小程序端加载页面空白的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app小程序中使用web-view组件出现页面空白是常见问题，主要与URL格式、域名配置和加载机制有关。

核心排查点：

  1. 业务域名配置

    • 微信小程序要求web-view加载的域名必须在小程序后台的"开发-开发设置-业务域名"中配置
    • 请确认https://xx.xxxxx.com已正确配置，且域名需要HTTPS协议

  2. URL编码问题

    • URL参数包含特殊字符可能导致解析异常
    • 建议对参数进行编码：
    this.url = `https://xx.xxxxx.com/wxproblem/#/problem?problem_id=${encodeURIComponent(this.problem_id)}&token=${encodeURIComponent(this.token)}`
回到顶部