微信公众号分享的引导页(附素材)
2021-8-4 菜鸟站长
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>
素材图片：
效果图：
发表评论：