通过自定义协议检测,调起pc客户端(有,调起 无,弹窗提示)

2019-10-09  本文已影响0人  小睿同学

1.新建protocolcheck.js文件(内容是github里一个大神写的):

内容如下:
(function(f){
    if(typeof exports==="object"&&typeof module!=="undefined"){
        module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)
        }else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){
            g=global
        }else if(typeof self!=="undefined"){
            g=self
        }else{
            g=this
        }
        g.protocolCheck = f()
    }
}
)
(function(){
    var define,module,exports;
    return (function e(t,n,r){
        function s(o,u){
            if(!n[o]){if(!t[o]){
                var a=typeof require=="function"&&require;
                if(!u&&a)return a(o,!0);
                if(i)return i(o,!0);
                var f=new Error("Cannot find module '"+o+"'");
                throw f.code="MODULE_NOT_FOUND",f
            }
            var l=n[o]={
                exports:{}};
                t[o][0].call(l.exports,function(e){
                    var n=t[o][1][e];
                    return s(n?n:e)},l,l.exports,e,t,n,r)
                }
                return n[o].exports
            }
            var i=typeof require=="function"&&require;
            for(var o=0;o<r.length;o++)s(r[o]);
            return s
        })
        ({1:[function(require,module,exports){
            
function _registerEvent(target, eventType, cb) {
    if (target.addEventListener) {
        target.addEventListener(eventType, cb);
        return {
            remove: function () {
                target.removeEventListener(eventType, cb);
            }
        };
    } else {
        target.attachEvent(eventType, cb);
        return {
            remove: function () {
                target.detachEvent(eventType, cb);
            }
        };
    }
}

function _createHiddenIframe(target, uri) {
    var iframe = document.createElement("iframe");
    iframe.src = uri;
    iframe.id = "hiddenIframe";
    iframe.style.display = "none";
    target.appendChild(iframe);

    return iframe;
}

function openUriWithHiddenFrame(uri, failCb, successCb) {

    var timeout = setTimeout(function () {
        failCb();
        handler.remove();
    }, 1000);

    var iframe = document.querySelector("#hiddenIframe");
    if (!iframe) {
        iframe = _createHiddenIframe(document.body, "about:blank");
    }

    var handler = _registerEvent(window, "blur", onBlur);

    function onBlur() {
        clearTimeout(timeout);
        handler.remove();
        successCb();
    }

    iframe.contentWindow.location.href = uri;
}

function openUriWithTimeoutHack(uri, failCb, successCb) {
    
    var timeout = setTimeout(function () {
        failCb();
        handler.remove();
    }, 1000);

    //handle page running in an iframe (blur must be registered with top level window)
    var target = window;
    while (target != target.parent) {
        target = target.parent;
    }

    var handler = _registerEvent(target, "blur", onBlur);

    function onBlur() {
        clearTimeout(timeout);
        handler.remove();
        successCb();
    }

    window.location = uri;
}

function openUriUsingFirefox(uri, failCb, successCb) {
    var iframe = document.querySelector("#hiddenIframe");

    if (!iframe) {
        iframe = _createHiddenIframe(document.body, "about:blank");
    }

    try {
        iframe.contentWindow.location.href = uri;
        successCb();
    } catch (e) {
        if (e.name == "NS_ERROR_UNKNOWN_PROTOCOL") {
            failCb();
        }
    }
}

function openUriUsingIEInOlderWindows(uri, failCb, successCb) {
    if (getInternetExplorerVersion() === 10) {
        openUriUsingIE10InWindows7(uri, failCb, successCb);
    } else if (getInternetExplorerVersion() === 9 || getInternetExplorerVersion() === 11) {
        openUriWithHiddenFrame(uri, failCb, successCb);
    } else {
        openUriInNewWindowHack(uri, failCb, successCb);
    }
}

function openUriUsingIE10InWindows7(uri, failCb, successCb) {
    var timeout = setTimeout(failCb, 1000);
    window.addEventListener("blur", function () {
        clearTimeout(timeout);
        successCb();
    });

    var iframe = document.querySelector("#hiddenIframe");
    if (!iframe) {
        iframe = _createHiddenIframe(document.body, "about:blank");
    }
    try {
        iframe.contentWindow.location.href = uri;
    } catch (e) {
        failCb();
        clearTimeout(timeout);
    }
}

function openUriInNewWindowHack(uri, failCb, successCb) {
    var myWindow = window.open('', '', 'width=0,height=0');

    myWindow.document.write("<iframe src='" + uri + "'></iframe>");

    setTimeout(function () {
        try {
            myWindow.location.href;
            myWindow.setTimeout("window.close()", 1000);
            successCb();
        } catch (e) {
            myWindow.close();
            failCb();
        }
    }, 1000);
}

function openUriWithMsLaunchUri(uri, failCb, successCb) {
    navigator.msLaunchUri(uri,
        successCb,
        failCb
    );
}

function checkBrowser() {
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var ua = navigator.userAgent.toLowerCase();
    return {
        isOpera   : isOpera,
        isFirefox : typeof InstallTrigger !== 'undefined',
        isSafari  : (~ua.indexOf('safari') && !~ua.indexOf('chrome')) || Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0,
        isIOS     : /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream,
        isChrome  : !!window.chrome && !isOpera,
        isIE      : /*@cc_on!@*/false || !!document.documentMode // At least IE6
    }
}

function getInternetExplorerVersion() {
    var rv = -1;
    if (navigator.appName === "Microsoft Internet Explorer") {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null)
            rv = parseFloat(RegExp.$1);
    }
    else if (navigator.appName === "Netscape") {
        var ua = navigator.userAgent;
        var re = new RegExp("Trident/.*rv:([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) {
            rv = parseFloat(RegExp.$1);
        }
    }
    return rv;
}

module.exports = function(uri, failCb, successCb, unsupportedCb) {
    function failCallback() {
        failCb && failCb();
    }

    function successCallback() {
        successCb && successCb();
    }

    if (navigator.msLaunchUri) { //for IE and Edge in Win 8 and Win 10
        openUriWithMsLaunchUri(uri, failCb, successCb);
    } else {
        var browser = checkBrowser();

        if (browser.isFirefox) {
            openUriUsingFirefox(uri, failCallback, successCallback);
        } else if (browser.isChrome || browser.isIOS) {
            openUriWithTimeoutHack(uri, failCallback, successCallback);
        } else if (browser.isIE) {
            openUriUsingIEInOlderWindows(uri, failCallback, successCallback);
        } else if (browser.isSafari) {
            openUriWithHiddenFrame(uri, failCallback, successCallback);
        } else {
            unsupportedCb();
            //not supported, implement please
        }
    }
}

},{}]},{},[1])(1)
});

