이 기사에서는 참조를 위해 JS WeChat 인터페이스의 상세한 버전을 공유했습니다. 특정 내용은 다음과 같습니다
기본 지침
사용 지침
1. JS 파일을 소개합니다
JS 인터페이스 (지원 https)를 호출 해야하는 페이지에 다음 JS 파일을 소개하십시오. http://res.wx.qq.com/open/js/jweixin-1.0.0.js
참고 : AMD/CMD 표준 모듈로드 방법을 사용한 지원 로딩
2. 구성 인터페이스를 인젝션하고 구성합니다
JSSDK를 사용해야하는 모든 페이지는 먼저 구성 정보를 주입해야합니다. 그렇지 않으면 호출되지 않아야합니다 (동일한 URL을 한 번만 호출해야하며 URL을 변경하는 스파의 웹 앱은 URL을 변경할 때마다 호출 할 수 있음).
wx.config ({debug : true, // debug mode, debug mode, 모든 API의 반환 값은 클라이언트에서 경고됩니다. 전달 된 매개 변수를 보려면 PC 쪽에서 열 수 있으려면 매개 변수 정보가 로그를 통해 인쇄 될 수 있으며 PC 측에서만 인쇄 될 것입니다. 비 CESTR : '', // 필수 서명 서명에 생성 된 임의의 문자열 : '', // 필수, 서명은 부록 1 JSAPILIST : [] // 필요한 JS 인터페이스 목록에 표시되고 모든 JS 인터페이스가 부록 2}에 나열됩니다);3. 준비된 인터페이스를 통해 확인하십시오
wx.ready (function () {// 구성 정보가 확인 된 후 준비된 메소드가 실행됩니다. 구성 인터페이스가 결과를 얻은 후 모든 인터페이스 호출을 얻어야합니다. 구성은 클라이언트의 비동기 조작입니다. 따라서 페이지를로드 할 때 관련 인터페이스를 호출 해야하는 경우, 적절한 실행을 보장해야합니다. 직접, 준비된 기능에 배치 할 필요가 없습니다.4. 확인 실패 오류 인터페이스
wx.error (function (res) {// 구성 정보가 확인되지 않으면 오류 함수가 실행됩니다. 서명이 만료되면 확인이 실패합니다. 특정 오류 메시지의 경우, 리턴 된 해안 매개 변수에서 볼 수 있도록 디버그 구성 모드를 열 수 있습니다.인터페이스 통화 지침
모든 인터페이스는 WX 객체를 통해 호출됩니다 (Jweixin 객체와 함께 사용할 수도 있음). 매개 변수는 객체입니다. 각 인터페이스 자체가 통과 해야하는 매개 변수 외에도 다음과 같은 일반 매개 변수도 있습니다.
1. 성공 : 인터페이스가 성공적으로 호출 될 때 콜백 함수가 실행됩니다.
2. 실패 : 인터페이스 호출이 실패하면 실행 된 콜백 함수가 실행됩니다.
3. 완료 : 인터페이스 호출이 완료되면 실행 된 콜백 기능이 실행되며 성공 또는 실패에 관계없이 실행됩니다.
4. 취소 : 콜백 함수 사용자가 클릭하면 취소되면 사용자가 작업을 취소하는 일부 API 만 사용됩니다.
5. 트리거 : 메뉴에서 버튼을 클릭 할 때 트리거를 듣는 메소드. 이 메소드는 메뉴의 관련 인터페이스 만 지원합니다.
위의 함수는 모두 매개 변수, 유형 객체를 가지고 있으며, 각 인터페이스 자체에 의해 리턴 된 데이터 외에도 값 형식은 다음과 같습니다.
1. 통화가 성공할 때 : "xxx : ok", 여기서 xxx는 통화의 인터페이스 이름입니다.
2. 사용자가 취소 할 때 : "xxx : cancel", 여기서 xxx는 인터페이스 이름이 불
3. 통화가 실패 할 때 : 값은 특정 오류 메시지입니다.
기본 인터페이스
현재 클라이언트 버전이 지정된 JS 인터페이스를 지원하는지 결정
wx.checkjsapi ({jsapilist : [chelectionimage '] // 감지 해야하는 JS 인터페이스 목록, 모든 js 인터페이스는 부록 2에 나열되어 있습니다. 성공 : // Key-Value 쌍으로 반환하고 사용 가능한 API 값은 참으로 제공되지 않습니다. { "checkResult": { "chelectImage": true}, "errmsg": "checkjsapi : ok"});인터페이스 공유
"Moments to Moments"버튼의 클릭 상태를 가져 와서 콘텐츠 공유 인터페이스를 사용자 정의하십시오.
wx.onmenusharetimeline ({title : '', // 제목 링크 공유 : '', // 링크 공유 imgurl : ', // 공유 아이콘 성공 : function () {// 콜백 함수 공유를 확인한 후 실행 된 콜백 함수}, cancel () {// 콜백 함수는 사용자 공유});"친구 공유"버튼의 클릭 상태를 가져 와서 콘텐츠 공유 인터페이스를 사용자 정의하십시오.
wx.onmenushareappmessage ({title : '', // title desc : ', // 공유 설명 링크 : // 링크 공유 링크 :', // 링크 공유 imgurl : '', // 아이콘 유형을 공유하십시오. {// 사용자가 공유를 확인한 후 실행 된 콜백 함수}, cancel : function () {// 사용자가 공유}}를 취소 한 후 실행 된 콜백 함수);"QQ로 공유"버튼의 클릭 상태를 가져 와서 콘텐츠 공유 인터페이스를 사용자 정의하십시오.
wx.onmenushareqq ({title : '', // title desc 공유 : '', // 공유 설명 링크 : ', // 링크 공유 링크 IMGURL :'// ICON SUCCENT : function () {// 공유 후 실행 된 콜백 함수}, cance () {// 공유 기능이 공유});"Tencent Weibo로 공유"버튼의 클릭 상태를 가져 와서 컨텐츠 공유 인터페이스를 사용자 정의하십시오.
wx.onmenushareweibo ({title : '', // title desc : ', // 공유 설명 링크 :', // 링크 공유 링크 imgurl : '// 아이콘 성공 : // 콜백 함수가 공유 후 실행 된 후 실행 된 콜백 함수}, cancels cloncels});이미지 인터페이스
사진을 찍거나 휴대폰 앨범 인터페이스에서 사진을 선택하십시오.
wx.chooseimage ({success : function (res) {var localids = res.localids; // 선택한 사진의 로컬 ID 목록을 반환합니다. localID는 IMG 태그의 SRC 속성으로 그림을 표시 할 수 있습니다);미리보기 사진 인터페이스
wx.previewImage ({current : '', // 현재 표시된 이미지 링크 URL : [] // 미리보기 링크 목록});이미지 인터페이스를 업로드합니다
wx.uploadimage ({localID : '', // choiceImage 인터페이스에서 얻은 이미지의 로컬 ID ISSHOWProgressTIPS : 1 // 기본값은 1입니다. 진행 프롬프트가 표시됩니다 : function (res) {var serverid = res.serverid; // 이미지의 서버 ID}});참고 : 멀티미디어 파일 인터페이스를 사용하여 WeChat으로 업로드 된 사진을 다운로드 할 수 있습니다. 여기에서 얻은 서버 디드는 Media_id입니다. 참조 문서 ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
그림 인터페이스를 다운로드하십시오
wx.downloadImage ({serverId : '', // 다운로드 할 이미지의 서버 측 ID, 업로드 이미지 인터페이스에서 얻은 서버 측 ID : 1 // 기본값은 1입니다.오디오 인터페이스
녹음 인터페이스를 시작하십시오
wx.startrecord ();
인터페이스 기록을 중지하십시오
wx.steprecord ({success : function (res) {var localid = res.localid;}});기록 모니터링을위한 자동 정지 인터페이스
WX.ONVOICERECORDEND ({// 기록 시간이 1 분을 초과하고 중지되지 않으면 완전한 콜백이 실행됩니다. complete : function (res) {var localid = res.localid;}});음성 인터페이스를 재생하십시오
wx.playVoice ({localID : ''// 재생할 오디오의 로컬 ID, StopRecord Interface});재생 인터페이스를 일시 중지합니다
wx.pauseVoice ({localID : ''// 정지를 일시 정지 해야하는 오디오의 로컬 ID, stoprecord interface});재생 인터페이스를 중지하십시오
wx.stopvoice ({localID : ''// 중지 해야하는 오디오의 로컬 ID, stoprecord interface});음성 재생 인터페이스 모니터링
wx.onvoicePlayend ({serverId : '', // 다운로드 해야하는 오디오의 서버 측 ID, 성공을 얻으십시오 : function (res) {var localid = res.localid; // 오디오의 로컬 ID를 반환});음성 인터페이스를 업로드하십시오
wx.uploadvoice ({localID : '', // 정지 레코드 인터페이스에서 획득 해야하는 오디오의 로컬 ID ISSHOWProgressTips : 1 // 기본값은 1입니다.참고 : WeChat의 멀티미디어 파일 인터페이스로 업로드 된 음성을 다운로드 할 수 있습니다. 여기에서 얻은 서버 디드는 Media_id입니다. 참조 문서 ../ 12/58BFCFABBD501C7CD77C19BD9CFA8354.HTML
음성 인터페이스를 다운로드하십시오
wx.downloadVoice ({serverId : '', // 업로드 바보 인터페이스 ISSHOWProgressTIPS에서 얻은 다운로드 해야하는 오디오의 서버 측 ID : 1 // 기본값은 1이고 진행 프롬프트가 성공했습니다 : res) {var localId = res.localid; retud}).지능형 인터페이스
오디오를 식별하고 인식 결과 인터페이스로 돌아갑니다
wx.translatevoice ({localID : '', // 인식 해야하는 오디오의 로컬 ID, ISSHOWProgressTIPS : 1, // 기본값은 1입니다.장비 정보
네트워크 상태 인터페이스를 얻습니다
wx.getNetWorkType ({success : function (res) {var NetworkType = res.networkType; // 네트워크 유형 2g, 3g, 4g, wifi}});지리적 위치
WeChat의 내장 맵을 사용하여 위치 인터페이스를보십시오.
wx.openlocation ({latitude : 0, // 위도, 부동 소수점 번호, 부동 소수점 번호, 범위는 90 ~ -90 경도 : 0, longitude, floatitud, floating point 번호입니다. 보기 위치 인터페이스의 하단에 표시되면 클릭하여 점프});지리적 위치 인터페이스를 얻으십시오
wx.getLocation ({timestamp : 0, // 위치 서명 타임 스탬프, Noncestation : '', // version 6.0.2, addrsign과 호환 될 때만 제공되는 비 시그니처 : // 위치 서명 : // 포지션 시그니처, 버전 6.0.2와 호환 될 때만 제공되는 위치 시그니처, 세부 사항에 대해서는 부록 4를 참조하십시오. 90 ~ -90 var latitude = restude, floating point 번호, var speed.인터페이스 작동
오른쪽 상단의 메뉴 인터페이스 wx.HideOptionMenu ()를 숨기십시오.
오른쪽 상단에 메뉴 인터페이스 wx.showoptionMenu ()를 표시합니다.
현재 웹 창 인터페이스 wx.closewindow ()를 닫습니다.
배치 숨기기 기능 버튼 인터페이스
wx.hidemenuitems ({menulist : [] // 메뉴 항목을 숨기려면 부록 3} 참조);배치 디스플레이 기능 버튼 인터페이스
wx.showmenuitems ({menulist : [] // 표시 될 모든 메뉴 항목이 부록 3}에 표시됨);모든 비 기본 버튼 인터페이스 숨기기
모든 기능 버튼 인터페이스 표시 wx.showallnonbasemenuitem ();
WeChat을 스캔하십시오
WeChat 스캔 인터페이스를 클릭하십시오
wx.scanqrcode ({desc : 'scanqrcode desc', needresult : 0, // 기본값은 0이고, 스캔 결과는 wechat에 의해 처리됩니다. 1은 스캔 결과를 직접 반환합니다. 스캔 결과 : [ "Qrcode", "바코드"], // QR 코드를 스캔할지 여부를 지정할 수 있습니다. res.resultstr; // needresult가 1이면 코드를 스캔하여 결과를 반환합니다});수확 주소
전달 주소 인터페이스 편집
wx.editAddress (timestamp : 0, // 위치 서명 타임 스탬프, 버전 6.0.2, noncestr : ', // location signature random string과 호환되는 경우에만 버전 6.0.2, addrsign : // 위치 서명과 호환되어야하는 경우에만 버전 6.0.2와 호환 될 필요가있는 경우에만 intectix 4.0.2를 참조하십시오. username은 var telnumber = res.postalcode; 레벨 주소 var var address = res.address;
가장 가까운 배송 주소 인터페이스를 얻으십시오
wx.getLatestAddress ({timestamp : 0, // 위치 서명 타임 스탬프, 버전 6.0.2, 비 시스트 : // 위치 서명 랜덤 스트링과 호환되는 경우에만 버전 6.0.2와 호환되어야하는 경우에만 버전 6.0.2와 함께 호환되어야하는 경우에만 : {var username = res.username; // 국가 표준 전달 주소 3 단계 주소 var var res.address;Wechat 상점
WeChat 제품 페이지 인터페이스로 이동하십시오
wx.openProductSpecificView ({productId : '', // product idviewtype : ''// 0. 기본값, 일반 제품 세부 정보 페이지 1. 제품 세부 정보 스캔 페이지 2. 제품 세부 사항 페이지});Wechat 카드 쿠폰
상점의 카드 쿠폰 목록을 릴리스하고 사용자 선택 목록을 얻으십시오.
wx.choosecard ({shopid : '', // store id cardtype : '', // 카드 유형 cardid : ', // card id timestamp : 0, // card id timestamp : // card boucher signature random string signsign :' ', // card boucher signsign, sevence : bar cardlist = res); // 카드 바우처 목록 정보}});배치로 카드 쿠폰 인터페이스를 추가하십시오
wx.addcard ({cardlist : [{cardid : '', cardext : ''}], // 추가 해야하는 카드 쿠폰 목록 : function (res) {var cardlist = res.cardlist; // 카드 쿠폰 목록}});WeChat 카드 패키지에서 카드 쿠폰 인터페이스 확인
wx.opencard ({cardlist : [{cardid : '', code : ''}] // 열려야 할 카드 쿠폰 목록});wechat 지불
WeChat 지불 요청을 시작하십시오
wx.choosewxpay ({timeStamp : 0, // 지불 서명 타임 스탬프 비 CESTR : '', // 지불 서명 랜덤 문자열 패키지 : ', // 주문 세부 정보는 확장 문자열, 부록 5, PaySign : // 지불 서명은 세부 사항, 부록 5} 참조);부록 1 -JSSDK 권한 서명 알고리즘
jsapi_ticket
서명을 생성하기 전에 먼저 jsapi_ticket을 이해해야합니다. JSAPI_TICKET은 공식 계정에서 WeChat JS 인터페이스에 전화하는 데 사용되는 임시 티켓입니다. 정상적인 상황에서 JSAPI_TICKET의 유효 기간은 7200 초이며 Access_Token을 통해 얻습니다. JSAPI_TICKET을 얻기위한 API 호출 수는 매우 제한적이므로 JSAPI_TICKET을 자주 새로 고침하면 API 호출이 제한되어 자체 비즈니스에 영향을 미칩니다. 개발자는 서비스에 전 세계적으로 JSAPI_TICKET를 캐시해야합니다.
1. Access_Token을 얻으려면 다음 문서를 참조하십시오 (7200 초 동안 유효합니다. 개발자는 서비스에서 전 세계적으로 Access_Token을 캐시해야합니다) : ../12/4B08382E9121768730A2DFC71E9218C.html
2. 첫 번째 단계에서 얻은 access_token을 사용하여 JSAPI_TICKET을 요청하십시오 (7200 초 동안 유효한 개발자는 전 세계적으로 JSAPI_TICKET를 전 세계적으로 캐시해야합니다.
다음 JSON을 성공적으로 반환합니다.
{ "errcode": 0, "errmsg": "ok", "ticket": "bxldikrxvbtpdhsm05e5u5suoxnkd8-41zo3mhkoyn5ofkwitdggnr2fwwj0m9e8nyzwkvzvdvtaugwvsdshfka", "7200}": ":": ":":JSAPI_TICKET을 얻은 후 JSSDK 권한 확인 서명을 생성 할 수 있습니다.
서명 알고리즘
서명 생성 규칙은 다음과 같습니다. 서명에 참여하는 필드에는 비 CESTR (임의 문자열), 유효한 JSAPI_TICKET, TIMESTAMP (TimesTAMP), URL ( # 및 후속 부분을 포함하지 않은 현재 웹 페이지의 URL)이 포함됩니다. 필드 이름의 ASCII 코드에 따라 소형에서 큰 (사전 순서)로 서명 할 모든 매개 변수를 정렬 한 후 URL 키 값 쌍의 형식 (즉, key1 = value1 & key2 = value2…)을 사용하여 문자열 문자열 1에 스플 라이스합니다. 여기서 모든 매개 변수 이름은 소문자라는 점에 유의해야합니다. String1은 암호화되며 필드 이름과 필드 값은 모두 원래 값이며 URL 이스케이프는 수행되지 않습니다.
즉, Signature = SHA1 (String1)입니다. 예:
• 비 CESTR = WM3WZYTPZ0WZCCNW
• JSAPI_TICKET = SM4AOVDWFPE4DXKXGES8VMCPGGVI4C3VM0P37WVUCFVKVAY_90U5HHHTDFL2FZFY1AOCHKP7QG
• 타임 스탬프 = 1414587457
• url = http : //mp.weixin.qq.com
1 단계. 필드 이름의 ASCII 코드에 따라 소형에서 큰 (사전 순서)로 서명 할 모든 매개 변수를 정렬 한 후 URL 키-값 쌍의 형식을 사용하여 String String1로 분류합니다 (즉, key1 = value1 & key2 = value2…).
jsapi_ticket = sm4aovdwfpe4dxkxges8vmcpggvi4c3vm0p37wvucfvkvay_90u5h9nbslyy3-sl-hhtdfl 2FZFY1AOCHKP7QG & NONCESTR = WM3WZYTPZ0WZCCNW × TAMP = 1414587457 & url = http : //mp.weixin.qq.com
2 단계. SHA1로 string1을 표시하고 서명을 얻습니다.
F4D90DAF4B3BCA3078AB155816175BA34C443A7B
주목해야 할 것
1. 서명에 사용되는 비정규 및 타임 스탬프는 WX.Config의 비정규 및 타임 스탬프와 동일해야합니다.
2. 서명에 사용되는 URL은 JS 인터페이스를 호출하는 페이지의 전체 URL이어야합니다.
3. 보안상의 이유로 개발자는 서버 측에서 서명 로직을 구현해야합니다.
부록 2- 모든 JS 인터페이스 목록
• onmenusharetimeline
• onmenushareappmessage
• onmenushareqq
• onmenushareweibo
• Startrecord
• stoprecord
• onvoicerecordend
• PlayVoice
• 일시 정지
• stopvoice
• onvoiceplayend
• 업로드 바보
• downloadVoice
• 선택을 선택하십시오
• 미리보기
• uploadimage
• DownloadImage
• TranslateVoice
• getNetworkType
• OpenLocation
• GetLocation
• HideoptionMenu
• ShowoptionMenu
• hidemenuitems
• showmenuitems
• hidealnonbasemenuitem
• showallnonbasemenuitem
• CloseWindow
• scanqrcode
• ChoosewXpay
• getLatestAdDress
• EditAddress
• OpenProductSpecificView
• 애드 카드
• Choosecard
• OpenCard
부록 3- 모든 버튼 목록
기본 카테고리
• 보고서 : "Menuitem : Exposearticle"
• 글꼴 조정 : "menuitem : setfont"
• 주간 모드 : "menuitem : daymode"
• 야간 모드 : "Menuitem : Nightmode"
• 새로 고침 : "Menuitem : Refresh"
• 공식 계정보기 (추가) : "menuitem : profile"
• 공식 계정보기 (추가되지 않음) : "Menuitem : AddContact"
커뮤니케이션 카테고리
• 친구에게 보내기 : "menuitem : share : appmessage"
• 순간에 공유 : "menuitem : 공유 : 타임 라인"
• QQ 공유 : "menuitem : share : qq"
• Weibo에 공유 : "menuitem : share : weiboapp"
• 컬렉션 : "Menuitem : 좋아하는"
• FB 공유 : "Menuitem : Share : Facebook"
보호 수업
• 디버그 : "menuitem : jsdebug"
• 태그 편집 : "menuitem : edittag"
• 삭제 : "menuitem : 삭제"
• 복사 링크 : "Menuitem : Copyurl"
• 원본 웹 페이지 : "menuitem : originpage"
• 읽기 모드 : "menuitem : readmode"
• QQ 브라우저에서 열기 : "menuitem : OpenWithQqbrowser"
• Safari에서 개장 : "Menuitem : OpenWithsafari"
• 이메일 : "menuitem : 공유 : 이메일"
• 일부 특별 공공 계정 : "Menuitem : 공유 : 브랜드"
부록 4- 위치 및 주소 서명 생성 알고리즘
addrsign의 생성 규칙은 JSSDK 권한 확인과 동일하지만 (부록 1 참조) 참여 서명 매개 변수는 다릅니다. AddrSign에 참여하는 서명 매개 변수는 AppID, URL (현재 웹 URL), 타임 스탬프, 비 시스트, Accessoken (사용자 인증 자격 증명, OAUTH2.0 프로토콜을 참조하십시오)입니다.
부록 5- 지불 확장 필드 및 서명 생성 알고리즘
주문 세부 사항 (패키지) 확장 문자열 정의
가맹점이 JS API를 리디렉션하면 판매자는 현재 주문 세부 사항을 결정하고 주문 세부 정보를 특정 방식으로 패키지에 결합해야합니다. JS API가 호출되면 WeChat은 패키지의 내용을 통해 선불 순서를 생성합니다. 다음은 패키지에 필요한 필드 목록 및 서명 메소드를 정의합니다. 인터페이스에 주목해야합니다. 모든 들어오는 매개 변수는 문자열 유형입니다!
이 기사는 "JavaScript WeChat Development Skills의 요약"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
우려되는 Wechat Mini 프로그램에 대한 자습서를 추천하고 싶습니다. "Wechat Mini 프로그램 개발 자습서"는 Everybody의 편집자가 신중하게 편집했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.