大大1111

发布：2026-02-27 10:11
更新：2026-02-27 10:44
阅读：30

【报Bug】扩展插件开发这里，右侧的那个面板webview一直是空白的

分类：uni-app

bug反馈

产品分类： uniapp/H5

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： win11

HBuilderX类型：正式

HBuilderX版本号： 4.87

浏览器平台： Chrome

浏览器版本： 1

项目创建方式： HBuilderX

操作步骤：

就是我附件的项目，点那个hbuilder顶部的三角播放按键，点运行插件，然后在打开的新的页面里，选择试图-》选择插件扩展试图=》选择webview 展示1

预期结果：

希望右边的webview面板里面有内容

实际结果：

实际是空白

bug描述：

我这个是用hbuilder 按照你们文档，开发了一个简单的扩展插件，但是右边的那个面板webview一直是空白的，我想要基于这个面板开发一个可以交互的面板（比如往里面输入内容）

怎么都不显示，一直空白，也没有日志，能不能给一个可以运行的示例（只要右边的面板可以显示）

/**

@description 显示webview
*/
function showWebView(webviewPanel) {
console.log("show11111");

let webview = webviewPanel.webView;

var background = '';

let config = hx.workspace.getConfiguration();
let colorScheme = config.get('editor.colorScheme');
if (colorScheme == 'Monokai') {
background = 'rgb(39,40,34)'
} else if (colorScheme == 'Atom One Dark') {
background = 'rgb(40,44,53)'
} else {
background = 'rgb(255,250,232)'
};

webview.html =
`
<body style="background-color:${background};border:1px solid ${background};">
<div style="max-width:200px;">
<img src="https://download1.dcloud.net.cn/uploads/images/hbuilderx/hx_desc@1x.png" style="position: absolute;bottom: 0;left: 0;right: 0;width: 100%;margin: auto;">
</div>
<script>
// 以下两种写法等同
hbuilderx.onDidReceiveMessage((msg) => {});
window.addEventListener("message", (msg) => {});
```
        hbuilderx.postMessage({  
            command: 'alert',  
            text: 'HelloWorld'  
        });  
    </script>  
</body>  
```
`;

// 插件发送消息(可以被JSON化的数据)到webview
webview.postMessage({
command: "test"
});

// 插件接收webview发送的消息(可以被JSON化的数据)
webview.onDidReceiveMessage((msg) => {
if (msg.command == 'alert') {
hx.window.showInformationMessage(msg.text);
}
});
};

2026-02-27 10:11 负责人:无分享

5 个回复

Ask小助手

欢迎到专业群（ HBuilderX技术交流群）咨询，群中有相关专业的管理员和群友。

作为 DCloud 官方人员，我对这条 bug 反馈做如下评审：

反馈内容完整性
- ✅ 标题、描述、代码、复现步骤、预期/实际结果、环境信息均已给出
- ❗ 缺少 package.json 中 viewsContainers 与 views 的完整声明，也没有给出插件激活时 createWebView 的调用代码，官方无法直接运行。
- ❗ 没有提供最小可运行工程（zip 或仓库地址），仅靠文字描述无法 100 % 复现。
复现步骤清晰度
- 步骤描述基本清晰，但“附件的项目”并未实际上传，官方人员无法拿到对应源码。
- 需要补充：
  – package.json 中的完整 contributes 配置
  – 插件入口文件（extension.js / main.js）里激活时如何调用 hx.window.createWebView 并传入正确的 viewId
  – 是否已执行 hx.window.registerWebViewProvider（若使用 provider 方式）
预期结果合理性
- 官方文档示例中，只要 createWebView 成功且 webview.html 有内容，右侧视图即可正常渲染。因此“右侧空白”不符合预期，属于合理预期。
实际结果是否正常
- 空白说明 WebView 未成功创建或 html 未正确赋值，需排查：
  – viewId 与 package.json 中声明是否一致
  – createWebView 时是否传了 enableScripts:true（否则脚本不执行）
  – 插件是否已正确激活（activate 钩子是否触发）
知识库依据
- 官方文档-WebView 视图明确给出：
  – 必须先在 package.json 中声明 viewsContainers + views
  – 激活时调用 hx.window.createWebView(viewId, {enableScripts:true})
- 示例代码片段中已展示完整流程，用户代码缺少 createWebView 调用。
结论
- 该反馈描述的现象成立，但提供的代码不完整，官方无法直接复现。
- 根本原因 极大概率是：
  – 未正确调用 createWebView 或未传入 enableScripts:true
  – viewId 与声明不匹配
  – 插件未激活或生命周期钩子未触发
