首页uniapp webview封装使用

uniapp webview封装使用

时间: 2025-02-08 16:38:48 浏览: 51

### 封装和使用 WebView 组件在 UniApp 中，为了更方便地管理和操作 `WebView` 组件，可以创建一个自定义组件来封装常见的功能。这不仅提高了代码的可维护性和重用率，还简化了页面间的导航逻辑。 #### 创建自定义 WebView 组件首先，在项目中新建一个名为 `my-webview.vue` 的文件作为自定义组件： ```vue <template> <view class="web-view-container"> <web-view :src="url"></web-view> </view> </template> <script> export default { props: ['path', 'title'], computed: { url() { return decodeURIComponent(this.path); } }, onLoad(option) { uni.setNavigationBarTitle({ title: option.title || '' }); } }; </script> <style scoped> .web-view-container { width: 100%; height: 100vh; } </style> ``` 此部分实现了基本的 `WebView` 功能，并通过计算属性处理 URL 解码[^2]。 #### 使用自定义 WebView 组件接着可以在其他页面或组件里轻松调用这个新创建的 `WebView` 组件。例如，在某个 Vue 文件中的 `<script>` 部分加入如下方法用于跳转至指定网页地址： ```javascript methods: { goToCustomWebView(path, title) { uni.navigateTo({ url: '../components/my-webview?path=' + encodeURIComponent(path) + '&title=' + title, }); } } ``` 上述函数接受两个参数——目标路径 (`path`) 和标题 (`title`) ，并通过 `navigateTo()` API 实现页面切换的同时传递所需数据给子页面。对于需要频繁访问外部链接的应用场景来说，这种方式极大地减少了重复编码的工作量并增强了用户体验的一致性。

阅读全文