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

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


当前项目使用的是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页面,并设置一个默认的分享模板,如果有些页面不使用默认模板,则将参数传进去就可以了

    

原创声明: 随意转载,不必注明出处,分享至上 [博客园 廖龙军 http://cnblogs.com/liaolongjun]
原文地址:https://www.cnblogs.com/liaolongjun/p/5912411.html