需求:实现小程序打开特定业务域名。
现状:开发环境下,无论是否校验合法域名、web-view(业务域名),都是可以正常跳转并渲染webview的,截图如下:
但是,在线上环境下,出现“无法打开该网页”的提示,截图如下:
当前检查的内容如下:
1、已经在小程序开发者后台,配置了业务域名,截图如下:
2、域名已经通过工信部备案,截图如下:
3、相关代码片段
一、webview.wxml
<web-view src="{{url}}" bindmessage="onWebviewMessage" bindload="onWebviewLoad"></web-view>
二、webview.js
// pages/webview/webview.js
Page({
data: {
url: 'https://example.com' // 替换为你的网页地址
},
onLoad: function(options) {
// 可以在这里动态设置URL(例如通过options传递参数)
if (options.url) {
this.setData({
url: decodeURIComponent(options.url)
});
}
},
// 监听网页加载完成事件
onWebviewLoad: function(e) {
console.log('网页加载完成', e);
},
// 监听网页向小程序POST的消息
onWebviewMessage: function(e) {
console.log('收到网页消息:', e.detail.data);
// 处理网页发送的数据
}
});
三、index.js
gotoDetail(e) {
console.log(e)
let dataset = e.currentTarget.dataset;
let vid = dataset.vid;
let host = app.globalData.host;
wx.navigateTo({
url: '/pages/webview/webview?url=' + encodeURIComponent(host + '/customer/m/test')
})
}
四、CustomerController.java
@ResponseBody
@RequestMapping("/m/test")
public ModelAndView test(Video video) {
ModelAndView mv = new ModelAndView("/m/test");
return mv;
}
五、test.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,user-scalable=0">
<meta http-equiv="Cache-Control"
content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>教程</title>
<link rel="stylesheet"
href="<%=request.getContextPath()%>/pages/m/weui/style/weui.min.css" />
<link rel="stylesheet"
href="<%=request.getContextPath()%>/pages/m/weui/example/example.css" />
</head>
<body>
<input id="ContextPath" type="hidden"
value="<%=request.getContextPath()%>">
<div>
this is a webview test
</div>
</body>
</html>

1.完整报错信息:无法打开该页面不支持打开 https://waf.tencent.com/501page.html?u=https://mp.weixin.qq.com&amp;id=5adacb0205e7593902e3778f715e0dda-1742544366894704-37297-139767622252288-38186843226470508&amp;st=01&amp;v=aHR0cHMlM0ElMkYlMkZtcC53ZWl4aW4ucXEuY29tJTJGbXAlMkZ3YWVycnBhZ2UlM0ZhcHBpZCUzRHd4YzI0NmM4NjRmZTk4MTg0ZiUyNmRvbWFpbiUzRGh0dHBzJTI1M0ElMjUyRiUyNTJGZXhhbXBsZS5jb20lMjZyZWFzb24lM0QyJTI2dHlwZSUzRGp1bXAyaDVlcnIlMjZlcnJvcl9yZXQlM0QyJTI2cGFnZV91cmwlM0RodHRwcyUyNTNBJTI1MkYlMjUyRmV4YW1wbGUuY29tJTI1MkYlMjUyM3dlY2hhdF9yZWRpcmVjdCUyNmRldmljZXR5cGUlM0RpT1MxNy4wJTI2dmVyc2lvbiUzRDE4MDAzZjI4JTI2bGFuZyUzRHpoX0NOJTI2bmV0dHlwZSUzRFdJRkklMjZhc2NlbmUlM0Q0OSUyNnBhc3NfdGlja2V0JTNENFRZQjFMMDF2VFVQczVJZTdZZzVwSlFwNURZJTI1MkJpUDRlWlMwMldEJTI1MkZwRDhIWTgxYklLcXpUbGVJNGZjUyUyNTJGODNDRCUyNnd4X2hlYWRlciUzRDM=,请在“小程序右上角更多->反馈与投诉”中和开发者反馈。
2.问题触发流程:
点击小程序中一个按钮,按钮触发click事件,执行js代码:
gotoDetail(e) { console.log(e) let dataset = e.currentTarget.dataset; let vid = dataset.vid; let host = app.globalData.host; wx.navigateTo({ url: "/pages/webview/webview?url=" + encodeURIComponent(host +"/customer/m/test") }) }页面跳转webview,并执行webview页面的逻辑,将URL动态setter,并进行页面渲染。
3.可复现代码片段
https://developers.weixin.qq.com/s/Gnm5i9mQ8534