【第三方互联】六、分享至微信（WeChat）

- 日理万妓 2023-07-08 09:25 3阅读 0赞

> 思路：将需要分享的链接生成二维码，展示给用户，用户使用手机微信扫一扫，可以分享至朋友，朋友圈

### 1、下载相关 JS 文件 ###

下载 jquery.qrcode.min.js 文件，我已放置百度网盘，请自行加载

链接：https://pan.baidu.com/s/1xpQSIT7YMZrGYi2TPRWVTA 
    提取码：gfp0

### 2、分享按钮 ###

在页面放置微信分享按钮

### 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、效果展示 ###

最终展示效果如图所示  
![分享至微信][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]

如您在阅读中发现不足，欢迎留言！！！

**下一篇：**

[【第三方互联】七、注册成为新浪微博开发者][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200226180017666.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMDY1Nzc2,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/qq_40065776/article/details/104581463