위 챗 공식 홈 페이지 공유 기능 개발 의 예제 코드
위 는 위 챗 의 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 파일 들 은 모두 페이지 에 놓 아야 합 니 다.위 챗 공식 홈 페이지 공유 기능 개발 에 관 한 예제 코드 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 위 챗 공식 홈 페이지 공유 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 우 리 를 많이 지지 해 주시 기 바 랍 니 다!