需要用户补充的信息
- 完整的 package.json（含 contributes）
- 插件入口文件里激活时调用 createWebView 的代码
- 最小可运行 demo（zip 或 git 地址）

可立即给出的官方最小可运行示例（基于知识库）

// package.json（关键片段）  
"contributes": {  
"viewsContainers": {  
"rightside": [{  
  "id": "myPanelContainer",  
  "title": "WebView Demo"  
}]  
},  
"views": {  
"myPanelContainer": [{  
  "id": "myWebView",  
  "title": "WebView 展示1"  
}]  
}  
}

// extension.js  
const hx = require('hbuilderx');  

function activate(context) {  
  let panel = hx.window.createWebView('myWebView', { enableScripts: true });  
  let webview = panel.webView;  
  webview.html = `  
    <body style="background:#fff;">  
      <h3>Hello WebView</h3>  
      <input placeholder="请输入内容" />  
      <script>  
        hbuilderx.postMessage({command:'ready',text:'WebView已就绪'});  
      </script>  
    </body>  
  `;  
  webview.onDidReceiveMessage(msg => {  
    if (msg.command === 'ready') {  
      hx.window.showInformationMessage(msg.text);  
    }  
  });  
}  

module.exports = { activate };

用户只需把以上两段代码放入对应文件，重新运行插件即可看到右侧 WebView 正常渲染。

内容为 AI 生成，仅供参考

大大1111 (作者) - 好的

我现在上传了附件，你看下能不能看到

empty1.zip

2026-02-27 10:19 分享

大大1111 (作者) - 好的

你看我附件给的示例，已经完全按照你说的写的，还是不行，我把代码也贴一下：
extension.js

// extension.js
const hx = require('hbuilderx');

module.exports = { activate };

{
"id": "your extension id",
"name": "your extension name",
"description": "your extension description",
"displayName": "your extension display name",
"version": "0.0.0",
"publisher": "your name",
"keywords": [],
"engines": {
"HBuilderX": "^2.7.0"
},
"categories": [
"Other"
],
"main": "./extension",
"activationEvents": [
"onCommand:extension.helloWorld"
],

// package.json（关键片段）  
"contributes": {  
"viewsContainers": {  
"rightside": [{  
  "id": "myPanelContainer",  
  "title": "WebView Demo"  
}]  
},  
"views": {  
"myPanelContainer": [{  
  "id": "myWebView",  
  "title": "WebView 展示1"  
}]  
}  
},  

"extensionDependencies": [  
    "plugin-manager"  
],  
"dependencies": {}

}

empty1.zip

2026-02-27 10:30 分享

大大1111 (作者) - 好的

你们为啥不直接提供一个demo项目呢，你们文档也不完善，我只需要一个demo项目，里面可以看到webview的正常运行

2026-02-27 10:33 分享

大大1111 (作者) - 好的

你们自己开发的那个chatgpt（不论直接安装，还是我用github) 都是空白，你看我截图，我还是刚刚重新下载了新的hbuilder 最新alpha版，都是这样，你们这个没人用么

2026-02-27 10:44 分享

要回复问题请先登录或注册

【报Bug】扩展插件开发这里，右侧的那个面板webview一直是空白的

操作步骤：

就是我附件的项目，点那个hbuilder顶部的三角播放按键，点运行插件，然后在打开的新的页面里，选择试图-》选择插件扩展试图=》选择webview 展示1

预期结果：

希望右边的webview面板里面有内容

实际结果：

实际是空白

bug描述：

5 个回复

公告

相关问题

【报Bug】扩展插件开发这里，右侧的那个面板webview一直是空白的

操作步骤： 就是我附件的项目，点那个hbuilder顶部的三角播放按键，点运行插件，然后在打开的新的页面里，选择试图-》选择插件扩展试图=》选择webview 展示1

预期结果： 希望右边的webview面板里面有内容

实际结果： 实际是空白

bug描述：

与内容相关的链接

5 个回复

公告

相关问题

操作步骤：

就是我附件的项目，点那个hbuilder顶部的三角播放按键，点运行插件，然后在打开的新的页面里，选择试图-》选择插件扩展试图=》选择webview 展示1

预期结果：

希望右边的webview面板里面有内容

实际结果：

实际是空白