景龙 / xingqiu · 提交

转到一个项目

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

调式pc分享

内嵌 并排对比
正在显示 3 个修改的文件 包含 100 行增加 和 10 行删除
@@ -194,3 +194,34 @@ @@ -194,3 +194,34 @@
194 font-size: 16px; 194 font-size: 16px;
195 text-align: center; 195 text-align: center;
196 } 196 }
  197 +
  198 +/*二维码*/
  199 + .icon-close2 {
  200 + float:right;
  201 + text-decoration: none;
  202 + width: 16px;
  203 + height: 16px;
  204 + position: absolute;
  205 + right: 10px;
  206 + color: #999;
  207 + font-size: 16px;
  208 + }
  209 +.wx-qrcode-wrapper{
  210 + width: 230px;
  211 + height: 290px;
  212 + position: fixed;
  213 + top: 20%;
  214 + left: 45%;
  215 + background: #F8F8F8;
  216 + padding: 10px 6px 10px 15px;
  217 + display: none;
  218 +}
  219 +.bd_weixin_popup_foot{
  220 + font-size: 12px;
  221 + text-align: left;
  222 + line-height: 18px;
  223 + color: #666;
  224 +}
  225 +.share{
  226 + margin-bottom:10px;
  227 +}
  1 +
1 <div class="sidebar"> 2 <div class="sidebar">
2 <!-- 收藏 --> 3 <!-- 收藏 -->
3 <div class="collections"> 4 <div class="collections">
@@ -17,7 +18,7 @@ @@ -17,7 +18,7 @@
17 </notempty> 18 </notempty>
18 </div> 19 </div>
19 <!-- wx分享 --> 20 <!-- wx分享 -->
20 - <div class="wx_go weixin"> 21 + <div class="wx_go weixin" onclick="wxShow()">
21 <img src="__TMPL__/public/assets/starImg/bicon_04.png" alt=""> 22 <img src="__TMPL__/public/assets/starImg/bicon_04.png" alt="">
22 <p>{$share.post_share_wx}</p> 23 <p>{$share.post_share_wx}</p>
23 </div> 24 </div>
@@ -27,3 +28,50 @@ @@ -27,3 +28,50 @@
27 <p>{$share.post_share_wb}</p> 28 <p>{$share.post_share_wb}</p>
28 </div> 29 </div>
29 </div> 30 </div>
  31 +
  32 +<!-- 二维码弹出层 -->
  33 +<div class="wx-qrcode-wrapper">
  34 + <!-- 遮罩层 -->
  35 + <div class="mask"></div>
  36 + <div class="wx-qrcode" style="width:230px;">
  37 + <div class="share">
  38 + <span style="font-size: 14px;text-align: center;">分享到微信朋友圈</span>
  39 + <!-- 关闭图标 -->
  40 + <a href="javascript:;" class="icon-close2" onclick="wxHide()">×</a>
  41 + </div>
  42 +
  43 + <!-- 生成的二维码容器 -->
  44 + <div id="qrcode"></div>
  45 + <div class="bd_weixin_popup_foot">
  46 + 打开微信，点击底部的“发现”，<br>
  47 + 使用“扫一扫”即可将网页分享至朋友圈。
  48 + </div>
  49 + </div>
  50 +</div>
  51 +
  52 +<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  53 +<script src="https://cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
  54 +<script>
  55 + var url = window.location.href;
  56 + /* 生成二维码 */
  57 + $("#qrcode").qrcode({
  58 + text: url, //设置二维码内容
  59 + render: "canvas", //设置渲染方式
  60 + width: 220, //设置宽度,默认生成的二维码大小是 256×256
  61 + height: 220, //设置高度
  62 + typeNumber: -1, //计算模式
  63 + background: "#ffffff", //背景颜色
  64 + foreground: "#000000" //前景颜色
  65 + });
  66 +
  67 + /* 点微信图标，触发二维码弹出层显示 */
  68 + function wxShow() {
  69 + $('.wx-qrcode-wrapper').show()
  70 + }
  71 +
  72 + /* 关闭二维码弹出层 */
  73 + function wxHide() {
  74 + $('.wx-qrcode-wrapper').hide()
  75 + }
  76 +
  77 +</script>
@@ -8,12 +8,12 @@ @@ -8,12 +8,12 @@
8 <title>Document</title> 8 <title>Document</title>
9 </head> 9 </head>
10 <body> 10 <body>
11 -<h1 onclick="weixinSendAppMessage()">分享主题</h1> 11 +<h1>分享主题</h1>
12 </body> 12 </body>
13 </html> 13 </html>
14 -<script src="them/public/assets/js/jquery-2.1.0.js"></script> 14 +<script src="__TMPL__/public/assets/js/jquery-2.1.0.js"></script>
15 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> 15 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
16 -<script type="text/javascript"> 16 +<script>
17 $(function () { 17 $(function () {
18 wx.config({ 18 wx.config({
19 debug: true, 19 debug: true,
@@ -26,12 +26,8 @@ @@ -26,12 +26,8 @@
26 'updateTimelineShareData', 26 'updateTimelineShareData',
27 ] 27 ]
28 }); 28 });
29 -  
30 - });  
31 -  
32 - function weixinSendAppMessage(){  
33 - alert(111);  
34 - WeixinJSBridge.invoke('updateAppMessageShareData',{ 29 + wx.ready(function () { //需在用户可能点击分享按钮前就先调用
  30 + wx.updateAppMessageShareData({
35 title: '分享标题', // 分享标题 31 title: '分享标题', // 分享标题
36 desc: '分享描述', // 分享描述 32 desc: '分享描述', // 分享描述
37 link: 'http://www.starplanet.cn/portal/enjoy/getEnjoyDetail?id=81', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 33 link: 'http://www.starplanet.cn/portal/enjoy/getEnjoyDetail?id=81', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
@@ -41,6 +37,21 @@ @@ -41,6 +37,21 @@
41 alert('分享朋友'); 37 alert('分享朋友');
42 } 38 }
43 }); 39 });
  40 + wx.updateTimelineShareData({
  41 + title: '分享朋友圈', // 分享标题
  42 + link: 'http://www.starplanet.cn/portal/enjoy/getEnjoyDetail?id=81', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  43 + imgUrl: '', // 分享图标
  44 + success: function () {
  45 + // 设置成功
  46 + alert('分享朋友圈 ');
44 } 47 }
  48 + });
  49 + });
  50 + wx.error(function (res) {
  51 + // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  52 + alert(res);
  53 + });
  54 +
  55 + });
45 56
46 </script> 57 </script>