webview.vue 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. console.log("开方url",this.url)
  27. } else{
  28. this.schemeUrl = decodeURIComponent(options.url);
  29. console.log('Scheme 数据:', this.schemeUrl); // 输出:rtlive://course?courseId=1
  30. // 尝试直接跳转(可能被微信拦截)
  31. this.tryOpenScheme();
  32. }
  33. }
  34. },
  35. methods: {
  36. // 尝试直接打开 Scheme(通常会被微信拦截)
  37. tryOpenScheme() {
  38. const timestamp = new Date().getTime(); // 获取当前时间戳
  39. this.url = `https://yjf.natappvip.cc/H5Demo/index.html?t=${timestamp}`;
  40. // 如果跳转失败,显示引导提示
  41. this.showTips = true;
  42. },
  43. // 复制链接到剪贴板
  44. copyLink() {
  45. uni.setClipboardData({
  46. data: this.schemeUrl,
  47. success: () => {
  48. uni.showToast({ title: '链接已复制,请在浏览器打开' });
  49. },
  50. });
  51. },
  52. // 监听 WebView 消息(可选)
  53. handleMessage(e) {
  54. console.log('WebView 消息:', e.detail);
  55. },
  56. },
  57. };
  58. </script>
  59. <style>
  60. .tips {
  61. padding: 20px;
  62. text-align: center;
  63. background: #f8f8f8;
  64. }
  65. </style>