위 챗 JS-SDK 위 챗 공유 인터페이스 개발(소개 판)
최근 프로젝트 의 홈 페이지 는 위 챗 을 통 해 친구 나 친구 권 등 을 공유 하 는 기능 을 통 해 공유 사진 등 정 보 를 표시 할 수 없 게 되 었 고,조사 결과 위 챗 버 전이 업그레이드 되 어 js-sdk 로 공유 인 터 페 이 스 를 완성 하 였 으 며,이 기능 효 과 를 신속하게 실현 하기 위해 프런트 js 를 통 해 공유 효 과 를 볼 계획 이다.
위 챗 공식 플랫폼 문 서 를 조회 하여 자신 이 필요 로 하 는 설명 문서 을 찾 고 개발 절 차 를 명 확 히 하 며 문서 캡 처 는 다음 과 같다.
개발 절차:
1.설명 문서 의 완성 절차 에 따라 1.1.1
2.js 파일 도입
공유 페이지 에 js 파일 추가
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="/commonScripts/jquery-1.5.1.min.js"></script>
<!-- sha1 js -->
<script src="/commonScripts/wxShare_sha1.js"></script>
<!-- js -->
<script src="/commonScripts/wxShare_data.js"></script>
<!-- js -->
<script src="/commonScripts/wxShare.js"></script>
</head>
<body id="weixinshare">
<img
style="width:672px; height:345px; cursor:pointer"
alt="banner01"
src="/mobileimg/123.jpg">
</body>
</html>
var $wx_account = wxdata.wx_account, // ， wxShare_data.js
$wx_share = wxdata.wx_share; // ， wxShare_data.js
//
wx.config ({
debug : false, // true:
appId : $wx_account[0], // appid
timestamp : $wx_account[1], //
nonceStr : $wx_account[2], //
signature : $wx_account[3], //
jsApiList : [
// API
'onMenuShareTimeline', //
'onMenuShareAppMessage', //
'onMenuShareQQ', // QQ
'onMenuShareWeibo' //
]
});
wx.ready (function () {
//
var shareData = {
"imgUrl" : $wx_share[0], //
"link" : $wx_share[1], //
"desc" : $wx_share[2], //
"title" : $wx_share[3], //
success : function () {
//
//alert(" "); }
};
wx.onMenuShareTimeline (shareData);
wx.onMenuShareAppMessage (shareData);
wx.onMenuShareQQ (shareData);
wx.onMenuShareWeibo (shareData);
});
wx.error(function(res){
// config error ， ，
// config debug ， res ，
// SPA 。
alert(" ！！");
});
var wxdata = {
wx_account : new Array(4),
wx_share : new Array(4),
wx_myuser : new Array("appid","appsecret"),
access_token : "", //
token_expires_in : "" , // ：s
jsapi_ticket : "", //
ticket_expires_in : "" , // ：s
url : "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + wxdata.wx_myuser[0] + "&secret=" + wxdata.wx_myuser[1],
// access_token
// * * ， ， access_token ， access_token
get_access_token : function (){
$.ajax({
type : "GET",
url : wxdata.url
dataType : "jsonp", // ，jsonp
cache : false,
// jsonp :'callback',
success : function(msg) {
// {"access_token":"ACCESS_TOKEN","expires_in":7200}
// {"errcode":40013,"errmsg":"invalid appid"}
wxdata.access_token = msg.access_token; // ， token_expires_in 7200s
wxdata.token_expires_in = msg.expires_in; // ：s
if (access_token != "" || access_token != null) {
console.log("get access_token success： " + wxdata.access_token);
} else {
console.log("get access_token fail " +wxdata.access_token);
}
},
error : function(msg){
alert("get access_token error!! ： ");
}
});
},
// jsapi_ticket
// * * ， ， jsapi_ticket ， jsapi_ticket
get_jsapi_ticket : function(){
$.ajax({
type : "GET",
url : "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + wxdata.access_token +"&type=jsapi",
dataType : "jsonp",
cache : false,
async : false,
jsonp :'callback',
success : function(msg) {
/*
{
"errcode":0,
"errmsg":"ok",
"ticket":"e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA",
"expires_in":7200
}
*/
if(msg.errcode == 0){
wxdata.jsapi_ticket = msg.ticket; // ， ticket_expires_in 7200s
wxdata.ticket_expires_in = msg.expires_in; // ：s
console.log("get jsapi_ticket success");
} else {
console.log("get jsapi_ticket fail");
}
},
error : function(msg){
alert("get jsapi_ticket error!!! ");
}
});
},
//
create_signature : function(nocestr,ticket,timestamp,url){
var signature = "";
// key ASCII
var s = "jsapi_ticket=" + ticket + "&noncestr=" + nocestr + "×tamp=" + timestamp + "&url=" + url;
return hex_sha1(s);
},
// 0 < ? < 32
create_noncestr : function () {
var str= "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
var val = "";
for (var i = 0; i < 16; i++) {
val += str.substr(Math.round((Math.random() * 10)), 1);
}
return val;
},
//
create_timestamp : function () {
return new Date().getSeconds();
}
}
//wxdata.get_access_token(); // 1
wxdata.access_token = "B06fRIti5GDmvNLKsV5OkJ4fU1qd3YyyW0cgwenxhqI7XwmpTrpwY6Uc7nNtnumdJvnPJXcACAVPD"; //2
//wxdata.get_jsapi_ticket(); //3
wxdata.jsapi_ticket = "XGEs8VD-_kgoxt8jcijupT7j_EA-nP07ro_MmUNDVD0oR8unfqY4C_YIMXAQvhztlTk8j2A" //4
// ----- 5 ------
var timestamp = wxdata.create_timestamp(); // timestamp
var noncestr = wxdata.create_noncestr(); // noncestr
var url = window.location.href;
wxdata.wx_account[0] = wxdata.wx_myuser[0]; // appid
wxdata.wx_account[1] = timestamp; // timestamp
wxdata.wx_account[2] = noncestr; // noncestr
wxdata.wx_account[3] = wxdata.create_signature(noncestr, wxdata.jsapi_ticket ,timestamp ,url);//signature
wxdata.wx_share[0] = "http://www.123456.com/img/123.jpg"; // share_img
wxdata.wx_share[1] = window.location.href;// share_link url ， ，
wxdata.wx_share[2] = "this is share_desc";// share_desc
wxdata.wx_share[3] = "this is share_title";// share_title
// -------- 5 ---------- 4.1 공유 절차:
사용자 가 타임스탬프,무 작위 문자열 을 만 들 고 현재 공유 해 야 할 페이지 의 url 세 변 수 를 만 든 다음 에 자신의 appid 와 APPSicret 를 요청 매개 변수 로 access 를 가 져 옵 니 다.token,accesstoken 획득 jsapiticket, 그리고 획득 할 jsapiticket,그리고 자신 이 만 든 세 개의 변 수 를 서명 합 니 다.서명 과정 안 은 key 값 ASCII 코드 의 오름차 순 으로 정렬 되 고 구체 적 인 참가 절차 에 주의 하 십시오.
4.2 요청 후 응답 프로그램 에서 문 제 를 처리 할 수 없습니다.
get_access_token()함수 에서 위 챗 을 시작 하여 access 가 져 오기token 의 요청,크로스 필드 문제 가 존재 합 니 다.dataType:"jsonp"를 설정 하면 해결 할 수 없습니다.브 라 우 저 를 통 해 요청 을 확인 한 결과 위 챗 에 해당 하 는 데이터 가 포장 되 어 있 지 않 습 니 다.위 챗 은 이 요청 의 크로스 필드 를 지원 하지 않 을 것 이 라 고 추측 합 니 다.ajax 프로그램 을 통 해 access 를 정상적으로 가 져 올 수 없 기 때 문 입 니 다.token 의 값 이지 만 브 라 우 저 에서 access 를 가 져 올 수 있 습 니 다.token 의 값,이 값 은 7200 s 입 니 다.jsapi 를 얻 기 에 충분 합 니 다.ticket,jsapi 획득ticket 요청 과정 에 같은 문제 가 있 으 므 로 access 획득token 과 jsapitoken 은 서버 백 엔 드 코드 를 사용 해 야 합 니 다.
이 글 은 주로 js 요청 으로 공 유 를 완성 하려 는 효과 가 소개 편 에 속 하기 때문에 서버 측 요청 코드(뿌리 지 마 십시오)를 개발 하지 않 았 습 니 다.서버 편 코드 는 후속 응용 편 을 참조 하 십시오.
그렇다면 어떻게 해 야 프로그램 이 뛰 고 페이지 를 정상적으로 공유 할 수 있 을 까?
wxShare 에서data.js 코드 에서 먼저 wxdata.get 을 시작 합 니 다.access_token(); ② ③ ④ ⑤ 코드,브 라 우 저 에서 가 져 온 accesstoken,② 변수 에 수 동 으로 놓 습 니 다.
access 수 동 완성token 의 할당 후 주석 ①,② ③ 을 열 고 시작 합 니 다. wxdata.get_jsapi_ticket(); ④ ⑤ 코드
같은 동작 으로 브 라 우 저 에서 jsapi 가 져 오기ticket 값 은 ④ 곳 의 변 수 를 부여 하고 설명 ① ③,② ④ ⑤ 곳 의 코드 를 열 면 wxShare 를 볼 수 있 습 니 다.data.js
5、wxShare_sha1.js
데이터 서명 sha1.js 다운로드
6.이때 페이지 가 정상적으로 실행 되 고 위 챗 공 유 를 완성 할 수 있 습 니 다.
성공 페이지 전시
친구
이로써 원 하 는 검증 효 과 를 완성 하면 서버 에서 코드 를 개발 할 수 있 습 니 다!!!완전 판 위 챗 공유 기대
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
콩짜개 검색 - 위 챗 공공 플랫폼 접속 (wechatpy)위의 글 은 위 챗 공공 플랫폼 을 어떻게 연결 하 는 지 소 개 했 지만 그 안의 검증 코드 는 우리 가 스스로 실현 한 것 이다.그러나 지금 우 리 는 더 좋 은 선택 이 생 겼 다.위 챗 (WeChat) 퍼 블...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
