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

站长资源 2024/11/24 佚名

7 1538 7

DDR爱好者之家 Design By 杰米

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

上面这个是微信的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就是我们要动态去的参数，可能有人        
    //会想到，这个两个参数直接写在地址中不是挺简单的为啥还要动态去获取这个参数呢；在这里我们引出了一       
    //个微信二次分享的问题，就是别人转发的链接给你，然后你再转发给别人，在你转发给别人后这个链接的签       
    //名就会失败，为啥呢，因为经过再次转发的链接，微信会自动加上一些自己的参数，这样会导致页面上微信       
    //分享的链接和签名的链接不一致。直接导致自定义的标题和链接描述，显示失败，失败原因是微信默认的在       
    //我们的分享链接上加上了&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="/UploadFiles/2021-04-02/jweixin-1.0.0.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文件，都必须放在页面上。

公众号网页分享,公众号,分享

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

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

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年11月24日

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

JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)

JS字符串补全方法padStart()和padEnd()

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

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接