发布时间:2018-11-07
 
技术:springboot+maven
 

概述

微信JS-SDK实现自定义分享功能,分享给朋友,分享到朋友圈

详细

概述

概述

微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享到朋友圈,关注微信号等按钮。

一、前言

(1)适合人群

1,JAVA服务端开发人员

2,初级人员开发人员

3,了解spring springboot + maven

3,了解小程序开发跟前端人员接口对接

(2)你需要准备什么?

1,积极主动学习

2,微信公众号开发基本流程

3,java后端几大框架掌握如(spring springboot maven )

二、前期准备工作

软件环境:eclipse

官方下载:https://www.eclipse.org/downloads/

1 ,基本需求

自定义微信分享的效果(自定义缩略图,标题,摘要)

三、项目结构

四、微信开发步骤

Java微信分享,步骤是

1、根据当前的url,获取signature,nonceStr,timestamp 和appId。

2、通过signature,nonceStr,timestamp 和appId来配置微信 wx.config。

3、通过wx.ready实现微信分享功能。

五、前端实现

引入微信JS-SDK

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
//分享核心js代码
//获取随机串
var createNonceStr = function() {
return Math.random().toString(36).substr(2, 15);
}; // timestamp
var createTimeStamp = function () {
return parseInt(new Date().getTime() / 1000) + '';
}; $.ajax({
url :'http://jsaxwv.natappfree.cc/share/getSignature',
type: 'post', //HTTP请求类型
data: {
url:location.href.split('#')[0], //url 如果写的是固定的值的话,分享之后在分享会报错
timestamp: createTimeStamp,
nonce_str: createNonceStr
},
timeout: 10000, //超时时间设置为10秒;
success: function(data) { //微信初始化
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: "", // 必填,公众号的唯一标识
timestamp: data.timestamp , // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名,见附录1
jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage","onMenuShareQQ"] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
var openid=$("#openid").html(); wx.ready(function(){
var sdata = {
imgUrl: "http://jsaxwv.natappfree.cc/share/img/blog/logo.png", // 分享图标
link: "http://yst3qg.natappfree.cc/bootdo/wx/weixinAutoLogin?userId="+openid,
title: "燕子约一周年庆典", // 分享标题
desc: "分享描述", // 分享描述
success: function () {
alert("分享成功");
},
cancel: function () {
alert("分享失败");
}
};
wx.onMenuShareAppMessage(sdata);// 发送给朋友
//wx.onMenuShareTimeline(sdata);//分享到朋友圈
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
//alert("抱歉,服务器初始化错误。");
});
},
error: function(xhr, type, errorThrown) {
//异常处理;
console.log(xhr);
console.log(type);
console.log(errorThrown);
}
}); </script>

六、java后端实现

Java代码,获取 signature,nonceStr,timestamp 和appId

	@RequestMapping(value = "/getSignature", method = RequestMethod.POST)
@ResponseBody
public Map WeixinController(HttpServletRequest request, HttpServletResponse response) {
response.setHeader("Access-Control-Allow-Origin", "*");
Map ret = new HashMap();
//获取前台传来的三个参数
String timestamp = request.getParameter("timestamp");
String nonce_str = request.getParameter("nonce_str");
String url = request.getParameter("url");
logger.info("url"+url+"==============="+nonce_str+"============"+timestamp);
String accessToken = null; accessToken = redisTemplate.opsForValue().get("accessToken")+"";
accessToken = shareUtil.getToken(GET_TOKEN_URL, APP_ID, SECRET);// 获取token
String ticket = shareUtil.getTicket(GET_SIGNATURE_URL,accessToken); // 获取ticket
String signature = shareUtil.getSignature(ticket,url,nonce_str,timestamp); //获取签名 ret.put("nonceStr", nonce_str);
ret.put("timestamp", timestamp);
ret.put("signature", signature);
return ret;
}

工具类我就把整个贴上来了,其中有些方法是没有用到的。

getSignature()整个方法是微信分享中的核心方法,用来获取signature,nonceStr,timestamp 和appId这几个核心参数。

    // 获取access_token
