vue3+ts写的H5以外链webview方式内嵌在uniapp中,点击H5页面传值到uniapp其他页面

用vue3+ts写的一个H5项目,内嵌在uniapp中

uniapp 要新建一个pages/webview/html-webview 页面

<web-view :src="weburl"  allow :fullscreen="true"></web-view>

weburl 即完整外链链接,有些还需要拼接token

h5端引用文件

/* eslint-disable */
!(function (e, n) {
  'object' == typeof exports && 'undefined' != typeof module
    ? (module.exports = n())
    : 'function' == typeof define && define.amd
    ? define(n)
    : ((e = e || self).uni = n());
})(this, function () {
  'use strict';
  try {
    var e = {};
    Object.defineProperty(e, 'passive', {
      get: function () {
        !0;
      }
    }),
      window.addEventListener('test-passive', null, e);
  } catch (e) {}
  var n = Object.prototype.hasOwnProperty;
  function i(e, i) {
    return n.call(e, i);
  }
  var t = [];
  function r() {
    return window.__dcloud_weex_postMessage || window.__dcloud_weex_;
  }
  var o = function (e, n) {
      var i = { options: { timestamp: +new Date() }, name: e, arg: n };
      if (r()) {
        if ('postMessage' === e) {
          var o = { data: [n] };
          return window.__dcloud_weex_postMessage
            ? window.__dcloud_weex_postMessage(o)
            : window.__dcloud_weex_.postMessage(JSON.stringify(o));
        }
        var a = {
          type: 'WEB_INVOKE_APPSERVICE',
          args: { data: i, webviewIds: t }
        };
        window.__dcloud_weex_postMessage
          ? window.__dcloud_weex_postMessageToService(a)
          : window.__dcloud_weex_.postMessageToService(JSON.stringify(a));
      }
      if (!window.plus)
        return window.parent.postMessage(
          { type: 'WEB_INVOKE_APPSERVICE', data: i, pageId: '' },
          '*'
        );
      if (0 === t.length) {
        var d = plus.webview.currentWebview();
        if (!d) throw new Error('plus.webview.currentWebview() is undefined');
        var s = d.parent(),
          w = '';
        (w = s ? s.id : d.id), t.push(w);
      }
      if (plus.webview.getWebviewById('__uniapp__service'))
        plus.webview.postMessageToUniNView(
          { type: 'WEB_INVOKE_APPSERVICE', args: { data: i, webviewIds: t } },
          '__uniapp__service'
        );
      else {
        var u = JSON.stringify(i);
        plus.webview
          .getLaunchWebview()
          .evalJS(
            'UniPlusBridge.subscribeHandler("'
              .concat('WEB_INVOKE_APPSERVICE', '",')
              .concat(u, ',')
              .concat(JSON.stringify(t), ');')
          );
      }
    },
    a = {
      navigateTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        o('navigateTo', { url: encodeURI(n) });
      },
      navigateBack: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.delta;
        o('navigateBack', { delta: parseInt(n) || 1 });
      },
      switchTab: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        o('switchTab', { url: encodeURI(n) });
      },
      reLaunch: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        o('reLaunch', { url: encodeURI(n) });
      },
      redirectTo: function () {
        var e =
            arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
          n = e.url;
        o('redirectTo', { url: encodeURI(n) });
      },
      getEnv: function (e) {
        r() ? e({ nvue: !0 }) : window.plus ? e({ plus: !0 }) : e({ h5: !0 });
      },
      postMessage: function () {
        var e =
          arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
        o('postMessage', e.data || {});
      }
    },
    d = /uni-app/i.test(navigator.userAgent),
    s = /Html5Plus/i.test(navigator.userAgent),
    w = /complete|loaded|interactive/;
  var u =
    window.my &&
    navigator.userAgent.indexOf(
      ['t', 'n', 'e', 'i', 'l', 'C', 'y', 'a', 'p', 'i', 'l', 'A']
        .reverse()
        .join('')
    ) > -1;
  var g =
    window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
  var v =
    window.qq &&
    window.qq.miniProgram &&
    /QQ/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var c =
    window.tt &&
    window.tt.miniProgram &&
    /toutiaomicroapp/i.test(navigator.userAgent);
  var m =
    window.wx &&
    window.wx.miniProgram &&
    /micromessenger/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var p = window.qa && /quickapp/i.test(navigator.userAgent);
  var f =
    window.ks &&
    window.ks.miniProgram &&
    /micromessenger/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var l =
    window.tt &&
    window.tt.miniProgram &&
    /Lark|Feishu/i.test(navigator.userAgent);
  var _ =
    window.jd &&
    window.jd.miniProgram &&
    /micromessenger/i.test(navigator.userAgent) &&
    /miniProgram/i.test(navigator.userAgent);
  var E =
    window.xhs &&
    window.xhs.miniProgram &&
    /xhsminiapp/i.test(navigator.userAgent);
  for (
    var h,
      P = function () {
        (window.UniAppJSBridge = !0),
          document.dispatchEvent(
            new CustomEvent('UniAppJSBridgeReady', {
              bubbles: !0,
              cancelable: !0
            })
          );
      },
      b = [
        function (e) {
          if (d || s)
            return (
              window.__dcloud_weex_postMessage || window.__dcloud_weex_
                ? document.addEventListener('DOMContentLoaded', e)
                : window.plus && w.test(document.readyState)
                ? setTimeout(e, 0)
                : document.addEventListener('plusready', e),
              a
            );
        },
        function (e) {
          if (m)
            return (
              window.WeixinJSBridge && window.WeixinJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('WeixinJSBridgeReady', e),
              window.wx.miniProgram
            );
        },
        function (e) {
          if (v)
            return (
              window.QQJSBridge && window.QQJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('QQJSBridgeReady', e),
              window.qq.miniProgram
            );
        },
        function (e) {
          if (u) {
            document.addEventListener('DOMContentLoaded', e);
            var n = window.my;
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv
            };
          }
        },
        function (e) {
          if (g)
            return (
              document.addEventListener('DOMContentLoaded', e),
              window.swan.webView
            );
        },
        function (e) {
          if (c)
            return (
              document.addEventListener('DOMContentLoaded', e),
              window.tt.miniProgram
            );
        },
        function (e) {
          if (p) {
            window.QaJSBridge && window.QaJSBridge.invoke
              ? setTimeout(e, 0)
              : document.addEventListener('QaJSBridgeReady', e);
            var n = window.qa;
            return {
              navigateTo: n.navigateTo,
              navigateBack: n.navigateBack,
              switchTab: n.switchTab,
              reLaunch: n.reLaunch,
              redirectTo: n.redirectTo,
              postMessage: n.postMessage,
              getEnv: n.getEnv
            };
          }
        },
        function (e) {
          if (f)
            return (
              window.WeixinJSBridge && window.WeixinJSBridge.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('WeixinJSBridgeReady', e),
              window.ks.miniProgram
            );
        },
        function (e) {
          if (l)
            return (
              document.addEventListener('DOMContentLoaded', e),
              window.tt.miniProgram
            );
        },
        function (e) {
          if (_)
            return (
              window.JDJSBridgeReady && window.JDJSBridgeReady.invoke
                ? setTimeout(e, 0)
                : document.addEventListener('JDJSBridgeReady', e),
              window.jd.miniProgram
            );
        },
        function (e) {
          if (E) return window.xhs.miniProgram;
        },
        function (e) {
          return document.addEventListener('DOMContentLoaded', e), a;
        }
      ],
      y = 0;
    y < b.length && !(h = b[y](P));
    y++
  );
  h || (h = {});
  var B = 'undefined' != typeof uni ? uni : {};
  if (!B.navigateTo) for (var S in h) i(h, S) && (B[S] = h[S]);
  return (B.webView = h), B;
});
export default uni;

uniapp官方文件需要改造下,export default uni  为了导出uni,看这段js可发现是在window上,满足vue3,ts,该代码可直接复制本地保存为 uni.webview.js 文件

需要传值的页面引用

import uni from '@/utils/uni.webview.js';

点击事件跳转uniapp中页面并传值

uni.navigateTo({
    url: `/pages/xxx/xx?skiptype=h5&code=${item.code}&start_date=${item.start_date}&end_date=${item.end_date}`
});

uniapp 跳转到的页面可获取H5传过来的值

onLoad((option) => {
  if (option?.skiptype == 'h5') {
    //用类型判断是从哪儿跳转的
    //可以打印到H5传过来的值
    console.log(option?.code,option?.start_date,option?.end_date)
  } else {
    console.log('原先uniapp页面跳转获取值')
  }
});

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值