webView.vue 1.4 KB

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