微信js-sdk+JAVA实现“分享到朋友圈”和“发送给朋友”功能详解

主要为以下实现步骤:

1.绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。(特别提示不需要加上http或者https,吃过亏)

2.页面引入js文件

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
   <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

3.通过config接口注入权限验证配置

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

  appId: '', // 必填,公众号的唯一标识

  timestamp: , // 必填,生成签名的时间戳

  nonceStr: '', // 必填,生成签名的随机串

  signature: '',// 必填,签名,见附录1

  jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2

});

4.通过ready接口处理成功验证

  wx.ready(function(){

   //详细代码

});

5.通过error接口处理失败验证

wx.error(function(res){});

详细页面代码

<script>
//微信分享朋友圈
$(function(){
 /***用户点击分享到微信圈后加载接口接口*******/
  var url=window.location.href.split('#')[0];
   url = url.replace(/&/g, '%26');
  console.log("url:"+url);
  $.ajax({
    url: "<%=basePath%>/lottery/shareToFriend.action?url="+url,
    type: "POST",
    async:true,
    cache: false,
    dataType: "json",
    success: function(data){
      wx.config({
       debug: false,
       appId: 'wx2948dfef9ef421ee',
       timestamp:data.timeStamp,
       nonceStr:data.nonceStr,
       signature:data.signature,
       jsApiList: [
         'checkJsApi',
         'onMenuShareTimeline',
         'hideOptionMenu',
         'onMenuShareAppMessage'
       ]
     }); 

     wx.ready(function(){
       //wx.hideOptionMenu();/***隐藏分享菜单****/
       wx.checkJsApi({
       jsApiList: [
        'getLocation',
        'onMenuShareTimeline',
        'onMenuShareAppMessage'
       ],
       success: function (res) {
        //alert(res.errMsg);
       }
      }); 

      wx.onMenuShareAppMessage({
         title: '刮刮乐',
         desc: '刮刮乐开始啦',
         link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}',
         imgUrl: '<%=basePath%>/resources/qjc/img/start.png',
         trigger: function (res) {
          //alert('用户点击发送给朋友');
         },
         success: function (res) {
          alert('您已获得抽奖机会,赶紧去赢大奖吧~~');
          //分享之后增加游戏次数
          $.ajax({
            url: "<%=basePath%>/lottery/rewardPlayCount.action?openId=${openId}&lotteryId=${lottery.id}&shareType=friend",
            type: "POST",
            async:true,
            cache: false,
            dataType: "json",
            success: function(data){ 

            }
           });
         },
         cancel: function (res) {
          //alert('已取消');
         },
         fail: function (res) {
          alert(res.errMsg);
         }
        }); 

       // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
       wx.onMenuShareTimeline({
         title: '刮刮乐',
         desc: '刮刮乐开始啦',
         link: '<%=basePath%>/lottery/lottery.action?lottery.id=${lottery.id}',
         imgUrl: '<%=basePath%>/resources/qjc/img/start.png',
         trigger: function (res) {
          //alert('用户点击分享到朋友圈');
         },
         success: function (res) {
          alert('您已获得抽奖机会,赶紧去赢大奖吧~~');
          //分享之后增加游戏次数
          $.ajax({
            url: "<%=basePath%>/lottery/rewardPlayCount.action?openId=${openId}&lotteryId=${lottery.id}&shareType=friendCircle",
            type: "POST",
            async:true,
            cache: false,
            dataType: "json",
            success: function(data){ 

            }
           });
         },
         cancel: function (res) {
          //alert('已取消');
         },
         fail: function (res) {
          alert(res.errMsg);
         }
      }); 

      wx.error(function (res) {
          alert(res.errMsg);
        });
      });
    },
    error: function() {
      alert('ajax request failed!!!!');
      return;
    }
  });
 }); 

</script>

java后台action代码:

//微信分享
  public void shareToFriend(){
    HttpServletRequest request = ServletActionContext.getRequest();
    String timeStamp = Sha1Util.getTimeStamp();//时间戳
    String nonceStr = WxConfig.getUUID();//随机字符串,不长于32位
    String url=request.getParameter("url");
    String signature = WxConfig.getSignature("APPId", "APP_secret", url, timeStamp, nonceStr);
    request.setAttribute("timeStamp", timeStamp);
    request.setAttribute("nonceStr", nonceStr);
    request.setAttribute("url", url);
    request.setAttribute("signature", signature);
    WXjssdk result = new WXjssdk(timeStamp,nonceStr,signature,url);
    CommonUtil.returnMsg(ServletActionContext.getResponse(), new Gson().toJson(result));
  }