2.引入jQuery(也可本地引入):

<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

3.引入一个好看的弹窗:

新建一个dialog.js文件
内容如下:

! function(n) {
    var t = {};

    function e(r) {
        if(t[r]) return t[r].exports;
        var o = t[r] = {
            i: r,
            l: !1,
            exports: {}
        };
        return n[r].call(o.exports, o, o.exports, e), o.l = !0, o.exports
    }
    e.m = n, e.c = t, e.d = function(n, t, r) {
        e.o(n, t) || Object.defineProperty(n, t, {
            enumerable: !0,
            get: r
        })
    }, e.r = function(n) {
        "undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(n, Symbol.toStringTag, {
            value: "Module"
        }), Object.defineProperty(n, "__esModule", {
            value: !0
        })
    }, e.t = function(n, t) {
        if(1 & t && (n = e(n)), 8 & t) return n;
        if(4 & t && "object" == typeof n && n && n.__esModule) return n;
        var r = Object.create(null);
        if(e.r(r), Object.defineProperty(r, "default", {
                enumerable: !0,
                value: n
            }), 2 & t && "string" != typeof n)
            for(var o in n) e.d(r, o, function(t) {
                return n[t]
            }.bind(null, o));
        return r
    }, e.n = function(n) {
        var t = n && n.__esModule ? function() {
            return n.default
        } : function() {
            return n
        };
        return e.d(t, "a", t), t
    }, e.o = function(n, t) {
        return Object.prototype.hasOwnProperty.call(n, t)
    }, e.p = "", e(e.s = 1)
}([function(n, t) {
    n.exports = '<div class="ui__alert_bg in"></div>\n<div class="ui__alert_content in">\n    <div class="ui__content_body"></div>\n    <div class="ui__content_foot"></div>\n</div>'
}, function(n, t, e) {
    "use strict";
    e.r(t);
    e(2);
    var r = e(0),
        o = e.n(r);
    document.createElement("div").innerHTML = o.a,
        function(n, t) {
            n.alert = i("alert"), n.confirm = i("confirm"), n.dialog = i("alert");
            var e = 9999,
                r = t.createElement("style");

            function i(n) {
                return function(r) {
                    "string" == typeof r && (r = {
                        content: r
                    }), !1 === r.title && r.title, r.type = n;
                    var i = t.createElement("div");
                    i.className = "ui__alert", i.style.zIndex = e++, i.innerHTML = o.a;
                    var s = `<h4 class="ui__title">${r.title || "友情提示"}</h4>`;
                    s += `<div>${r.content}</div>`;
                    var c = `<a class="btn_done">${r.doneText || "确认"}</a>`;
                    return "confirm" === r.type && (c += `<a class="btn_cancel">${r.cancelText || "取消"}</a>`), i.querySelector(".ui__content_body").innerHTML = s, i.querySelector(".ui__content_foot").innerHTML = c, t.body.appendChild(i), new Promise((n, t) => {
                        i.querySelector(".btn_done").onclick = function() {
                            a(i), n()
                        }, "confirm" === r.type && (i.querySelector(".btn_cancel").onclick = function() {
                            a(i), t()
                        })
                    })
                }
            }

            function a(n) {
                var e = n.children[0];
                e.addEventListener("animationend", () => {
                    t.body.removeChild(n)
                }), e.addEventListener("webkitAnimationEnd", () => {
                    t.body.removeChild(n)
                }), n.children[0].className = "ui__alert_bg out", n.children[1].className = "ui__alert_content out"
            }
            r.innerHTML = ".", t.head.appendChild(r), n.toast = function(n) {
                "string" == typeof n && (n = {
                    content: n
                });
                var e = t.createElement("div");
                e.innerHTML = `<div class="ui__toast_bg"></div><div class="ui__toast_text">${n.content}</div>`, t.body.appendChild(e);
                var r = setTimeout(() => {
                    clearTimeout(r), t.body.removeChild(e)
                }, n.time || 2e3)
            }
        }(window, document)
}, function(n, t, e) {
    var r = e(3);
    "string" == typeof r && (r = [
        [n.i, r, ""]
    ]);
    var o = {
        hmr: !0,
        transform: void 0,
        insertInto: void 0
    };
    e(5)(r, o);
    r.locals && (n.exports = r.locals)
}, function(n, t, e) {
    (n.exports = e(4)(!1)).push([n.i, ".ui__alert * {\n  padding: 0;\n  margin: 0;\n}\n.ui__alert .ui__alert_bg {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  position: fixed;\n  background: rgba(0, 0, 0, 0.2);\n  -webkit-animation-duration: 500ms;\n          animation-duration: 500ms;\n}\n.ui__alert .ui__alert_bg.in {\n  -webkit-animation-name: bgFadeIn;\n          animation-name: bgFadeIn;\n}\n.ui__alert .ui__alert_bg.out {\n  -webkit-animation-name: bgFadeOut;\n          animation-name: bgFadeOut;\n}\n.ui__alert .ui__alert_content {\n  text-align: center;\n  position: fixed;\n  min-width: 250px;\n  max-width: 280px;\n  z-index: 9999;\n  background: #fff;\n  border-radius: 10px;\n  left: 50%;\n  top: 50%;\n  -webkit-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n  -webkit-animation-duration: 500ms;\n          animation-duration: 500ms;\n}\n.ui__alert .ui__alert_content.in {\n  -webkit-animation-name: contentZoomIn;\n          animation-name: contentZoomIn;\n}\n.ui__alert .ui__alert_content.out {\n  -webkit-animation-name: contentZoomOut;\n          animation-name: contentZoomOut;\n}\n.ui__alert .ui__alert_content .ui__content_body {\n  font-size: 14px;\n  padding: 18px;\n  border-bottom: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_body .ui__title {\n  margin-bottom: 5px;\n  font-size: 16px;\n}\n.ui__alert .ui__alert_content .ui__content_foot {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.ui__alert .ui__alert_content .ui__content_foot a {\n  font-size: 14px;\n  color: #017aff;\n  display: block;\n  text-decoration: none;\n  flex: 1;\n  text-align: center;\n  line-height: 40px;\n  border-left: 1px solid #eee;\n}\n.ui__alert .ui__alert_content .ui__content_foot a:first-child {\n  border-left: none;\n}\n.ui__toast_bg {\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 9998;\n  position: fixed;\n}\n.ui__toast_text {\n  line-height: 1;\n  text-align: center;\n  position: fixed;\n  max-width: 200px;\n  z-index: 9999;\n  padding: 14px;\n  color: #fff;\n  background: #000;\n  border-radius: 5px;\n  left: 50%;\n  top: 50%;\n  font-size: 14px;\n  -webkit-transform: translate(-50%, -50%);\n          transform: translate(-50%, -50%);\n}\n@-webkit-keyframes bgFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes bgFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes bgFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@keyframes bgFadeOut {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n@-webkit-keyframes contentZoomIn {\n  0% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n}\n@keyframes contentZoomIn {\n  0% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n}\n@-webkit-keyframes contentZoomOut {\n  0% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n}\n@keyframes contentZoomOut {\n  0% {\n    -webkit-transform: translate(-50%, -50%);\n            transform: translate(-50%, -50%);\n    opacity: 1;\n  }\n  100% {\n    -webkit-transform: translate(-50%, -30%);\n            transform: translate(-50%, -30%);\n    opacity: 0;\n  }\n}\n", ""])
}, function(n, t, e) {
    "use strict";
    n.exports = function(n) {
        var t = [];
        return t.toString = function() {
            return this.map(function(t) {
                var e = function(n, t) {
                    var e = n[1] || "",
                        r = n[3];
                    if(!r) return e;
                    if(t && "function" == typeof btoa) {
                        var o = (a = r, "/*# sourceMappingURL=data:application/json;charset=utf-8;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(a)))) + " */"),
                            i = r.sources.map(function(n) {
                                return "/*# sourceURL=" + r.sourceRoot + n + " */"
                            });
                        return [e].concat(i).concat([o]).join("\n")
                    }
                    var a;
                    return [e].join("\n")
                }(t, n);
                return t[2] ? "@media " + t[2] + "{" + e + "}" : e
            }).join("")
        }, t.i = function(n, e) {
            "string" == typeof n && (n = [
                [null, n, ""]
            ]);
            for(var r = {}, o = 0; o < this.length; o++) {
                var i = this[o][0];
                null != i && (r[i] = !0)
            }
            for(o = 0; o < n.length; o++) {
                var a = n[o];
                null != a[0] && r[a[0]] || (e && !a[2] ? a[2] = e : e && (a[2] = "(" + a[2] + ") and (" + e + ")"), t.push(a))
            }
        }, t
    }
}, function(n, t, e) {
    var r, o, i = {},
        a = (r = function() {
            return window && document && document.all && !window.atob
        }, function() {
            return void 0 === o && (o = r.apply(this, arguments)), o
        }),
        s = function(n) {
            var t = {};
            return function(n, e) {
                if("function" == typeof n) return n();
                if(void 0 === t[n]) {
                    var r = function(n, t) {
                        return t ? t.querySelector(n) : document.querySelector(n)
                    }.call(this, n, e);
                    if(window.HTMLIFrameElement && r instanceof window.HTMLIFrameElement) try {
                        r = r.contentDocument.head
                    } catch(n) {
                        r = null
                    }
                    t[n] = r
                }
                return t[n]
            }
        }(),
        c = null,
        l = 0,
        u = [],
        f = e(6);

    function d(n, t) {
        for(var e = 0; e < n.length; e++) {
            var r = n[e],
                o = i[r.id];
            if(o) {
                o.refs++;
                for(var a = 0; a < o.parts.length; a++) o.parts[a](r.parts[a]);
                for(; a < r.parts.length; a++) o.parts.push(y(r.parts[a], t))
            } else {
                var s = [];
                for(a = 0; a < r.parts.length; a++) s.push(y(r.parts[a], t));
                i[r.id] = {
                    id: r.id,
                    refs: 1,
                    parts: s
                }
            }
        }
    }

    function p(n, t) {
        for(var e = [], r = {}, o = 0; o < n.length; o++) {
            var i = n[o],
                a = t.base ? i[0] + t.base : i[0],
                s = {
                    css: i[1],
                    media: i[2],
                    sourceMap: i[3]
                };
            r[a] ? r[a].parts.push(s) : e.push(r[a] = {
                id: a,
                parts: [s]
            })
        }
        return e
    }

    function m(n, t) {
        var e = s(n.insertInto);
        if(!e) throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");
        var r = u[u.length - 1];
        if("top" === n.insertAt) r ? r.nextSibling ? e.insertBefore(t, r.nextSibling) : e.appendChild(t) : e.insertBefore(t, e.firstChild), u.push(t);
        else if("bottom" === n.insertAt) e.appendChild(t);
        else {
            if("object" != typeof n.insertAt || !n.insertAt.before) throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");
            var o = s(n.insertAt.before, e);
            e.insertBefore(t, o)
        }
    }

    function _(n) {
        if(null === n.parentNode) return !1;
        n.parentNode.removeChild(n);
        var t = u.indexOf(n);
        t >= 0 && u.splice(t, 1)
    }

    function b(n) {
        var t = document.createElement("style");
        if(void 0 === n.attrs.type && (n.attrs.type = "text/css"), void 0 === n.attrs.nonce) {
            var r = function() {
                0;
                return e.nc
            }();
            r && (n.attrs.nonce = r)
        }
        return v(t, n.attrs), m(n, t), t
    }

    function v(n, t) {
        Object.keys(t).forEach(function(e) {
            n.setAttribute(e, t[e])
        })
    }

    function y(n, t) {
        var e, r, o, i;
        if(t.transform && n.css) {
            if(!(i = "function" == typeof t.transform ? t.transform(n.css) : t.transform.default(n.css))) return function() {};
            n.css = i
        }
        if(t.singleton) {
            var a = l++;
            e = c || (c = b(t)), r = x.bind(null, e, a, !1), o = x.bind(null, e, a, !0)
        } else n.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (e = function(n) {
            var t = document.createElement("link");
            return void 0 === n.attrs.type && (n.attrs.type = "text/css"), n.attrs.rel = "stylesheet", v(t, n.attrs), m(n, t), t
        }(t), r = function(n, t, e) {
            var r = e.css,
                o = e.sourceMap,
                i = void 0 === t.convertToAbsoluteUrls && o;
            (t.convertToAbsoluteUrls || i) && (r = f(r));
            o && (r += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(o)))) + " */");
            var a = new Blob([r], {
                    type: "text/css"
                }),
                s = n.href;
            n.href = URL.createObjectURL(a), s && URL.revokeObjectURL(s)
        }.bind(null, e, t), o = function() {
            _(e), e.href && URL.revokeObjectURL(e.href)
        }) : (e = b(t), r = function(n, t) {
            var e = t.css,
                r = t.media;
            r && n.setAttribute("media", r);
            if(n.styleSheet) n.styleSheet.cssText = e;
            else {
                for(; n.firstChild;) n.removeChild(n.firstChild);
                n.appendChild(document.createTextNode(e))
            }
        }.bind(null, e), o = function() {
            _(e)
        });
        return r(n),
            function(t) {
                if(t) {
                    if(t.css === n.css && t.media === n.media && t.sourceMap === n.sourceMap) return;
                    r(n = t)
                } else o()
            }
    }
    n.exports = function(n, t) {
        if("undefined" != typeof DEBUG && DEBUG && "object" != typeof document) throw new Error("The style-loader cannot be used in a non-browser environment");
        (t = t || {}).attrs = "object" == typeof t.attrs ? t.attrs : {}, t.singleton || "boolean" == typeof t.singleton || (t.singleton = a()), t.insertInto || (t.insertInto = "head"), t.insertAt || (t.insertAt = "bottom");
        var e = p(n, t);
        return d(e, t),
            function(n) {
                for(var r = [], o = 0; o < e.length; o++) {
                    var a = e[o];
                    (s = i[a.id]).refs--, r.push(s)
                }
                n && d(p(n, t), t);
                for(o = 0; o < r.length; o++) {
                    var s;
                    if(0 === (s = r[o]).refs) {
                        for(var c = 0; c < s.parts.length; c++) s.parts[c]();
                        delete i[s.id]
                    }
                }
            }
    };
    var h, g = (h = [], function(n, t) {
        return h[n] = t, h.filter(Boolean).join("\n")
    });

    function x(n, t, e, r) {
        var o = e ? "" : r.css;
        if(n.styleSheet) n.styleSheet.cssText = g(t, o);
        else {
            var i = document.createTextNode(o),
                a = n.childNodes;
            a[t] && n.removeChild(a[t]), a.length ? n.insertBefore(i, a[t]) : n.appendChild(i)
        }
    }
}, function(n, t) {
    n.exports = function(n) {
        var t = "undefined" != typeof window && window.location;
        if(!t) throw new Error("fixUrls requires window.location");
        if(!n || "string" != typeof n) return n;
        var e = t.protocol + "//" + t.host,
            r = e + t.pathname.replace(/\/[^\/]*$/, "/");
        return n.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi, function(n, t) {
            var o, i = t.trim().replace(/^"(.*)"$/, function(n, t) {
                return t
            }).replace(/^'(.*)'$/, function(n, t) {
                return t
            });
            return /^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i) ? n : (o = 0 === i.indexOf("//") ? i : 0 === i.indexOf("/") ? e + i : r + i.replace(/^\.\//, ""), "url(" + JSON.stringify(o) + ")")
        })
    }
}]);

