微信公众号网页分享功能开发

现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题，和分享链接的描述及分享出去的图像，例如下面的分享出去的链接：

上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果。

微信JS-SDK Demo :这个是微信网页分享出去的标题。

微信JS-SDK,帮助第三方为用户提供更优质的移动web服务：这个是被分享的这个页面的分享描述。

微信图标：这个就是自己网站或者自己自定义的图像。

上面这个是微信官方网页分享出去的定义描述，那么怎样实现自己网站网页的自定义分享的标题，描述及分享出去的显示图片呢，下面就具体的来探讨一下微信网页第三方分享自定的实现方式。

关于微信网页分享自定义主要有两方面的工作需要我们来做，一是：分享页面的js分享代码的编写，二是：微信分享网页的链接地址签名。

首先来看一下网页的连接地址签名，这个功能主要是在服务端来时实现。

第一步：基础数据的准备，需要如下数据信息：

APPID:微信公众号的id; APP_SECRECT:公众号号的密钥。签名的网站域名（这个建议配置在配置文件中）。

第二步：微信签名数据的准备：

appid,secret,url将这三个参数放入map中，键值为：appid=微信公众号的id，secret=APP_SECRECT，url=网站的域名+网页的请求地址+请求的参数。

代码的实现方式如下：

1. controller层的代码实现：

@RequestMapping("cover")
public String identifyCover(HttpServletRequest request, HttpServletResponse response)
//微信分享授权开始
String appId = ;//取项目中配置的公众号id
String secret = ;//取项目中配置的公众号密钥
//例如我们有一个分享的链接为：http://test.weixinfwenx.cn/project/fenxiang.do?id=1&name=2;
//那么domainAddr = http://test.weixinfwenx.cn,这个可以动态的配置在项目里，方便测试环境和生产
//域名的切换
String domainAddr = "";//项目中配置的网站的域名
//这个取的是链接上的参数，例如在上面的这个链接中，id=1&name=2就是我们要动态去的参数，可能有人
//会想到，这个两个参数直接写在地址中不是挺简单的为啥还要动态去获取这个参数呢；在这里我们引出了一
//个微信二次分享的问题，就是别人转发的链接给你，然后你再转发给别人，在你转发给别人后这个链接的签
//名就会失败，为啥呢，因为经过再次转发的链接，微信会自动加上一些自己的参数，这样会导致页面上微信
//分享的链接和签名的链接不一致。直接导致自定义的标题和链接描述，显示失败，失败原因是微信默认的在
//我们的分享链接上加上了&from=singlemessage。
String str = request.getQueryString();
Map<String, String> map = new HashMap<String, String>();
map.put("appid", appId);
map.put("secret", secret);
String url = domainAddr + "/project/fenxiang.do?"+str; map.put("url", url);
//这个地址是传给页面使用
request.setAttribute("fenxurl", url);
//开始微信分享链接签名
Map<String, String> params = weixinService.weixinjsIntefaceSign(map);
request.setAttribute("params", params);
return "自己的页面";

2.service层的实现代码：

接口：