WxConfig.java代码

">//jsapi_ticket
  public final static String WEIXIN_JSAPI_TICKET_URL ="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi"; 

  //access_token
  public static String getAccessToken(String appId,String appSecret){
    String access_token;
    access_token = mapToken.get("accessToken");
    if(access_token==null){
      String url = HttpUtil.WEIXIN_HOST_API + "/cgi-bin/token?grant_type=client_credential&appid="+appId+"&secret="+appSecret;
      String menuJsonStr = HttpUtil.get(url);
      final Type type = new TypeToken<Map<String, Object>>() {}.getType();
      final Map<Object, Object> accessTokenInfo = new Gson().fromJson(menuJsonStr, type);
      try{
        access_token = accessTokenInfo.get("access_token").toString();
        Object expires_in = accessTokenInfo.get("expires_in");
        mapToken.put("accessToken", access_token);
        logger.info("access_token:"+access_token+";expires_in:"+expires_in);
      }catch (JSONException e) {
        access_token = null;
        e.printStackTrace();
        logger.error("errcode:{}:"+accessTokenInfo.get("errcode")+"errmsg:{}:"+accessTokenInfo.get("errmsg"));
      }
    }
    return access_token;
  } 

  //jsapi_ticket
  public static String getJsapiTicket(String accessToken){
    String ticket;
    ticket = mapTicket.get("ticket");
    if(ticket==null){
      String url = HttpUtil.WEIXIN_HOST_API + "/cgi-bin/ticket/getticket?access_token="+accessToken+"&type=jsapi";
      String menuJsonStr = HttpUtil.get(url);
      final Type type = new TypeToken<Map<String, Object>>() {}.getType();
      final Map<Object, Object> ticketInfo = new Gson().fromJson(menuJsonStr, type);
      try{
        ticket = ticketInfo.get("ticket").toString();
        String expires_in = ticketInfo.get("expires_in").toString();
        mapTicket.put("ticket", ticket);
        logger.info("jsapi_ticket:"+ticket+";expires_in:"+expires_in);
      }catch (JSONException e) {
        ticket = null;
        e.printStackTrace();
        logger.error("ticket errcode:{}:"+ticketInfo.get("errcode")+"errmsg:{}:"+ticketInfo.get("errmsg"));
      }
    }
    return ticket;
  } 

   //生成随机字符串UUID
  public static String getUUID(){
     String uuid = UUID.randomUUID().toString().trim().replaceAll("-", "");
     return uuid;
  }  

  //JS-SDK Signature
  public static String getSignature(String appId,String appSecret,String url,String timeStamp,String nonceStr){
    String accessToken = getAccessToken(appId,appSecret);
    String jsapi_ticket = getJsapiTicket(accessToken);
    logger.info("accessToken==="+accessToken);
    String signValue = "jsapi_ticket="+jsapi_ticket+"&noncestr="+nonceStr+"×tamp="+timeStamp+"&url="+url;
    logger.info("微信JS-SDK权限验证的签名串:"+signValue);
    //这个签名.主要是给加载微信js使用.别和上面的搞混了.
    String signature = Sha1Util.getSha1((signValue));
    logger.info("微信JS-SDK权限验证的签名:"+signature);
    return signature;
  }

另外项目用到的Sha1Util.java和MD5Util.java可以直接在平台下载。

您可能感兴趣的文章:

  • 微信js-sdk上传与下载图片接口用法示例
  • 微信js-sdk地理位置接口用法示例
  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】
  • 解析微信JS-SDK配置授权,实现分享接口
  • 微信JS-SDK选取手机照片上传功能
  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
  • PHP实现微信JS-SDK接口选择相册及拍照并上传的方法
  • 微信 java 实现js-sdk 图片上传下载完整流程
  • 微信js-sdk界面操作接口用法示例
  • 最详细的ASP.NET微信JS-SDK支付代码
  • php微信公众号js-sdk开发应用
  • 微信JS-SDK坐标位置如何转换为百度地图坐标
  • 详解基于Node.js的微信JS-SDK后端接口实现代码
  • 微信js-sdk分享功能接口常用逻辑封装示例
  • 微信JS-SDK分享功能的.Net实现代码
  • php版微信js-sdk支付接口类用法示例
  • ASP.NET MVC 微信JS-SDK认证
  • 微信开发 JS-SDK 6.0.2 经常遇到问题总结
(0)

