微信公众号分享的引导页(附素材)
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>
素材图片:
效果图:
版权声明:若无特殊注明,本文皆为《菜鸟站长》原创,转载请保留文章出处。
本文链接:微信公众号分享的引导页(附素材) - http://wlphp.com/?post=284