public static String getToken(String apiurl, String appid, String secret){
//拼接访问地址
String turl = String.format("%s?grant_type=client_credential&appid=%s&secret=%s", apiurl,appid, secret); HttpClient client = new DefaultHttpClient();
//get请求
HttpGet get = new HttpGet(turl);
// 初始化解析json格式的对象
JsonParser jsonparer = new JsonParser();
String result = null;
try
{
HttpResponse res = client.execute(get);
String responseContent = null; // 初始化响应内容
HttpEntity entity = (HttpEntity) res.getEntity();
//设置编码格式
responseContent = EntityUtils.toString((org.apache.http.HttpEntity) entity, "UTF-8");
// 将json字符串转换为json对象
JsonObject json = jsonparer.parse(responseContent).getAsJsonObject(); if (res.getStatusLine().getStatusCode() == HttpStatus.SC_OK)
{
if (json.get("errcode") != null){
// 错误时微信会返回错误码等信息,{"errcode":40013,"errmsg":"invalid appid"}
}
else{
// 正常情况下{"access_token":"ACCESS_TOKEN","expires_in":7200}
result = json.get("access_token").getAsString();
}
}
}
catch (Exception e){
e.printStackTrace();
}
finally{
// 关闭连接 ,释放资源
client.getConnectionManager().shutdown();
return result;
}
}

// 获取getTicket

    // 获取getTicket
public static String getTicket(String apiurl,String access_token){ String turl = String.format("%s?access_token=%s&type=jsapi",apiurl,access_token); HttpClient client = new DefaultHttpClient();
HttpGet get = new HttpGet(turl); JsonParser jsonparer = new JsonParser();// 初始化解析json格式的对象
String result = null;
try
{
HttpResponse res = client.execute(get);
String responseContent = null; // 响应内容
HttpEntity entity = res.getEntity();
responseContent = EntityUtils.toString(entity, "UTF-8");
JsonObject json = jsonparer.parse(responseContent).getAsJsonObject(); // 将json字符串转换为json对象
if (res.getStatusLine().getStatusCode() == HttpStatus.SC_OK){
if (json.get("errcode") == null){
// 错误时微信会返回错误码等信息,{"errcode":40013,"errmsg":"invalid appid"}
}
else{
// 正常情况下{"access_token":"ACCESS_TOKEN","expires_in":7200}
result = json.get("ticket").getAsString();
}
}
}
catch (Exception e)
{
e.printStackTrace();
}
finally
{
// 关闭连接 ,释放资源
client.getConnectionManager().shutdown();
return result;
}
}

七、申请说明与其他

首先由于公众号认证一直没有申请下来所以准备了一下微信测试账号。这里简单说一下微信测试账号怎么搞定。需要申请微信测试公众号的小伙伴可以走一下这个网址:

【链接】微信公众平台接口测试帐号申请

http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

js接口安全域修改

下面我们来测试一下效果 访问地址如 http://jsaxwv.natappfree.cc/share/index

测试结果ok正常带有标题描述自定义图片

如果没有域名的可以在这申请做端口映射

https://www.toutiao.com/a6470112787753337358/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&timestamp=1534840577&app=news_article&utm_source=weixin&iid=40869406995&utm_medium=toutiao_android&group_id=6470112787753337358

注:本文著作权归作者,由demo大师发表,拒绝转载,转载需要作者授权