相关推荐

  • 微信js-sdk地理位置接口用法示例

    本文实例讲述了微信js-sdk地理位置接口用法.分享给大家供大家参考,具体如下: 前提,已经在wx.config()中权限验证通过,官方文档地址 官方api 使用微信内置地图查看位置接口 wx.openLocation({ latitude: 0, // 纬度,浮点数,范围为90 ~ -90 longitude: 0, // 经度,浮点数,范围为180 ~ -180. name: '', // 位置名 address: '', // 地址详情说明 scale: 1, // 地图缩放级别,整形值,

  • 微信js-sdk界面操作接口用法示例

    本文实例讲述了微信js-sdk界面操作接口用法.分享给大家供大家参考,具体如下: 前提已经在wx.config()中获取到接口的权限,以官方文档为准 说明: 1.目前提供的界面操作接口和使用都比较简单 2.有些好像还有点重复 3."调整字体"."投诉"这两个测试的时候无法隐藏,属于基础类 一.关闭微信浏览器窗口 wx.closeWindow() window.close()关闭微信浏览器无效,当前方法被屏蔽,在 Cordova的WebView中也是这样不可用 二.显

  • PHP实现微信JS-SDK接口选择相册及拍照并上传的方法

    本文实例讲述了PHP实现微信JS-SDK接口选择相册及拍照并上传的方法.分享给大家供大家参考,具体如下: 理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果图: 通过微信js接口,调用底层程序. 需要引入js文件,并进行配置. <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> wx.c

  • 微信JS-SDK选取手机照片上传功能

    项目中遇到需要选取照片上传的需求,因为网页运行在微信的浏览器里面,所以用微信的 js-sdk 提供的选取照片功能,来进行项目开发.实际开发中需要用到微信web开发者工具,详细参考链接:https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html. 1.配置微信JS-SDK相关文件 1).JSSDk使用最新的1.2.0版本:https://res.wx.qq.com/open/js/jweixin-1.2.0.js.

  • 微信js-sdk分享功能接口常用逻辑封装示例

    本文实例讲述了微信js-sdk分享功能接口常用逻辑封装.分享给大家供大家参考,具体如下: 微信js-sdk 1.0,分享说明: 1.目前支持的分享接口5个,其中分享腾讯微博基本可以忽略 2.接口只是定义分享时的数据,没有提供触发分享功能 一.在ready事件使用使用示例 //分享对象使用 var shareData={ title:'分享标题', desc:'分享描述', link:'http://www.gongjuji.net', imgUrl:'http://www.gongjuji.ne

  • php版微信js-sdk支付接口类用法示例

    本文实例讲述了php版微信js-sdk支付接口类用法.分享给大家供大家参考,具体如下: 这个支付类是根据官方的文档修改而来!主要实现生成JS API .Native的package签名包和Native响应的XML格式数据.注释都标上了各方法的用意.由于package包签名,略复杂,这个要自己多花时间去对应去看和log出文件来一一对比!当然只要你用上教程的类,设置好对应的参数就可以正确的生成package参数等 <?php if (isset($argc) && $argc >=

  • 微信js-sdk上传与下载图片接口用法示例

    本文实例讲述了微信js-sdk上传与下载图片接口用法.分享给大家供大家参考,具体如下: 前提已经在wx.config()中,将图片接口验证通过. 微信js-sdk 中上传图片接口(uploadImage)和下载图片接口(downloadImage)都是针对微信服务器本身的.以官方文档为准 注: 1.使用chooseImage接口获取到微信客户端图片地址的与都是 weixin://xxxx 2.上传图片有效期3天,可用微信多媒体接口下载图片到自己的服务器,此处获得的 serverId 即 medi

  • 微信JS-SDK自定义分享功能实例详解【分享给朋友/分享到朋友圈】

    本文实例讲述了微信JS-SDK自定义分享功能.分享给大家供大家参考,具体如下: 分享出去的内容,可以通过jssdk进行修改. 1.配置jssdk Wx_config.html <?php import("@.ORG.jssdk"); $jssdk = new JSSDK(C('oauth_config.appid'), C('oauth_config.appsecret')); $signPackage = $jssdk->GetSignPackage(); ?> &

  • 微信JS-SDK分享功能的.Net实现代码

    JS-SDK接口是什么? 为了方便开发者实现微信内的网页(基于微信浏览器访问的网页)功能,比如拍照.选图.语音.位置等手机系统的能力,并方便开发者直接使用微信分享.扫一扫等微信特有的能力,微信推出了JS-SDK的整体开发包,供开发者方便使用. 分享功能 官方文档里提供了php.java.node.js以及python的示例代码,唯独没有c#版的,为了弥补广大.net用户的需求,我把php版本的示例代码逻辑照搬成了.net版,并在网页前端中加入了分享功能,希望对大家有用. 程序实现 流程图 程序里

  • 微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例

    本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览网络图片http链接的 2.预览本地图片wenxin:// 链接的 一.预览图片接口 注: 1.预览图片接口目前只支持微信手机版 2.预览图片只支持http连接,对于weixin:// 无法预览 3.预览图片的地址需要进行加密处理,尤其路径中有中文的情况下,需要使用window.encodeURI(

  • 微信开发 JS-SDK 6.0.2 经常遇到问题总结

    0.为什么以前不需要配置这么麻烦就可以修改分享description 等信息,但是现在不行了. 因为6.0.2版本之前没有做权限验证,所以config都是ok,但这并不意味着你config中的签名是OK的,请在6.0.2检验是否生成正确的签名以保证config在高版本中也ok. 所以现在需要配置正确签名 wx.config 1.登录微信后台(mp.weixin.qq.com)-->基本配置 获取AppID,AppSecret 2. 获取 access_token https://api.weix

  • 微信 java 实现js-sdk 图片上传下载完整流程

    最近做的一个项目刚好用到微信js-sdk的图片上传接口,在这里做一下总结. 在这里能知道使用js api的基本配置 https://mp.weixin.qq.com/wiki t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 我这里没有用checkJsApi去判断当前客户端版本是否支持指定JS接口,好.通过看开发文档,我们知道调用js接口直接都要通过config接口注入权限验证配置 <code class="

  • php微信公众号js-sdk开发应用

    测试js的接口功能,我用的是BAE服务器不是SAE服务器.SAE服务器不能写入文件,测试会出问题. 什么叫js-sdk,我先演示js-sdk接口的具体作用. 我在微信随便打开一片推送文章如下图: 点开第一篇文章 上面就是我们的连接文章,如果我们把这篇文章发送给朋友,显示效果如下图: 分享到朋友圈我们再来看看效果: 为什么同样是文章连接,在公众号.发送给朋友.发送到朋友圈显示的界面效果不一样.公众号的显示效果是因为微信公众帐号在推送的时候调用了微信的消息接口,而后两者是因为页面调用js-sdk相关

  • ASP.NET MVC 微信JS-SDK认证

    ASP.NET MVC微信JS-SDK认证,具体内容: 写在前面 前阵子因为有个项目需要做微信自定义分享功能,因而去研究了下微信JS-SDK相关知识. 此文做个简单的记(tu)录(cao)... 开始 所有的东西都从文档开始:微信JSSDK说明文档 项目需要用到的是分享接口不过使用微信JS-SDK之前,需要做JS接口认证. 认证如下: 步骤一:绑定域名 步骤二:引入JS文件 步骤三:通过config接口注入权限验证配置 步骤四:通过ready接口处理成功验证 步骤五:通过error接口处理失败验

  • 微信JS-SDK坐标位置如何转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流程讲解. 1.微信JS-SDK开发文档 首先进入官网的帮助文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115&token=&lang=zh_CN 可对文档进行详细的研读,要获取位置信息,分以下步骤:

  • 解析微信JS-SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑,后面看到"config:ok"的时候真的算是石头落地,瞬间感觉世界很美好.. 这篇文章是微信开发的很多前置条件,包括了服务端基于JAVA的获取和缓存全局的access_token,获取和缓存全局的jsapi_ticket,以及前端配置授权组件封装,调用分享组件封装. 配置授权思路:首先根据

  • 详解基于Node.js的微信JS-SDK后端接口实现代码

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分享可以自定义内容,如下: 我承认,虽然这分享的标题和内容也并不正经,但这不妨碍我表达我们可以通过微信JSSDK定义分享内容,接下来我们将一步一步从零实现JSSDK从后端Node.js的接入. 成为测试公众号开发者 登录测试公众号后台 首先我们需要在微信公众平台申请测试接口,地址:https://mp

  • 最详细的ASP.NET微信JS-SDK支付代码

    本文实例为大家分享了微信JS SDK支付的具体代码,供大家参考,具体内容如下 模型层实体类: public class JsEntities { /// <summary> /// 公众号id /// </summary> public string appId { get; set; } /// <summary> /// 时间戳 /// </summary> public string timeStamp { get; set; } /// <su

随机推荐