微信公众号分享的引导页(附素材)

2021年8月4日 0条评论

微信公众号分享的引导页(附素材)

html代码:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"  content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="/static/web/theme1/m/css/mui.min.css" rel="stylesheet" />
    <script src="/static/web/theme1/m/js/jquery.min.js"></script>
    <script src="/static/web/theme1/m/js/mui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/web/theme1/m/css/app.css" />
    <script src="/static/web/theme1/m/layer_mobile/layer.js"></script>
    <script src="https://unpkg.com/vconsole/dist/vconsole.min.js"></script>
    <script>
         var vConsole = new window.VConsole();
    </script>

</head>
<style>
    .all {
        width: 90%;
        margin: 100px auto;
        text-align: center;
    }

    .all p {
        font-size: 16px;
    }

    .all button {
        margin: 40px auto !important;
        width: 150px;
    }

    .show_success_btn {
        display: flex;
        justify-content: space-between;
    }

    .show_success_btn a {
        display: block;
        width: 48%;
    }

    .show_success_btn button {
        width: 89%;
        margin: 0 auto;
    }

</style>

<body>


    <div class="all">
        <img src="http://kyth.saoma.zhongliangec.com/static/m/img/success4.png" />
        <p>操作成功！</p>
        <button type="button" class="mui-btn mui-btn-danger"
            onclick="guide_point()">发送给朋友</button>
    </div>




    <style>
        .layui-m-layer-nobg {
            background-color: rgba(0, 0, 0, 0) !important;
            position: absolute;
            top: 0px;
            right: 0px;
        }
    </style>
    <!--分享引导框开始-->
    <div id="guide_box"  style="display: none;"  >
        <img src="/static/web/theme1/m/img/guide_point.png"  style="width:200px;float: right;" >
        <img src="/static/web/theme1/m/img/guide_btn.png"  style="width:200px;clear: both;float: right;"   onclick="layer.closeAll();">
    </div>
    <!--分享引导框结束-->
    <script>
        guide_point();
        //打开引导分享遮罩
        function guide_point() {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shade: 0.2,
                offset: 'rt', //右上
                area: '0px',
                skin: 'nobg', //没有背景色,就是上面的.layui-m-layer-nobg样式,layui框架自动加前缀
                shadeClose: true,
                content: $('#guide_box').html()
            });
        }
    </script>



<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        debug: true,
        appId: "wx505d80be911dd14a",
        timestamp: "1628070846",
        nonceStr: "pNo5tvzTnYtJ08G8",
        signature: "59477f440bf38cbe121648a20651b27374e5ecaf",
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            "onMenuShareAppMessage",
            "onMenuShareTimeline",
        ]
    });
    wx.ready(function () {
        var img = "http://kyth.saoma.zhongliangec.com/static/m/img/success4.png";
        var words = "分享内容";
        var title = "分享标题";
        var url = "http://127.0.0.1/index.php/receive/index.html?code=43DA79257D54ABF2136D12FC3B42DDA76ED7CAB09C5AA8700694CC5343624471621BAA00B476CBFD8E58885F3D8FBBAD6B08BA6CF6ACBD03";
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: words, // 分享描述
            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: img, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {
                //return false;
                // 用户点击了分享后执行的回调函数
                alert("好友分享成功");

            }
        });
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: img, // 分享图标
            success: function () {
                // 用户点击了分享后执行的回调函数
                //	return false;
                alert("朋友圈分享成功");

            }
        });
    });

</script>
</body>
</html>

素材图片：