微信分享技巧微信分享简单化微信分享配置技巧

Posted 2020-08-11 米饭

微信分享技巧、微信分享简单化、微信分享配置技巧

当前项目使用的是SpringMVC、JSP解析器

 

这里假定大家都用过微信分享了，所以具体使用细节就不讲解了，只分享如何快速、简洁的完成微信分享配置

 

一、微信分享常规的流程

比如分享一个 index.do 页面，一般步骤

    1、写一个公共方法，用来生成微信分享配置参数。

　　/**
     * 微信分享所需参数
     */
    public static Map<String, Object> getWeixinShareParams(String ticket, String appid, String url) {
        Map<String, Object> params = new HashMap<>();
        try {
            String nonceStr = "xxooxxooxxooxxoo";
            String timestamp = System.currentTimeMillis() / 1000 + "";
            String signatureStr = "jsapi_ticket=" + ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url;
            String signature = Sha1Util.getSha1(signatureStr);

            params.put("appId", appid);
            params.put("ticket", ticket);
            params.put("nonceStr", nonceStr);
            params.put("timestamp", timestamp);
            params.put("signatureStr", signatureStr);
            params.put("signature", signature);
        } catch (Exception e) {
            e.printStackTrace();
        }
        log.info("params:{}", params);
        return params;
    }

    2、controller里调用上面的方法，将参数放进数据模型里

    3、页面调用wx.config函数进行微信分享权限配置
    4、“分享到朋友圈”、“分享给好友”个性化配置

        看一下熟悉的js代码吧

<!--微信分享-->
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
    $(function () {
        // 微信分享授权配置参数
        wx.config({
            appId: ‘${params.appId}‘, // 公众号唯一标识
            timestamp: ‘${params.timestamp}‘, // 时间戳
            nonceStr: ‘${params.nonceStr}‘, // 随机字符串
            signature: ‘${params.signature}‘, // 签名
            jsApiList: [
                "onMenuShareTimeline", // 分享到朋友圈
                "onMenuShareAppMessage" // 分享给朋友
            ]
        });

        wx.ready(function () {
            //发送给微信朋友
            wx.onMenuShareAppMessage({
                title: "", // 分享标题
                desc: "", // 分享描述
                link: "", // 分享链接
                imgUrl: "", // 分享图标
                type: ‘‘, // 分享类型,music、video或link，不填默认为link
                dataUrl: ‘‘, // 如果type是music或video，则要提供数据链接，默认为空
                success: function () {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function () {
                    // 用户取消分享后执行的回调函数
                }
            });

            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: "",
                link: "",
                imgUrl: "",
                success: function () {
                },
                cancel: function () {
                }
            });
        });
    });
</script>

 

假如每个页面都要加微信分享处理，要是把上面的步骤重复一遍又一遍，就该去投江了

 

二、下面开始一步步简化

1、上述步骤1已经最简了，不用动（tiket、appid也作为参数传进去了，是因为一个项目里有多个微信公众号的代码）

2、上述步骤2调用方法获取参数，我们可以改成ajax获取，这样的话，步骤2的代码只需要一次就够了，后续页面添加微信分享处理参数，只需页面上js获取分享参数

3、上述步骤3，wx.config函数，我们将它写入一个单独的jsp页面，直接引入

4、上述步骤4，“分享到朋友圈”、“分享给好友”个性化配置

        可以将这一步的代码写进上面的jsp页面，并设置一个默认的分享模板，如果有些页面不使用默认模板，则将参数传进去就可以了