uniapp plus.webview.create如何使用

在uniapp中使用plus.webview.create创建Webview时遇到了问题，具体应该如何正确使用这个API？能否提供一个完整的示例代码，说明各个参数的配置方法？我在安卓平台上测试时发现创建的Webview无法正常显示，不知道是参数设置问题还是其他原因导致的，希望有经验的朋友能够帮忙解答。

2 回复

使用 plus.webview.create 创建新 Webview 窗口：

let wv = plus.webview.create('https://example.com', 'webview1', {
  top: '0px',
  bottom: '0px'
});
wv.show(); // 显示窗口

参数：URL、ID、样式对象。记得调用 show() 显示。


在 UniApp 中，plus.webview.create 用于动态创建新的 Webview 窗口，适用于需要加载网页或自定义页面的场景。以下是使用方法和注意事项：

基本语法

let webview = plus.webview.create(url, id, styles, extras);
  • url：字符串，要加载的网页地址或本地页面路径（如 'https://example.com' 或 '/pages/subpage.vue'）。
  • id：字符串，Webview 的唯一标识，用于后续操作（如 'webview1'）。
  • styles：对象，定义窗口样式（如位置、大小）。
  • extras：对象，额外参数（可选）。

示例代码

// 创建并显示一个全屏 Webview
let wv = plus.webview.create(
  'https://uniapp.dcloud.io',
  'myWebview',
  {
    top: '0px',      // 距顶部距离
    bottom: '0px',   // 距底部距离
    left: '0px',     // 距左侧距离
    right: '0px',    // 距右侧距离
    scrollIndicator: 'none' // 隐藏滚动条
  }
);
wv.show('fade-in', 300); // 显示动画（渐入，300ms）

常见操作

  1. 显示/隐藏：
    wv.show();  // 显示
wv.hide();  // 隐藏
  2. 关闭窗口：
    wv.close(); // 关闭并销毁
  3. 监听事件（如页面加载完成）：
    wv.addEventListener('loaded', () => {
  console.log('页面加载完成');
});

注意事项

  • 平台差异：仅支持 App 端（H5 和小程序无效）。
  • 路径问题：本地页面需使用相对路径（如 '/pages/index/index'）。
  • 内存管理：不用的 Webview 及时关闭，避免内存泄漏。
  • 样式配置：通过 styles 调整窗口位置、大小，确保适配不同设备。

通过以上方法，可灵活控制 Webview 的创建和交互，适用于内嵌网页或动态页面需求。

回到顶部