微信分享样式调整,使用微信js-sdk

参考:微信公众平台

一、前端

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
function wx_ready_fenxiang(title, desc, imgUrl,url){
    $.post("getToken.jhtml",{"url":url},function(result){
        if(result.code==0){
            var appid,timestamp,nonceStr,signature;
            appid = result.data.appid;
            timestamp = result.data.timestamp;
            nonceStr = result.data.nonceStr;
            signature = result.data.signature;
            wx.config({
                debug: false,//debug模式会打印日志,微信端会弹框
                appId: appid,
                timestamp:timestamp,
                nonceStr: nonceStr,
                signature: signature,
                jsApiList: [
                    'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'
                ]
            });
            _wx(title, desc, imgUrl, 'link',url);
        }
    },"json")
}

function _wx(title, desc, imgUrl, type,url){
    wx.ready(function() {
        //朋友圈
        wx.onMenuShareTimeline({
            title: title, // 分享标题
            link: url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                //                            alert('谢谢分享');
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                //                            alert('谢谢分享');
                // 用户取消分享后执行的回调函数
            }
        });

        //微信好友
        wx.onMenuShareAppMessage({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            type: type, // 分享类型,music、video或link,不填默认为link
            //  dataUrl: dataurl, // 如果type是music或video,则要提供数据链接,默认为空
            success: function() {
                //                            alert('谢谢分享');
            },
            cancel: function() {
                //                            alert('分享失败');
                // 用户取消分享后执行的回调函数
            }
        });

        //qq好友
        wx.onMenuShareQQ({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link:  url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        //腾讯微博
        wx.onMenuShareWeibo({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        //qq空间
        wx.onMenuShareQZone({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link:  url, // 分享链接
            imgUrl: imgUrl, // 分享图标
            success: function() {
                // 用户确认分享后执行的回调函数
            },
            cancel: function() {
                // 用户取消分享后执行的回调函数
            }
        });
        //                    alert("wx ready 哈哈哈");
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。

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


后端

@Controller
@RequestMapping(value = "v2", produces = {"application/json;charset=UTF-8"}, method = RequestMethod.POST)
public class WeiXinTokenConbtroller extends BaseController_v2 {

    private static final String appid = "自己的appid";
    private static final String secret = "secret需要去公众号里面去找";
    @Autowired
    private RedisUtil redisUtil;
    @ResponseBody
    @RequestMapping("getToken.jhtml")
    public Object getJSAPITicket(@RequestParam String url) {
        Map<String, Object> map = initMessage();
        try {
            //随机字符串
            String nonce_str = UUID.randomUUID().toString();
            //时间戳
            String timestamp = String.valueOf(System.currentTimeMillis() / 1000);

            String jsapi_ticket = getJSAPITicket();

            String signature;
            /*
             * 当前分享页面url
             * 注意这里参数名必须全部小写,且必须有序
             */
            String str = "jsapi_ticket=" + jsapi_ticket +
                    "&noncestr=" + nonce_str +
                    "×tamp=" + timestamp +
                    "&url=" + url;
            MessageDigest crypt = MessageDigest.getInstance("SHA-1");
            crypt.reset();
            crypt.update(str.getBytes("UTF-8"));
            signature = byteToHex(crypt.digest());
            Map<String, String> data = new HashMap<>();
            data.put("url", url);
            data.put("appid", appid);
            data.put("nonceStr", nonce_str);
            data.put("timestamp", timestamp);
            data.put("signature", signature);
            putDate(map, data);
        } catch (Exception e) {
            StaticLog.error("出错{}", e.getMessage());
            e.printStackTrace();
            return ERROR(map);
        }

        return SUCCESS(map);
    }

    private static String byteToHex(final byte[] hash) {
        Formatter formatter = new Formatter();
        for (byte b : hash) {
            formatter.format("%02x", b);
        }
        String result = formatter.toString();
        formatter.close();
        return result;
    }

    private String getJSAPITicket() {
        if (redisUtil.hasKey(Constant.JSAPI_TICKET)) {
            return (String) redisUtil.get(Constant.JSAPI_TICKET);
        }
        String jsapi_ticket;
        try {
            StringBuffer url = new StringBuffer("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=");
            url.append(getAccessToken());
            url.append("&type=jsapi");
            String data = HttpHelper.sendGet(url.toString());//这里参数传递只支持url拼接方式

            if (null == data || "".equals(data)) {
                StaticLog.info("jsapi_ticket 请求返回为空!!");
            }
            StaticLog.info("jsapi_ticket>>{}", data);
            JSONObject jsonObject = JSONObject.fromObject(data);
            jsapi_ticket = jsonObject.getString("ticket");
            if (null == jsapi_ticket || "".equals(jsapi_ticket)) {
                String errcode = jsonObject.getString("errcode");
                String errmsg = jsonObject.getString("errmsg");
                StaticLog.error("获取jsapi_ticket >>错误码:{},信息:{}", errcode, errmsg);
            } else {
                int expires_in = jsonObject.getInt("expires_in");
                StaticLog.info("access_token>>{},expires_in>>{}", jsapi_ticket, expires_in);
                
                //保存jsapi_ticket
                redisUtil.set(Constant.JSAPI_TICKET, jsapi_ticket, expires_in);
            }
            return jsapi_ticket;
        } catch (JSONException e){
            StaticLog.info("jsapi_ticket 异常!!");
            return null;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    private String getAccessToken() {
        if (redisUtil.hasKey(Constant.ACCESS_TOKEN)) {
            return (String) redisUtil.get(Constant.ACCESS_TOKEN);
        }
        String accessToken;
        try {
            StringBuffer url = new StringBuffer("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential");
            url.append("&appid=");
            url.append(appid);
            url.append("&secret=");
            url.append(secret);
            String data = HttpHelper.sendGet(url.toString());
            if (null == data || "".equals(data)) {
                StaticLog.info("获取access_token 请求返回为空!!");
            }
            StaticLog.info("获取access_token返回>>{}", data);
            JSONObject jsonObject = JSONObject.fromObject(data);
            accessToken = jsonObject.getString("access_token");
            if (null == accessToken || "".equals(accessToken)) {
                String errcode = jsonObject.getString("errcode");
                String errmsg = jsonObject.getString("errmsg");
                StaticLog.error("获取accessToken >>错误码:{},信息:{}", errcode, errmsg);
            } else {
                int expires_in = jsonObject.getInt("expires_in");
                StaticLog.info("access_token>>{},expires_in>>{}", accessToken, expires_in);
                //保存accessToken
                redisUtil.set(Constant.ACCESS_TOKEN, accessToken, expires_in);
            }
            return accessToken;
        }catch (JSONException e){
            StaticLog.info("获取access_token 异常!!");
            return null;
        }catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
}

注意:需要去自己的公众号平台绑定对应的域名

更多请看:微信公众平台



展开阅读全文

没有更多推荐了,返回首页