위 챗 공식 홈 페이지 공유 기능 개발 의 예제 코드

현재 매일 많은 위 챗 이 공유 하 는 링크 위 에 사이트 나 업 체 의 사용자 정의 공유 제목 이 있 고 링크 에 대한 설명 과 공 유 된 이미 지 를 볼 수 있 습 니 다.예 를 들 어 아래 에 공 유 된 링크 등 입 니 다.
  
     위 는 위 챗 의 js-SDK 페이지 가 위 챗 친구 들 에 게 채 팅 목록 에 표시 되 는 시각 적 효 과 를 공유 하 는 것 입 니 다.
      위 챗 JS-SDK 데모:위 챗 홈 페이지 에서 공유 한 제목 입 니 다.
     위 챗 JS-SDK 는 제3자 가 사용자 에 게 더욱 양질 의 모 바 일 웹 서 비 스 를 제공 하도록 도와 준다.이것 은 공 유 된 이 페이지 의 공유 설명 이다.
     위 챗 아이콘:이것 이 바로 자신의 사이트 나 사용자 정의 그림 입 니 다.
     위 는 위 챗 공식 홈 페이지 가 공유 하 는 정의 설명 입 니 다.그러면 자신의 홈 페이지 의 사용자 정의 공유 제목,설명 과 공유 하 는 디 스 플레이 사진 을 어떻게 실현 하 는 지 구체 적 으로 위 챗 홈 페이지 제3자 공유 자체 의 실현 방식 을 살 펴 보 겠 습 니 다.
     위 챗 홈 페이지 공유 사용자 정의 에 대해 서 는 주로 두 가지 작업 이 필요 합 니 다.하 나 는 페이지 를 공유 하 는 js 공유 코드 의 작성 입 니 다.다른 하 나 는 위 챗 공유 홈 페이지 의 링크 주소 서명 입 니 다.
     먼저 웹 페이지 의 연결 주소 서명 을 살 펴 보 자.이 기능 은 주로 서버 에서 올 때 이 루어 진다.
     첫 번 째 단계:기초 데이터 의 준 비 는 다음 과 같은 데이터 정보 가 필요 합 니 다.
     APPID:위 챗 공식 번호 의 id; APP_SECRECT:공중 번호 의 키 입 니 다.서명 한 사이트 도 메 인 이름.
     두 번 째 단계:위 챗 서명 데이터 준비:
    appid,secret,url 은 이 세 개의 인 자 를 map 에 넣 습 니 다. 키 값:appid=위 챗 공식 번호 id,secret=APPSECRECT,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 파일 들 은 모두 페이지 에 놓 아야 합 니 다.
위 챗 공식 홈 페이지 공유 기능 개발 에 관 한 예제 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 위 챗 공식 홈 페이지 공유 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 우 리 를 많이 지지 해 주시 기 바 랍 니 다!

좋은 웹페이지 즐겨찾기