webview.vue 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <template>
  2. <view>
  3. <!-- 用于显示提示信息 -->
  4. <view v-if="showTips" class="tips">
  5. <text>请点击右上角“...”选择“在浏览器打开”跳转应用</text>
  6. <button @click="copyLink">复制链接</button>
  7. </view>
  8. <!-- 内置 WebView 组件 -->
  9. <web-view v-if="url" :src="url" @message="handleMessage"></web-view>
  10. </view>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {
  16. url: '', // 要加载的 H5 链接
  17. schemeUrl: '', // 接收的 Scheme(如 rtlive://course?courseId=1)
  18. showTips: false, // 是否显示引导提示
  19. };
  20. },
  21. onLoad(options) {
  22. if (options.url) {
  23. if(options.type = 'prescribe') {
  24. // 开方
  25. this.url = decodeURIComponent(options.url);
  26. } else{
  27. this.schemeUrl = decodeURIComponent(options.url);
  28. console.log('Scheme 数据:', this.schemeUrl); // 输出:rtlive://course?courseId=1
  29. // 尝试直接跳转(可能被微信拦截)
  30. this.tryOpenScheme();
  31. }
  32. }
  33. },
  34. methods: {
  35. // 尝试直接打开 Scheme(通常会被微信拦截)
  36. tryOpenScheme() {
  37. const timestamp = new Date().getTime(); // 获取当前时间戳
  38. this.url = `https://yjf.natappvip.cc/H5Demo/index.html?t=${timestamp}`;
  39. // 如果跳转失败,显示引导提示
  40. this.showTips = true;
  41. },
  42. // 复制链接到剪贴板
  43. copyLink() {
  44. uni.setClipboardData({
  45. data: this.schemeUrl,
  46. success: () => {
  47. uni.showToast({ title: '链接已复制,请在浏览器打开' });
  48. },
  49. });
  50. },
  51. // 监听 WebView 消息(可选)
  52. handleMessage(e) {
  53. console.log('WebView 消息:', e.detail);
  54. },
  55. },
  56. };
  57. </script>
  58. <style>
  59. .tips {
  60. padding: 20px;
  61. text-align: center;
  62. background: #f8f8f8;
  63. }
  64. </style>