思路：將需要分享的鏈接生成二維碼，展示給用戶，用戶使用手機微信掃一掃，可以分享至朋友，朋友圈
- 1、下載 jquery.qrcode.min.js 文件，我已放置百度網盤，請自行加載
鏈接：https://pan.baidu.com/s/1xpQSIT7YMZrGYi2TPRWVTA
提取碼：gfp0
- 2、在頁面放置微信分享按鈕
<button onclick="shareTo('wechat')">微信</button>
- 3、分享按鈕的點擊事件
// 生成二維碼給微信掃描分享
if(stype == 'wechat') {
layer.open({
type: 2,
title: '掃一掃，分享至微信',
shade: 0.2,
area: ['300px', '450px'],
offset: '100px',
shadeClose: false,
content: /*[[@{/sys/shareToWeixin}]]*/
});
}
這裏我使用了 layer 的彈窗，以彈窗的形式展示給客戶
- 4、二維碼生成頁面 share_to_weixin.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>分享至微信</title>
<link rel="icon" th:href="@{/static/img/icon.ico}">
</head>
<body>
<div id="qrcode" style="margin-bottom: 20px;margin-top: 20px" align="center">
</div>
<hr class="layui-bg-black">
<p style="font-size: 14px;color: #999;text-align: center">打開微信掃一掃，分享至朋友圈</p>
<hr class="layui-bg-black">
<script type="text/javascript" th:src="@{/static/js/jquery-3.2.0.min.js}"></script>
<!-- 生成二維碼 -->
<script type="text/javascript" th:src="@{/static/js/jquery.qrcode.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
// 生成二維碼
$(function() {
$('#qrcode').qrcode({
width: 240,
height: 240,
text: decodeURIComponent('http://www.baidu.com')
});
});
</script>
</body>
</html>
- 5、最終展示效果如圖所示
![分享至微信]()
如您在閱讀中發現不足，歡迎留言！！！