Java微信分享接口开发的更多相关文章

  1. JAVA微信支付接口开发——支付

    微信支付接口开发--支付 这几天在做支付服务,系统接入了支付宝.微信.银联三方支付接口.个人感觉支付宝的接口开发较为简单,并且易于测试. 关于数据传输,微信是用xml,所以需要对xml进行解析. 1. ...

  2. Java微信公众平台开发_02_启用服务器配置

    源码将在晚上上传到 github 一.准备阶段 需要准备事项: 1.一个能在公网上访问的项目: 见:[  Java微信公众平台开发_01_本地服务器映射外网  ] 2.一个微信公众平台账号: 去注册: ...

  3. Java微信公众平台开发_07_JSSDK图片上传

    一.本节要点 1.获取jsapi_ticket //2.获取getJsapiTicket的接口地址,有效期为7200秒 private static final String GET_JSAPITIC ...

  4. Java微信公众平台开发【番外篇】(七)--公众平台测试帐号的申请

    转自:http://www.cuiyongzhi.com/post/45.html 前面几篇一直都在写一些比较基础接口的使用,在这个过程中一直使用的都是我个人微博认证的一个个人账号,原本准备这篇是写[ ...

  5. Java微信公众号开发梳理

    Java微信公众号开发梳理 现在微信公众平台的开发已经越来越普遍,这次开发需要用到微信公众平台.因此做一个简单的记录,也算是给那些没踩过坑的童鞋一些启示吧.我将分几块来简单的描述一下,之后会做详细的说 ...

  6. php微信支付接口开发程序

    php微信支付接口开发程序讲解 微信支付接口现在也慢慢的像支付宝一个可以利用api接口来实现第三方网站或应用进行支付了, 下文整理了一个php微信支付接口开发程序并且己测试,有兴趣的朋友可进入参考. ...

  7. php微信支付接口开发程序(流程已通)

    php微信支付接口开发程序(流程已通) 来源:未知    时间:2014-12-11 17:11   阅读数:11843   作者:xxadmin [导读] 微信支付接口现在也慢慢的像支付宝一个可以利 ...

  8. Java微信公众平台开发--番外篇,对GlobalConstants文件的补充

    转自:http://www.cuiyongzhi.com/post/63.html 之前发过一个[微信开发]系列性的文章,也引来了不少朋友观看和点评交流,可能我在写文章时有所疏忽,对部分文件给出的不是 ...

  9. 微信分享接口的java开发的一些小步骤

    1.配置接口信息进行验证 代码如下: /**     * 访问没认证的地址跳转     *     * @param request     * @return 登录页面     * @throws ...

随机推荐

  1. android adb源码分析(1)

    ADB是Android debug bridge的缩写,它使用PC机可以通过USB或网络与android设备通讯. adb的源码位于system/core/adb目录下,先来看下编译脚本Android ...

  2. position:fixed ,锚点定位不准确的问题

    解决方案: 参照 stackoverflow 的做法,在主体内容前加一个暗锚 <div class="anmao" id="experts">< ...

  3. Flask Restful服务简单实现

    官网:http://flask.pocoo.org/docs/1.0/quickstart/#routing 1.安装 windows下:pip3 install Flask 具体参照:windows ...

  4. 开源ckplayer 网页播放器去logo去广告去水印修改

    功能设置介绍 本教程涉及到以下各点,点击对应标题页面将直接滑动到相应内容: 1:修改或去掉播放器前置logo 2:修改或去掉右上角的logo 3:修改.关闭.设置滚动文字广告 4:去掉右边的开关灯分享 ...

  5. 技能|三次简化一张图:一招理解LSTM/GRU门控机制

    作者 | 张皓 引言 RNN是深度学习中用于处理时序数据的关键技术, 目前已在自然语言处理, 语音识别, 视频识别等领域取得重要突破, 然而梯度消失现象制约着RNN的实际应用.LSTM和GRU是两种目 ...

  6. Mahout初体验

    Mahout运行版本: mahout-0.5, mahout-0.6, mahout-0.7,是基于hadoop-0.20.2x的. mahout-0.8, mahout-0.9,是基于hadoop- ...

  7. JAVA-错误The type BookServiceImpl must implement the inherited abstract method

    错误原因 :是因为class继承了其他的类,没有导入过来,选择add unimplemented methods进行解决

  8. [Functional Programming] Arrow contramap vs map and promap

    In previous post, Arrow Functor with contramap, we have seen how to opreating on params before we in ...

  9. js 前加分号和感叹号的含义

    ;!function(){}();  ;!有什么用? 从语法上来开.Javascript中分号表示语句结束,在开头加上.可能是为了压缩的时候和别的方法切割一下,表示一个新的语句開始.所以,假设在一个单 ...

  10. 持续集成+自动化部署[代码流水线管理及Jenkins和gitlab集成]

    转载:https://www.abcdocker.com/abcdocker/2065 一.代码流水线管理 Pipeline名词顾名思义就是流水线的意思,因为公司可能会有很多项目.如果使用jenkin ...