public interface weixinService{
/**
* @Title: weixinjsIntefaceSign
* @Description: 微信js接口授权
* @param map
* @return
* @return: Map<String,String>
*/
public Map<String,String> weixinjsIntefaceSign(Map<String,String> map);

接口实现类：

public class weixinServiceImpl implements weixinService{
public Map<String, String> weixinjsIntefaceSign(Map<String, String> map){
//查看缓存数据是否存在
String cacheAccess_token = jedis.get("access_token");
String cacheTicket = jedis.get("ticket");
//取出来为空的话则说明cacheAccess_token缓存过期，重新获取
if(null == cacheAccess_token){
///start
//获取cacheAccess_token
//这段代码实际开发过程中要写成一个方法，我这里为了演示方便写在了一起。
StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/token?");
buffer.append("appid="+map.get("appid"));
buffer.append("&secret="+map.get("secret"));
buffer.append("&grant_type=client_credential");
String resultMsg = SendUtils.sendGet(buffer.toString(), "UTF-8");
/ end
JSONObject json = new JSONObject(resultMsg);
cacheAccess_token = json.getString("access_token");
jedis.set("access_token",cacheAccess_token, "NX", "EX", 3600);//单位是秒
}
//取出来为空的话则说明cacheTicket缓存过期，重新获取
if(null == cacheTicket){
// start
获得jsapi_ticket
StringBuffer buffer = new StringBuffer();
buffer.append("https://api.weixin.qq.com/cgi-bin/ticket/getticket?");
buffer.append("access_token="+access_token);
buffer.append("&type=jsapi");
String ticket = SendUtils.sendGet(buffer.toString(), "UTF-8");
/ end
JSONObject json2 = new JSONObject(ticket);
cacheTicket = json2.getString("ticket");
jedis.set("ticket",cacheTicket, "NX", "EX", 3600);//单位是秒
}
//生成签名
SortedMap<Object,Object> params = new TreeMap<Object,Object>();
params.put("timestamp", Long.toString(new Date().getTime()/1000));
params.put("noncestr", this.CreateNoncestr());
params.put("jsapi_ticket",cacheTicket);
params.put("url",map.get("url"));//url地址
StringBuffer sb = new StringBuffer();
Set es = params.entrySet();
Iterator it = es.iterator();
while(it.hasNext()) {
Map.Entry entry = (Map.Entry)it.next();
String k = (String)entry.getKey();
Object v = entry.getValue();
sb.append(k + "=" + v + "&");
}
String signStr = sb.toString().substring(0, sb.toString().length()-1);
String sign = Sha1.getSha1Sign(signStr);//签名
Map<String, String> result = new HashMap<String,String>();
result.put("timestamp",(String)params.get("timestamp"));
result.put("noncestr", (String)params.get("noncestr"));
result.put("signature", sign);
result.put("appId",map.get("appid"));
return result;
return null;
}
private String CreateNoncestr() {
String chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
String res = "";
for (int i = 0; i < 16; i++) {
Random rd = new Random();
res += chars.charAt(rd.nextInt(chars.length() - 1));
}
return res;
}
}

辅助工具类：

/**
*
* 加密工具类
*
*/
public class Sha1 {
public static String getSha1Sign(String decript) {
try {
MessageDigest digest = java.security.MessageDigest.getInstance("SHA-1");
try {
digest.update(decript.getBytes("UTF-8"));
} catch (UnsupportedEncodingException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
byte messageDigest[] = digest.digest();
// Create Hex String
StringBuffer hexString = new StringBuffer();
// 字节数组转换为十六进制数
for (int i = 0; i < messageDigest.length; i++) {
String shaHex = Integer.toHexString(messageDigest[i] & 0xFF);
if (shaHex.length() < 2) {
hexString.append(0);
}
hexString.append(shaHex);
}
return hexString.toString();
} catch (NoSuchAlgorithmException e) {
e.printStackTrace();
}
return "";
}
}

http请求工具类：

/**
* http请求工具类
*
*/
public class SendUtils {
public static String sendGet(String url,String charset){
//新建客户端
HttpClient httpclient = new HttpClient();
GetMethod getMethod = new GetMethod(url);
httpclient.getParams().setParameter(HttpMethodParams.HTTP_CONTENT_CHARSET, charset);
httpclient.executeMethod(getMethod);
String responseMsg = getMethod.getResponseBodyAsString();
return responseMsg;
}
}

以上是服务器端的微信签名的实现代码，下面介绍一下分享页面中js的编写。

第一步引入微信的js文件：

第二步：

wx.config({
debug: false,
appId: '${params.appId}',
timestamp: '${params.timestamp}',
nonceStr: '${params.noncestr}',
signature:'${params.signature}',
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.checkJsApi({
jsApiList: [
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
/*分享到朋友圈*/
wx.onMenuShareTimeline({
title: '计划书', // 分享标题
desc: '保险让生活更美好！', // 分享描述
link: '${fenxurl}', // 分享链接
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
/*分享给朋友*/
wx.onMenuShareAppMessage({
title: '计划书', // 分享标题
desc: '保险让生活更美好！', // 分享描述
link: '${fenxurl}', // 分享链接
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标
type: 'link', // 分享类型,music、video或link，不填默认为link
dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户确认分享后执行的回调函数
alert("您已分享");
},
cancel: function () {
// 用户取消分享后执行的回调函数
alert('您已取消分享');
}
});
wx.onMenuShareQQ({
title: '计划书', // 分享标题
desc: '保险让生活更美好！', // 分享描述
link: '${fenxurl}', // 分享链接
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareWeibo({
title: '计划书', // 分享标题
desc: '保险让生活更美好！', // 分享描述
link: '${fenxurl}', // 分享链接
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
wx.onMenuShareQZone({
title: '计划书', // 分享标题
desc: '保险让生活更美好！', // 分享描述
link: '${fenxurl}', // 分享链接
imgUrl: '${params.urlg}/PF_IDENTIFY/Cacheable/image/business/plan-cover/product_img.png', // 分享图标
success: function () {
// 用户确认分享后执行的回调函数
},
cancel: function () {
// 用户取消分享后执行的回调函数
}
});
});

至此整个微信的整个分享开发完成，上面的这些js文件，都必须放在页面上。

微信公众号网页分享功能开发相关推荐

公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
微信公众号网页在本地开发模式下如何使用正式环境的域名来调试
微信公众号网页在本地开发模式下如何使用正式环境的域名来调试? 鄙人之前也不知道,网上搜了一下,看到的几篇文章都是要使用代理,有用Nginx的,还有自己写代理的.主要是按照步骤做了并不行.于是自己折腾了 ...
微信开发（3）：微信公众号发现金红包功能开发，利用第三方SDK实现（Java）
最近需求是用户兑换微信红包,需要一些验证,加密,以及证书: 工欲善其事必先利其器感谢前辈的微信SDK 已经维护三年了,还在维护中! 官方文档走一波文档还是一如既往的坑人啊,写的很简单,对简单明 ...
【Golang】golang开发微信公众号网页授权功能
基本流程微信公众号服务号的网页授权功能开发,主要是通过js跳转到一个微信提供的url 然后微信会弹出获取昵称头像的按钮允许获取后,会回跳到我们的网址上,并且带着一个code参数我们拿到code参 ...
微信小程序web-view内嵌公众号网页分享功能实现
web-view嵌入网页分享,有二种分享情况 1.小程序分享出当前打开的页面 2.部分页面要求,分享指定页面,而不是当前的页面以下是代码部分一.web-view内嵌公众号网页 ...
微信公众号JSAPI分享功能踩坑记录
一,绑定域名分享功能必须是通过企业认证的公众号才有这个权限.可以登陆公众号后在 "开发->接口权限" 里查看是否已获取该权限.然后再进入"公众号设置"的 ...
JavaScript 实现微信公众号内分享功能
改变用户点击微信右上角分享时的分享内容 //获取当前页面的url 去掉#之后的内容var url=location.href.replace(location.hash,""); ...
html5 java 实现微信公众号自动分享功能(自定义文案和图标)
一前端代码 var wurl=location.href.split("#")[0]; console.log(wurl); var code = GetQueryStr ...
微信公众号的分享功能
记录几个坑 1 前端js的分享url 来请求获取签名的时候必须要写完成比如 www.baidu.com/index.html 2 微信官方的sha1签名结果和本地的sha1结果不一样是官网上面的 ...

微信公众号网页分享功能开发

微信公众号网页分享功能开发相关推荐

最新文章

热门文章