• 【微信开发第五章】SpringBoot实现微信分享

    前言

    在进行微信公众号业务开发的时候，有些时候需要用到微信分享，以卡片的形式分享出去，例如订单信息，用户信息。该篇文章每一步都有记录，力争理解的同时各位小伙伴也能够实现功能

    效果图如下：
    在这里插入图片描述

    文章目录

    1、绑定域名

    先登录微信公众平台进入“设置与开发”，“公众号设置”的“功能设置”里填写“JS接口安全域名”。
    在这里插入图片描述

    2、前端代码实现

    1、引入JS文件

    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/javascript">script>

    • 1

    2、在public目录下创建 index.html文件，内容如下
    在这里插入图片描述

    DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.12/skins/default/aliplayer-min.css" />
    <script charset="utf-8" type="text/javascript" src="https://g.alicdn.com/de/prismplayer/2.9.12/aliplayer-min.js">script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js" type="text/javascript">script>
    
    
    <link href="https://cloudcache.tencent-cloud.com/open/qcloud/video/tcplayer/tcplayer.css" rel="stylesheet">
    
    
    
    <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/libs/hls.min.0.13.2m.js">script>
    
    <script src="https://imgcache.qq.com/open/qcloud/video/tcplayer/tcplayer.v4.1.min.js">script>
    
    <title>Eric的分享示例title>
  head>
  <body>
    <script type="text/javascript" src="https://static-1.talk-fun.com/open/TalkFun_SDK_Pack/v6.0/TalkFunWebSDK-6.2-2.min.js">script>

    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    noscript>
    <div id="app">div>
    
  body>
html>


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    3、创建工具类JS：wxShare.js 文件

    /**
 * 微信js-sdk
 * 参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
 */
const wxShare = {
    /**
     * [wxRegister 微信Api初始化]
     * @param  {Function} callback [ready回调函数]
     */
    wxRegister(data,option) { //data是微信配置信息，option是分享的配置内容
        
        wx.config({
            debug: true, // 开启调试模式
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature,// 必填，签名，见附录1
            jsApiList: [
                'onMenuShareAppMessage'
            ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function(){

            wx.onMenuShareAppMessage({
                title: option.title, // 分享标题
                desc: option.desc, // 分享描述
                link: option.link, // 分享链接
                imgUrl: option.imgUrl, // 分享图标
                success() {
                    // 用户成功分享后执行的回调函数
                    //  option.success()
                    console.log('ok');
                },
                cancel() {
                    // 用户取消分享后执行的回调函数
                    // option.error()
                    console.log('cancel');
                }
            });
        });

        wx.error(function(res){
          // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
          //alert('error:'+JSON.stringify(res));
        });
    }
}
export default wxShare

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48

    3、后端代码实现

    说明：微信分享要对当前url加密处理，由于我们的url路由都是带“#”符号，服务器端接收不到，因此通过“ericToken”单词代替了“#”。

    @RestController
@RequestMapping("/api/wechat/share")
@Slf4j
public class ShareController {

    @Autowired
    private WxMpService wxMpService;

    @GetMapping("/getSignature")
    public Result getSignature(@RequestParam("url") String url) throws WxErrorException {
        String currentUrl = url.replace("ericToken", "#");
        WxJsapiSignature jsapiSignature = wxMpService.createJsapiSignature(currentUrl);

        WxJsapiSignatureVo wxJsapiSignatureVo = new WxJsapiSignatureVo();
        BeanUtils.copyProperties(jsapiSignature, wxJsapiSignatureVo);
        wxJsapiSignatureVo.setUserEedId(Base64Util.base64Encode(AuthContextHolder.getUserId()+""));
        return Result.ok(wxJsapiSignatureVo);
    }

}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    WxJsapiSignatureVo 内容如下

    @Data
public class WxJsapiSignatureVo {
    private String appId;
    private String nonceStr;
    private long timestamp;
    private String url;
    private String signature;
    //加密用户id
    private String userEedId;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    4、前端使用方式

    1、在要分享的vue页面引入js文件

    import wxShare from '@/utils/wxShare'

    • 1

    2、代码实现

    wxRegister() {
  //说明：后台加密url必须与当前页面url一致
  let url = window.location.href.replace('#', 'ericToken')
  shareApi.getSignature(url).then(response => {
    console.log(response.data);
    //记录分享用户
    let link = '';
    if(window.location.href.indexOf('?') != -1) {
      link = window.location.href + '&recommend=' + response.data.userEedId;
    } else {
      link = window.location.href + '?recommend=' + response.data.userEedId;
    }
    let option = {
      'title': this.courseVo.title,
      'desc': this.description,
      'link': link,
      'imgUrl': this.courseVo.cover
    }
    wxShare.wxRegister(response.data, option);
  });
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    总结

    微信分享这个功能总体来说前端工作量要比后端多一点，不过整体逻辑不难，当然，最需要注意的还是配置域名了

    【微信开发第一章】SpringBoot实现微信公众号创建菜单，同步菜单功能：https://blog.csdn.net/weixin_47316183/article/details/127821095?spm=1001.2014.3001.5502

    【微信开发第二章】SpringBoot实现微信公众号普通消息和模板消息回复：https://blog.csdn.net/weixin_47316183/article/details/127821653?spm=1001.2014.3001.5502

    【微信开发第三章】SpringBoot实现微信授权登录
    https://blog.csdn.net/weixin_47316183/article/details/127833802?spm=1001.2014.3001.5502

    【微信开发第四章】SpringBoot实现微信H5支付
    https://blog.csdn.net/weixin_47316183/article/details/127949620?spm=1001.2014.3001.5502

    【微信开发第五章】SpringBoot实现微信分享
    https://blog.csdn.net/weixin_47316183/article/details/127950090?spm=1001.2014.3001.5502

  • 相关阅读:
    基于HTML5实现动态烟花秀效果（含音效和文字）实战
    回归预测 | MATLAB实现MPA-BiGRU海洋捕食者算法优化双向门控循环单元多输入单输出回归预测（多指标，多图）
    代码随想录算法训练营day59 | 115.不同的子序列、583. 两个字符串的删除操作、72. 编辑距离
    高通WLAN框架学习（32）-- WLAN/P2P set IOCTLs（iwpriv）命令大全
    Spring Cloud之负载均衡组件Ribbon原理分析
    Docker笔记-概念&安装&简单使用
    【华为机试真题 JAVA】输出指定字母在字符串的中的索引-100
    UGNX配置许可服务器
    《信息技术时代》期刊简介及投稿要求
    鸿鹄工程项目管理系统em Spring Cloud+Spring Boot+前后端分离构建工程项目管理系统
  • 原文地址：https://blog.csdn.net/weixin_47316183/article/details/127950090