4.在data里加入数据(模仿后台数据)

data() {
      return {
        book:[
          {
            b:'白雪公主',
            resourceUuid:'1'
          },
          {
            b:'豌豆公主',
            resourceUuid:'2'
          },
          {
            b:'摆设',
            resourceUuid:'3'
          },
        ],
        userData:{
            schoolNumber:'001',
            password:'123456'
        } 
      }
    },

一切准备就绪,贴完整代码:

<template>
  <div>
      <div id="show">
        <div class="lattice" v-for="(item,index) in book" :key="index">
          <a class="latticeClick" :href="goList(item.resourceUuid,index)">{{item.b}}</a>
        </div>
      </div>
  </div>
</template>

<script>
import "@/protocolcheck/protocolcheck.js";
import "@/dialog/dialog.js";
import "@/jquery/jquery.js";

export default {
  data() {
    return {
      book: [
        {
          b: "白雪公主",
          resourceUuid: "1"
        },
        {
          b: "豌豆公主",
          resourceUuid: "2"
        },
        {
          b: "摆设",
          resourceUuid: "3"
        }
      ],
      userData: {
        schoolNumber: "001",
        password: "123456"
      }
    };
  },
  
methods: {
    goList(resourceUuid, index) {
      let schoolNumber = this.userData.schoolNumber;
      let password = this.userData.password;
//
      //console.log(schoolNumber);
      //console.log(password);
      //console.log(resourceUuid);
      $(function() {
        $(".latticeClick").click(function(event) {
          window.protocolCheck($(this).attr("href"), function() {
            if (index > 0) {
              return false;
            } else {
              // document.getElementById('show').onclick = function () {
              alert({
                title: " ",
                content: "请下载客户端",
                doneText: "确认"
              });
              // }
            }
          });
          event.preventDefault ? event.preventDefault(): (event.returnValue = false);
        });
      });
      return  "******://username=" + schoolNumber + "&key=" + password + "&resourceid=" + resourceUuid
    },
  },
};
</script>

<style  scoped>
  .lattice{
    width: 500px;
    height: 100px;
    margin-top: 10px;
    margin-left: 15px;
    background-color: red;
  }
  .latticeClick{
    text-decoration: none;
    color: #000;
    line-height: 70px;
    margin-left: 10px;
  }
</style>

效果图:

image.png
上一篇下一篇

猜你喜欢

热点阅读