webView.vue 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. <template>
  2. <view class="web-view-container">
  3. <web-view :src="webUrl" @message="handleMessage" @error="handleError"></web-view>
  4. </view>
  5. </template>
  6. <script setup>
  7. import { ref } from 'vue';
  8. import { onBackPress,onLoad } from '@dcloudio/uni-app';
  9. // 页面参数
  10. const webUrl = ref('');
  11. // 页面加载时接收参数
  12. onLoad((options) => {
  13. // 从跳转入参中获取url,如果没有则使用默认地址
  14. if (options.url) {
  15. // 解码URL,防止参数传递时的编码问题
  16. webUrl.value = decodeURIComponent(options.url);
  17. } else {
  18. // 默认地址,可以根据实际需求修改
  19. webUrl.value = 'about:blank';
  20. }
  21. });
  22. // 返回上一页
  23. function goBack() {
  24. uni.navigateBack();
  25. }
  26. // 处理web-view发送的消息
  27. function handleMessage(e) {
  28. console.log('web-view message:', e);
  29. // 可以根据实际需求处理来自web-view的消息
  30. }
  31. // 处理web-view加载错误
  32. function handleError(e) {
  33. console.error('web-view load error:', e);
  34. // 可以在这里添加错误处理逻辑,如显示错误页面等
  35. }
  36. // 监听返回按钮事件
  37. onBackPress(() => {
  38. goBack();
  39. return true;
  40. });
  41. </script>
  42. <style scoped lang="scss">
  43. .web-view-container {
  44. width: 100%;
  45. height: 100vh;
  46. background-color: #f5f5f5;
  47. }
  48. web-view {
  49. flex: 1;
  50. width: 100%;
  51. }
  52. </style>