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

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

上面这个是微信的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文件,都必须放在页面上。

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

(0)

相关推荐

  • php版微信公众号自定义分享内容实现方法

    本文实例讲述了php版微信公众号自定义分享内容实现方法.分享给大家供大家参考,具体如下: 微信公众号号在手机中通过api接口可以实现自定义分享内容了,下面我们来看这个接口的实现步骤. 一.准备阶段 公众号一个,微网站一个. 二.绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 备注:登录后可在"开发者中心"查看对应的接口权限. 三.代码 <?php //curl获取请求文本内容 f

  • 微信公众号H5之微信分享常见错误和问题(小结)

    url转码 官方文档描述: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62 确认url是页面完整的url(请在当前页面alert(location.href.split('#')[0])确认),包括'http(s)

  • C#实现微信公众号群发消息(解决一天只能发一次的限制)实例分享

    总体思路: 1.首先必须要在微信公众平台上申请一个公众号. 2.然后进行模拟登陆.(由于我对http传输原理和编程不是特别懂,在模拟登陆的地方,不是特别清楚,希望有大神指教) 3.模拟登陆后会获得一个token(令牌)和cookie. 4.因为模拟登陆后相当于就进入了微信公众平台,在这个里面就可以抓取到需要的数据,如公众好友的昵称,fakeId.其中的fakeid非常重要,因为传输数据必须要知道对方的fakeid. 5.知道对方的fakeid就可以进行数据的发送了. 这里是整个项目的源码下载:h

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

    现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的视觉效果. 微信JS-SDK Demo :这个是微信网页分享出去的标题. 微信JS-SDK,帮助第三方为用户提供更优质的移动web服务:这个是被分享的这个页面的分享描述. 微信图标:这个就是自己网站或者自己自定义的图像. 上面这个是微信官方网页分享出去的定义描述,那么怎样实现自己网站网页的自定义分享

  • Vue微信公众号网页分享的示例代码

    前言 今天做了个分享功能,反正挺诡异的,下面就来说一说步骤 后端使用egg.js,代码如下: 'use strict'; const Subscription = require('egg').Subscription; class AccessToken extends Subscription { static get schedule() { return { interval: '2h',//2小时获取一次 type: 'all', }; } async subscribe() { co

  • Spring Security实现微信公众号网页授权功能

    微信公众号提供了微信支付.微信优惠券.微信H5红包.微信红包封面等等促销工具来帮助我们的应用拉新保活.但是这些福利要想正确地发放到用户的手里就必须拿到用户特定的(微信应用)微信标识openid甚至是用户的微信用户信息.如果用户在微信客户端中访问我们第三方网页,公众号可以通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑.今天就结合Spring Security来实现一下微信公众号网页授权. 环境准备 在开始之前我们需要准备好微信网页开发的环境. 微信公众号服务号 请注意,一定是微信公众号

  • Vue.js 实现微信公众号菜单编辑器功能(一)

    学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"&g

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

  • 微信公众号网页授权登录的超简单实现步骤

    目录 前言 一.微信公众号授权登录到底哪几步 二.回调地址,安全域名怎么配置 三.代码怎么写 四.出现问题怎么办 总结 前言 这篇文章带大家掌握 从0到1实现微信公众平台授权登录 微信公众号授权登录到底哪几步回调地址,安全域名怎么配置代码怎么写出了问题怎么办 一.微信公众号授权登录到底哪几步 官方文档介绍微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_author

  • SpringBoot + 微信公众号JSAPI支付功能的实现

    1.pom.xml依赖配置 <!-- 微信支付 --> <dependency> <groupId>com.egzosn</groupId> <artifactId>pay-java-wx</artifactId> <version>2.12.4</version> </dependency> 2.application.yml文件配置微信公众号的基础信息 #微信公众号支付配置 wechatpay:

  • SpringBoot实现发送邮件、发送微信公众号推送功能

    目录 SpringBoot实现发送邮件 pom.xml application.yml 代码实现 SpringBoot实现发送微信公众号推送 pom.xml 代码实现 SpringBoot实现发送邮件   JavaMailSender是Spring封装的邮件发送封装类,支持普通文本.附件.html等格式. pom.xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>

  • 微信公众号测试账号自定义菜单的实例代码

    自定义菜单接口可实现多种类型按钮,如下: 1.click:点击推事件 用户点击click类型按钮后,微信服务器会通过消息接口推送消息类型为event 的结构给开发者(参考消息接口指南),并且带上按钮中开发者填写的key值,开发者可以通过自定义的key值与用户进行交互: 2.view:跳转URL 用户点击view类型按钮后,微信客户端将会打开开发者在按钮中填写的网页URL,可与网页授权获取用户基本信息接口结合,获得用户基本信息. 3.scancode_push:扫码推事件 用户点击按钮后,微信客户

随机推荐