이 기사는 WeChat JSSDK의 사용법을 요약하고 참조를 위해 귀하와 공유합니다. 특정 내용은 다음과 같습니다
1. 도메인 이름을 바인딩하십시오
2. JS 파일을 소개합니다
JS 인터페이스 (지원 https)를 호출 해야하는 페이지에 다음 JS 파일을 소개하십시오. http://res.wx.qq.com/open/js/jweixin-1.0.0.js
페이지에 HTTPS가 활성화 된 경우 https://res.wx.qq.com/open/jweixin-1.0.0.js를 소개하십시오. 그렇지 않으면 iOS9.0 이상의 시스템에서 JSSDK를 성공적으로 사용할 수 없습니다.
3. 구성 인터페이스를 통해 구성을 확인하십시오
이 단계는 현재 URL을 사용하여 배경에 요청을 보내서 일련의 매개 변수를 얻는 것입니다. 즉, 배경은 내 URL을 사용하여 WeChat에서 확인합니다. 여기에 주목해야 할 사항은 현재 URL 쓰기 방법을 확인하는 데 사용됩니다.
url = location.href.split ( '#') [0];
위의 상황을 작성하십시오. 그렇지 않으면 구성 시간이 유효하지 않은 서명이 수행됩니다.
URL이 페이지의 전체 URL인지 확인하십시오 ( 'http (s) : //'part 및 '를 포함하여'현재 페이지 알림 (location.href.split ( '#') [0])))? 'Get 매개 변수 부분은 그 뒤에 파라미터 부분을 포함하지만'#'Hash 이후에 부품을 포함하지 않습니다.
서명에 사용되는 URL이 동적으로 얻어 있는지 확인하십시오. 동적 페이지의 예제 코드에서 PHP의 구현 방법을 참조 할 수 있습니다. HTML의 정적 페이지가 프론트 엔드에서 Ajax를 통해 URL 서명으로 백엔드로 전달되면 프론트 엔드는 JS를 사용하여 현재 페이지를 가져 와서 '#'해시 부분에 대한 링크를 제거해야합니다 (위치 .href.split ( '#') [0] [0] 및 EncodeUricomponent가 필요하기 때문에 weChat Clarets의 경우, weChat의 Clarets가 필요합니다. 링크. 현재 링크가 동적으로 얻어지지 않으면 공유 후 페이지 서명이 실패합니다.
여기서 역학에주의를 기울이고, 스스로 스플라이킹하지 말고 동시에 uricomponent를 인코딩하십시오.
$ .ajax ({type : 'get', url : url, datatype : 'jsonp'}). 그런 다음 ((data) => {wx.config ({debug : true, // debug mode, debug mode, debug mode의 반환 값은 클라이언트에서 경보 될 것입니다. PC 쪽을 통해 단지 인쇄 할 수 있습니다. PC 측. Appid : // 공식 계정 타임 스탬프의 고유 식별자 : // 필수, 서명 비 시시트 : // 서명 서명에 의해 생성 된 임의의 문자열 : '', // 필수, 서명, 부록 1 js의 목록을 참조하십시오.4. 준비된 인터페이스 처리를 통해 성공적으로 확인했습니다
구성 정보가 확인되면 준비된 메소드가 실행됩니다. 구성 인터페이스가 결과를 얻은 후에 모든 인터페이스 호출을 얻어야합니다. 구성은 클라이언트의 비동기 조작입니다. 따라서 페이지가로드 될 때 관련 인터페이스를 호출 해야하는 경우 올바른 실행을 위해 관련 인터페이스를 준비된 기능에 배치해야합니다. 사용자가 트리거 할 때만 호출되는 인터페이스의 경우 준비 기능에 넣지 않고 직접 호출 할 수 있습니다.
wx.ready (() => {// alert ( 'ready'); //$('Click ', () => {// 친구와 공유 wx.onmenushareAppmessage ({title :' ', desc :' ', 링크 : shareurl, imgurl :', trigger (rese) 친구에게 보내기 (res) {alert (res) {alert ( 'canceed'); // 순간에 공유 wx.onmenusharetimeline ({title : '', // 제목 링크 : shareUrl, // shareUrl, // 링크 imgurl : // 공유 아이콘 성공 : // function () {alert ( 'shared'); // alert ($ ( '. no-num'). html ()); 사용자 공유 // alert ( 'canceled'); });5. 오류 인터페이스를 통해 검증이 실패했습니다
구성 정보가 실패하면 오류 기능이 실행됩니다. 서명이 만료되면 확인이 실패합니다. 특정 오류 메시지의 경우 디버그 구성 모드를 열거나 반환 된 RES 매개 변수에서 볼 수 있습니다.
wx.error ((res) => {alert (res.errmsg);})6. 기본 인터페이스
• 모멘트 인터페이스에 공유하십시오
wx.onmenusharetimeline ({title : '', // 제목 링크 공유 : '', // 공유 링크 IMGURL : ', // 공유 아이콘 성공 : function () {// 콜백 함수 공유를 확인한 후 실행 된 콜백 함수}, cancel () {// 콜백 함수는 사용자가 공유});• 친구들과 공유 할 인터페이스
wx.onmenushareappmessage ({title : '', // title desc : ', // 공유 설명 링크 :', // 링크 공유 링크 imgurl : ', // 공유 아이콘 유형 :', // 공유 유형, 음악, 비디오 또는 링크, 기본 링크 데이터 러를 채우지 마십시오. // 사용자가 공유를 확인한 후 실행 된 콜백 함수}, cancel : function () {// 사용자가 공유}}를 취소 한 후 실행 된 콜백 함수);여기서 공유 콘텐츠에 AJAX 비동기 요청으로 얻은 컨텐츠를 추가 해야하는 경우 AJAX 요청이 반환 된 후 성공적인 기능에서 공유 인터페이스를 다시 호출해야하지만 공유 인터페이스는 WX에 배치해야하며 준비 기능을 별도로 호출 할 수 없습니다. 클라이언트 공유 작업은 동기화 작업이므로 AJAX를 사용한 데이터는 아직 반환되지 않았습니다.
7.이 단계는 단순 해 보이지만 Debugging 동안 필연적으로 많은 문제가 있습니다. JSSDK 인터페이스에는 여전히 많은 제한이 있습니다. 나는 우연히 구덩이를 밟았다.
8. 마지막 으로이 인터페이스를 캡슐화했습니다 .
'strict'; wxdefaultoptions = {debug : true, appid : ', timestamp : 0, noncestr :', signature : '', jsapilist : [ 'checkjsapi', 'onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'hideibo', 'hideibo', 'hideibo', 'onmenushareqq', 'showmenuitems', 'hideallnonbasemenuitems', 'showallnonbasemenuitems', 'showallnonbasemenuitems', 'showallnonbasemenuitems', 'showallnonbasemenuitems', 'translatevoice', 'startrecord', 'stoprecord', 'onrecord', 'ploavoice', '', 'plaivoice', 'playvoice' 'UploadVoice', 'downloadVoice', 'selectionImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'OpenLocation', 'getLoctionMenu', 'HideOptionMenu', 'showOptionMenu', 'closeWindow', 'scanQrcode', 'scanqrcode', 'scanqrcode', 'sconewxpe' 'addcard', 'choosecard', 'opencard']}; // shareurl = 'http : // xxx' + location.pathname; let getwxparam = (url, wxoptions) => {let url = location.href.split ( '#') [0]; url = encodeUricomponent (url); promise = new Promise (((resolve, devject)) => {$ .ajax ({type : 'get', url : 'http : // xxx/xxx? param ='+url, datatype : 'jsonp'}) .then ((data) => {wxparam = data; console.log (wxpparam); 'WXEB5C3F4A03B880F0'; resolve ()}, (error) => {console.log (error)); 반환 약속;} // Sharesocial = (param) => {wx.onmenusharetimeline ({title : param.title, // 공유 제목 링크 : param.link, // 공유 링크 Imgurl : param.imgurl, // Icon Success : function () {// Callback function () {// 콜백 함수 param.failcalback ()가 공유를 취소 한 후 실행 된});} // 친구와 공유 ShareTofriends = (param) => {wx.onmenushareAppmessage ({title : param.title, desc : link : param.link, imgurl). }, function (res) {param.sucallback (); wx.ready (() => {// MOMents sharesocial (param); sharetofriends (param);})} 함수 callwx (param, wxoptions) {getwxparam (param.url, wxoptions). 제목 : '', desc : '', 링크 : '', imgurl : ', sucallback : func, failcalback : filcalback : filc} module.exports = {wxdefaultoptions, // 구성 callwx, // 기본 구성, 구성 후 컨텐츠 공유 컨텐츠를 사용자 정의하고 구성}}이 기사는 "JavaScript WeChat Development Skills의 요약"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
우려되는 Wechat Mini 프로그램에 대한 자습서를 추천하고 싶습니다. "Wechat Mini 프로그램 개발 자습서"는 Everybody의 편집자가 신중하게 편집했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.