微信公众号jssdk分享功能通用写法

696 阅读1分钟

前端JS通用代码

请注意传给后台的url是当前浏览器的地址并且进行encodeURIComponent处理: encodeURIComponent(location.href.split('#')[0]),而方法中的url则是用于分享到朋友圈或者微信好友的跳转链接。注:这里很多人会混淆

function WeChat(url, title, img, desc) {
    var configData = {
        title: title, // 分享标题
        desc: desc, // 分享描述
        link: url, // 分享链接
        imgUrl: img
    };
    $.ajax({
        url: basePath+'/wechat/wechatShare.ky',
        type: 'POST',
        data: {
        	url:encodeURIComponent(location.href.split('#')[0]),
        	debug:"false",
        	jsApiList:"onMenuShareAppMessage,onMenuShareTimeline"
        },
        async: false,
        success: function (resp) {
            if (resp.code=="00") {
            	console.log(resp.data);
                //wx.config(resp.data);
                wx.config(resp.data);
                
                wx.ready(function () {
					    
				     wx.onMenuShareAppMessage({ 
					        title: configData.title, // 分享标题
					        desc: configData.desc, // 分享描述
					        link: configData.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					        imgUrl: configData.imgUrl, // 分享图标
					        success: function () {
					            updateAppMessageShareData();
					        }
				      });

                		              
		              //分享给朋友圈
		              wx.onMenuShareTimeline({ 
					        title: configData.title, // 分享标题
					        link: configData.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
					        imgUrl: configData.imgUrl, // 分享图标
					        success: function() {
					            updateTimelineShareData();
					        }
					      });

                    wx.error(function (res) {
                        alert(res.errMsg); //打印错误消息。及把 debug:false,设置为debug:ture就可以直接在网页上看到弹出的错误提示
                    });
                });
            } else {
                return;
            }
        },error:function(e){
            console.log(e);
        }
    });
}

公共方法调用

var url = "http://www.baidu.com/test";
var imgUrl =  responseData.imgUrl;
var title= responseData.title; 
var desc = responseData.desc;
WeChat(url, title, imgUrl, desc);

后端接收处理代码

后台需要进行一次解码操作,记得加入微信工具包

      <dependency>
          <groupId>com.github.liyiorg</groupId>
          <artifactId>weixin-popular</artifactId>
          <version>2.8.27</version>
      </dependency>

 /**
     * 向微信请求accessToken和ticket
     * @param url
     * @return
     */
    @RequestMapping(method = RequestMethod.POST, value = "/wechatShare.ky")
    @ResponseBody
    @SysLog(actionName = "向微信请求accessToken和ticket")
    public Object wechatShare(@RequestParam("url") String url,
                              @RequestParam("debug") boolean debug,
                              @RequestParam("jsApiList") String jsApiList) {
        try{
            log.info("wechatShare="+url+" debug="+debug+" jsApiList="+jsApiList);
            url = URLDecoder.decode(url,"UTF-8");
            //检查Redis中现有的accessToken和ticket
            //ticket
            String ticket = this.wechatService.getWxTicket();
            //生成所需的参数
            String jsonResult = JsUtil.generateConfigJson(ticket,debug,appId,url,jsApiList.split(","));
            return ResponseVo.buildSuccessResponse(JSON.parseObject(jsonResult));
        }catch(Exception e){
            log.error(e);
            return ResponseVo.buildResponse(ResponseEnum.WECHAT_SHARE_ERROR);
        }
    }