微信公众号网页分享功能开发的示例代码


Posted in Javascript onMay 27, 2020

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

微信公众号网页分享功能开发的示例代码  

     上面这个是微信的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文件:

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

第二步:  

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文件,都必须放在页面上。

到此这篇关于微信公众号网页分享功能开发的示例代码的文章就介绍到这了,更多相关微信公众号网页分享内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
ie8下修改input的type属性报错的解决方法
Sep 16 Javascript
jQuery实现的淡入淡出二级菜单效果代码
Sep 15 Javascript
jQuery实现带分组数据的Table表头排序实例分析
Nov 24 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
jquery限定文本框只能输入数字(整数和小数)
Jan 08 Javascript
基于javascript实现彩票随机数生成(简单版)
Apr 17 Javascript
Node.js重新刷新session过期时间的方法
Feb 04 Javascript
JS冒泡事件与事件捕获实例详解
Nov 25 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
Node.js实现简单管理系统
Sep 23 Javascript
如何使JavaScript休眠或等待
Apr 27 Javascript
JS字符串补全方法padStart()和padEnd()
May 27 #Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
May 27 #Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
May 27 #Javascript
使用JavaScript获取Django模板指定键值数据
May 27 #Javascript
基于Vue CSR的微前端实现方案实践
May 27 #Javascript
Node.js API详解之 vm模块用法实例分析
May 27 #Javascript
jQuery实现鼠标滑动切换图片
May 27 #jQuery
You might like
4.与数据库的连接
2006/10/09 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
一段好玩的JavaScript代码
2006/12/01 Javascript
js正文内容高亮效果的实现方法
2013/06/30 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
js 模式窗口(模式对话框和非模式对话框)的使用介绍
2014/07/17 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue的常用组件操作方法应用分析
2018/04/13 Javascript
Vue循环组件加validate多表单验证的实例
2018/09/18 Javascript
js中this的指向问题归纳总结
2018/11/28 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
JS异步宏队列与微队列原理区别详解
2020/07/02 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
用Python shell简化开发
2018/08/08 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
树莓派安装OpenCV3完整过程的实现
2019/10/10 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
python复合条件下的字典排序
2020/12/18 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
美国社交购物市场:MassGenie
2019/02/18 全球购物
Perfume’s Club英国官网:购买香水和护肤品
2019/11/02 全球购物
员工安全生产承诺书
2014/05/22 职场文书
博士生求职信
2014/07/06 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
软弱涣散基层党组织整改方案
2014/10/25 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2015年元旦主持词结束语
2014/12/14 职场文书
后勤个人工作总结
2015/02/28 职场文书
DQL数据查询语句使用示例
2022/12/24 MySQL