景龙 / xingqiu · 提交

转到一个项目

作者 jinglong
提交 7d55b8bb989190a951617504c42850a7b204dc0e 1 个父辈 5dd011e9
1 个管道 的构建 通过 耗费 1 秒

调式pc分享

内嵌 并排对比
正在显示 3 个修改的文件 包含 100 行增加 和 10 行删除
... ... @@ -194,3 +194,34 @@
font-size: 16px;
text-align: center;
}
/*二维码*/
.icon-close2 {
float:right;
text-decoration: none;
width: 16px;
height: 16px;
position: absolute;
right: 10px;
color: #999;
font-size: 16px;
}
.wx-qrcode-wrapper{
width: 230px;
height: 290px;
position: fixed;
top: 20%;
left: 45%;
background: #F8F8F8;
padding: 10px 6px 10px 15px;
display: none;
}
.bd_weixin_popup_foot{
font-size: 12px;
text-align: left;
line-height: 18px;
color: #666;
}
.share{
margin-bottom:10px;
}
\ No newline at end of file
... ...
<div class="sidebar">
<!-- 收藏 -->
<div class="collections">
... ... @@ -17,7 +18,7 @@
</notempty>
</div>
<!-- wx分享 -->
<div class="wx_go weixin">
<div class="wx_go weixin" onclick="wxShow()">
<img src="__TMPL__/public/assets/starImg/bicon_04.png" alt="">
<p>{$share.post_share_wx}</p>
</div>
... ... @@ -27,3 +28,50 @@
<p>{$share.post_share_wb}</p>
</div>
</div>
<!-- 二维码弹出层 -->
<div class="wx-qrcode-wrapper">
<!-- 遮罩层 -->
<div class="mask"></div>
<div class="wx-qrcode" style="width:230px;">
<div class="share">
<span style="font-size: 14px;text-align: center;">分享到微信朋友圈</span>
<!-- 关闭图标 -->
<a href="javascript:;" class="icon-close2" onclick="wxHide()">×</a>
</div>
<!-- 生成的二维码容器 -->
<div id="qrcode"></div>
<div class="bd_weixin_popup_foot">
打开微信，点击底部的“发现”，<br>
使用“扫一扫”即可将网页分享至朋友圈。
</div>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script>
var url = window.location.href;
/* 生成二维码 */
$("#qrcode").qrcode({
text: url, //设置二维码内容
render: "canvas", //设置渲染方式
width: 220, //设置宽度,默认生成的二维码大小是 256×256
height: 220, //设置高度
typeNumber: -1, //计算模式
background: "#ffffff", //背景颜色
foreground: "#000000" //前景颜色
});
/* 点微信图标，触发二维码弹出层显示 */
function wxShow() {
$('.wx-qrcode-wrapper').show()
}
/* 关闭二维码弹出层 */
function wxHide() {
$('.wx-qrcode-wrapper').hide()
}
</script>
\ No newline at end of file
... ...
... ... @@ -8,12 +8,12 @@
<title>Document</title>
</head>
<body>
<h1 onclick="weixinSendAppMessage()">分享主题</h1>
<h1>分享主题</h1>
</body>
</html>
<script src="them/public/assets/js/jquery-2.1.0.js"></script>
<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript">
<script>
$(function () {
wx.config({
debug: true,
... ... @@ -26,12 +26,8 @@
'updateTimelineShareData',
]
});
});
function weixinSendAppMessage(){
alert(111);
WeixinJSBridge.invoke('updateAppMessageShareData',{
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({
title: '分享标题', // 分享标题
desc: '分享描述', // 分享描述
link: 'http://www.starplanet.cn/portal/enjoy/getEnjoyDetail?id=81', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
... ... @@ -41,6 +37,21 @@
alert('分享朋友');
}
});
wx.updateTimelineShareData({
title: '分享朋友圈', // 分享标题
link: 'http://www.starplanet.cn/portal/enjoy/getEnjoyDetail?id=81', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: '', // 分享图标
success: function () {
// 设置成功
alert('分享朋友圈 ');
}
});
});
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
alert(res);
});
});
</script>
... ...