WeChat JS 인터페이스 요약 및 사용법_javascript 기술에 대한 자세한 설명

기본 지침

사용 지침

1. JS 파일 가져오기
JS 인터페이스(https 지원)를 호출해야 하는 페이지에 다음 JS 파일을 삽입하세요. http://res.wx.qq.com/open/js/jweixin-1.0.0.js

참고: AMD/CMD 표준 모듈 로딩 방법을 사용한 로딩을 지원합니다

2. 구성 구성 인터페이스 삽입
JSSDK를 사용해야 하는 모든 페이지는 먼저 구성 정보를 삽입해야 합니다. 그렇지 않으면 호출되지 않습니다(동일한 URL은 한 번만 호출하면 되며 URL이 변경될 때마다 URL을 변경하는 SPA 웹 앱을 호출할 수 있습니다).

코드 복사 코드는 다음과 같습니다.

wx.config({
debug: true, // 디버깅 모드를 켭니다. 모든 API 호출의 반환 값은 클라이언트 측에서 경고됩니다. 들어오는 매개변수를 보려면 PC 측에서 열 수 있습니다. 로그를 통해 인쇄되며 PC 측에서만 인쇄됩니다.
appId: '', // 필수, 공식 계정의 고유 식별자
timestamp: , // 필수, 서명 생성을 위한 타임스탬프
nonceStr: '', // 필수, 임의의 서명 문자열 생성
서명: '',//필수, 서명, 부록 1 참조
jsApiList: [] // 필수, 사용해야 하는 JS 인터페이스 목록 전체 JS 인터페이스 목록은 부록 2
를 참조하세요. });

3. 준비된 인터페이스를 통해 확인

코드 복사 코드는 다음과 같습니다.

wx.ready(함수(){

//ready 메소드는 config 정보가 확인된 후 실행됩니다. 모든 인터페이스 호출은 config 인터페이스가 결과를 얻은 후에 이루어져야 합니다. config는 클라이언트 측에서 비동기 작업이므로 관련 호출이 필요한 경우 인터페이스는 페이지가 로드될 때 올바른 실행을 보장하기 위해 관련 인터페이스를 준비 함수에 호출해야 합니다. 사용자가 트리거할 때만 호출되는 인터페이스의 경우 직접 호출할 수 있으며 준비 함수에 배치할 필요가 없습니다.
});

4. 인증 실패 오류 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.error(함수(res){
// 구성 정보 확인에 실패하면 오류 기능이 실행됩니다. 서명이 만료되고 확인에 실패하면 구성의 디버그 모드를 열거나 반환된 res 매개 변수에서 특정 오류 정보를 볼 수 있습니다. 서명은 여기에서 업데이트할 수 있습니다.
});

인터페이스 호출 지침
모든 인터페이스는 wx 객체를 통해 호출됩니다(jWeixin 객체도 사용할 수 있음). 매개변수는 각 인터페이스 자체에서 전달해야 하는 매개변수 외에도 다음과 같은 공통 매개변수가 있습니다.

success: 인터페이스 호출이 성공했을 때 실행되는 콜백 함수입니다.

실패: 인터페이스 호출이 실패할 때 실행되는 콜백 함수입니다.
완료: 성공, 실패에 관계없이 인터페이스 호출이 완료되면 실행되는 콜백 함수입니다.
cancel: 사용자가 취소를 클릭할 때의 콜백 함수입니다. 사용자가 작업을 취소하는 일부 API에서만 사용됩니다.
Trigger: 메뉴의 버튼을 클릭할 때 트리거되는 메서드입니다. 이 메서드는 메뉴의 관련 인터페이스만 지원합니다.

위 함수에는 모두 객체 유형의 매개변수가 있습니다. 각 인터페이스 자체에서 반환되는 데이터 외에도 값 형식이 다음과 같은 일반 속성 errMsg도 있습니다.

호출이 성공한 경우: "xxx:ok", 여기서 xxx는 호출된 인터페이스의 이름입니다

사용자가 취소하는 경우: "xxx:cancel", 여기서 xxx는 호출된 인터페이스의 이름입니다.
호출이 실패하는 경우: 해당 값은 특정 오류 메시지입니다.

기본 인터페이스 현재 클라이언트 버전이 지정된 JS 인터페이스를 지원하는지 확인하세요.

코드 복사 코드는 다음과 같습니다.

wx.checkJsApi({
jsApiList: ['chooseImage'] // 감지해야 하는 JS 인터페이스 목록 모든 JS 인터페이스 목록은 부록 2를 참조하세요.
성공: 함수(res) {
//키-값 쌍 형태로 반환되며, 사용 가능한 API 값은 true, 사용 불가능한 API 값은 false
// 예: {"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
});

공유 인터페이스

"순간에 공유" 버튼의 클릭 상태를 확인하고 콘텐츠 공유 인터페이스를 맞춤설정하세요

코드 복사 코드는 다음과 같습니다.

wx.onMenuShareTimeline({
제목: '', //제목 공유
링크: '', // 링크 공유
imgUrl: '', // 공유 아이콘
성공: 함수 () {
//사용자가 공유를 확인한 후 실행되는 콜백 함수
},
취소: 함수 () {
//사용자가 공유를 취소한 후 실행되는 콜백 함수
}
});

"친구와 공유" 버튼 클릭 상태를 확인하고 공유 콘텐츠 인터페이스를 맞춤설정하세요

코드 복사 코드는 다음과 같습니다.

wx.onMenuShareAppMessage({
제목: '', //제목 공유
desc: '', // 설명 공유
링크: '', // 링크 공유
imgUrl: '', // 공유 아이콘
유형: '', // 공유 유형, 음악, 비디오 또는 링크, 공백으로 두면 기본값은 링크입니다
dataUrl: '', // 유형이 음악 또는 비디오인 경우 데이터 링크를 제공해야 하며 기본적으로 비어 있습니다.
성공: 함수 () {
//사용자가 공유를 확인한 후 실행되는 콜백 함수
},
취소: 함수 () {
//사용자가 공유를 취소한 후 실행되는 콜백 함수
}
});

"QQ에 공유" 버튼 클릭 상태를 확인하고 공유 콘텐츠 인터페이스를 맞춤설정하세요

코드 복사 코드는 다음과 같습니다.

wx.onMenuShareQQ({
제목: '', //제목 공유
desc: '', // 설명 공유
링크: '', // 링크 공유
imgUrl: '' // 공유 아이콘
성공: 함수 () {
//사용자가 공유를 확인한 후 실행되는 콜백 함수
},
취소: 함수 () {
//사용자가 공유를 취소한 후 실행되는 콜백 함수
}
});

'Tencent Weibo에 공유' 버튼의 클릭 상태를 확인하고 공유 콘텐츠 인터페이스를 맞춤설정하세요

코드 복사 코드는 다음과 같습니다.

wx.onMenuShareWeibo({
제목: '', //제목 공유
desc: '', // 설명 공유
링크: '', // 링크 공유
imgUrl: '' // 공유 아이콘
성공: 함수 () {
//사용자가 공유를 확인한 후 실행되는 콜백 함수
},
취소: 함수 () {
//사용자가 공유를 취소한 후 실행되는 콜백 함수
}
});

이미지 인터페이스

사진을 찍거나 휴대폰 앨범에서 사진을 선택하기 위한 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.chooseImage({
성공: 함수(res) {
            var localIds = res.localIds; // 선택한 사진의 로컬 ID 목록을 반환합니다. localId를 img 태그의 src 속성으로 사용하여 이미지를 표시할 수 있습니다.
}
});

사진 인터페이스 미리보기

코드 복사 코드는 다음과 같습니다.

wx.previewImage({
현재: '', // 현재 표시된 이미지 링크
urls: [] // 미리보기가 필요한 이미지 링크 목록
});

사진 인터페이스 업로드

코드 복사 코드는 다음과 같습니다.

wx.uploadImage({
localId: '', // chooseImage 인터페이스를 통해 얻은 업로드할 이미지의 로컬 ID
isShowProgressTips: 1// 기본값은 1이며 진행률 팁을 표시합니다
성공: 함수(res) {
          var serverId = res.serverId // 이미지의 서버 ID를 반환합니다
}
});

참고: WeChat 멀티미디어 파일 다운로드 인터페이스를 사용하여 여기에서 얻은 서버 ID는 media_id입니다. 문서를 참조하세요../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

사진 인터페이스 다운로드

코드 복사 코드는 다음과 같습니다.

wx.downloadImage({
serverId: '', // uploadImage 인터페이스를 통해 얻은 다운로드할 이미지의 서버 ID
isShowProgressTips: 1// 기본값은 1이며 진행률 팁을 표시합니다
성공: 함수(res) {
          var localId = res.localId; // 이미지 다운로드 후 로컬 ID 반환
}
});

오디오 인터페이스

녹화 인터페이스 시작

코드 복사 코드는 다음과 같습니다.

wx.startRecord();

녹화 중지 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.stopRecord({
성공: 함수(res) {
      var localId = res.localId;
}
});

모니터링 녹화 자동 정지 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.onVoiceRecordEnd({
//녹음시간이 멈추지 않고 1분을 초과하면 전체 콜백이 실행됩니다
완료: 함수(res) {
var localId = res.localId
}
});

음성 인터페이스 재생

코드 복사 코드는 다음과 같습니다.

wx.playVoice({
LocalId: '' // stopRecord 인터페이스를 통해 얻은 재생될 오디오의 로컬 ID
});

재생 인터페이스 일시중지

코드 복사 코드는 다음과 같습니다.

wx.pauseVoice({
LocalId: '' // stopRecord 인터페이스를 통해 얻은 일시 중지해야 하는 오디오의 로컬 ID
});

재생 인터페이스 중지

코드 복사 코드는 다음과 같습니다.

wx.stopVoice({
LocalId: '' // stopRecord 인터페이스를 통해 얻은 중지해야 하는 오디오의 로컬 ID
});

음성재생 완료 모니터링 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.onVoicePlayEnd({
ServerId: '', // 다운로드할 오디오의 서버 ID는 uploadVoice 인터페이스를 통해 가져옵니다.
성공: 함수(res) {
          var localId = res.localId // 오디오의 로컬 ID를 반환합니다
}
});

음성 인터페이스 업로드

코드 복사 코드는 다음과 같습니다.

wx.uploadVoice({
localId: '', // stopRecord 인터페이스를 통해 얻은 업로드할 오디오의 로컬 ID
isShowProgressTips: 1// 기본값은 1이며 진행률 팁을 표시합니다
성공: 함수(res) {
          var serverId = res.serverId // 오디오의 서버 ID를 반환합니다.
}
});

참고: 업로드된 음성은 WeChat 멀티미디어 파일 다운로드 인터페이스를 통해 다운로드할 수 있습니다. 여기서 얻은 서버 ID는 media_id입니다. 문서를 참조하세요../12/58bfcfabbd501c7cd77c19bd9cfa8354.html

음성 인터페이스 다운로드

코드 복사 코드는 다음과 같습니다.

wx.downloadVoice({
serverId: '', // uploadVoice 인터페이스를 통해 얻은 다운로드할 오디오의 서버측 ID
isShowProgressTips: 1// 기본값은 1이며 진행률 팁을 표시합니다
성공: 함수(res) {
          var localId = res.localId // 오디오의 로컬 ID를 반환합니다
}
});

스마트 인터페이스

오디오를 인식하고 인식 결과 인터페이스를 반환

코드 복사 코드는 다음과 같습니다.

wx.translateVoice({
localId: '', //녹음 관련 인터페이스에서 얻어온 인식이 필요한 오디오의 로컬 ID
isShowProgressTips: 1, //기본값은 1이며 진행률 팁을 표시합니다
성공: 함수(res) {
Alert(res.translateResult); // 음성인식 결과
}
});

기기 정보

네트워크 상태 가져오기 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.getNetworkType({
성공: 함수(res) {
           var networkType = res.networkType; // 네트워크 유형 2g, 3g, 4g, wifi를 반환합니다
}
});

지리적 위치

WeChat에 내장된 지도를 사용하여 위치 인터페이스를 확인하세요

코드 복사 코드는 다음과 같습니다.

wx.openLocation({
위도: 0, // 위도, 부동소수점수, 범위는 90 ~ -90
경도: 0, // 경도, 부동 소수점 수, 범위는 180 ~ -180입니다.
name: '', // 위치 이름
주소: '', // 주소 세부정보
배율: 1, // 지도 확대/축소 수준, 모양 값, 범위는 1~28입니다. 기본값은 최대입니다
infoUrl: '' // 보기 위치 인터페이스 하단에 표시된 하이퍼링크를 클릭하면 이동할 수 있습니다.
});

지리적 위치 인터페이스 받기

코드 복사 코드는 다음과 같습니다.

wx.getLocation({
타임스탬프: 0, // 위치 서명 타임스탬프, 6.0.2 이전 버전과 호환되는 경우에만 제공
nonceStr: '', // 위치 서명 임의 문자열, 6.0.2 이전 버전과 호환되는 경우에만 제공
​​ addrSign: '', // 위치 서명, 6.0.2 이전 버전과 호환되는 경우에만 제공, 자세한 내용은 부록 4
를 참조하세요. 성공: 함수(res) {
          var longitude = res.longitude; // 위도, 부동 소수점 수, 범위는 90 ~ -90
        var latitude = res.latitude; // 경도, 부동 소수점 수, 범위는 180 ~ -180입니다.
           var speed = res.speed; // 속도(미터/초)
        var 정확도 = res.accuracy; // 위치 정확도
}
});

인터페이스 운영

코드 복사 코드는 다음과 같습니다.

오른쪽 상단에 메뉴 인터페이스 숨기기
wx.hideOptionMenu();
오른쪽 상단에 메뉴 인터페이스 표시
wx.showOptionMenu();
현재 웹 창 인터페이스 닫기
wx.closeWindow();
일괄 숨겨진 기능 버튼 인터페이스
wx.hideMenuItems({
menuList: [] // 숨겨질 메뉴 항목, 모든 메뉴 항목은 부록 3을 참조하세요
});
일괄 표시 기능 버튼 인터페이스
wx.showMenuItems({
menuList: [] // 표시할 메뉴 항목, 모든 메뉴 항목은 부록 3
을 참조하세요. });
기본이 아닌 버튼 인터페이스 모두 숨기기
wx.hideAllNonBaseMenuItem();
모든 기능 버튼 인터페이스 표시
wx.showAllNonBaseMenuItem();
WeChat에서 스캔
WeChat 스캔 인터페이스 열기
wx.scanQRCode({
설명: 'scanQRCode 설명',
needResult: 0, // 기본값은 0, 스캔 결과는 WeChat에서 처리, 1은 스캔 결과를 직접 반환,
scanType: ["qrCode","barCode"], // QR 코드 또는 1D 코드를 스캔할지 지정할 수 있습니다. 둘 다 기본적으로 사용 가능합니다.
성공: 함수 () {
var result = res.resultStr; // needResult가 1일 때 QR코드를 스캔하여 반환된 결과
}
});

수확주소

배송 주소 편집 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.editAddress(
타임스탬프: 0, // 위치 서명 타임스탬프, 6.0.2 이전 버전과 호환되는 경우에만 제공
nonceStr: '', // 위치 서명 임의 문자열, 6.0.2 이전 버전과 호환되는 경우에만 제공
​​ addrSign: '', // 위치 서명, 6.0.2 이전 버전과 호환되는 경우에만 제공, 자세한 내용은 부록 4
를 참조하세요. 성공: 함수(res) {
          var userName = res.userName // 수취인 이름
        var telNumber = res.telNumber; // 수취인의 전화번호
        var postalCode = res.postalCode // 우편번호
           var ProvinceName = res.provinceName // 전국 일반 배송 주소의 1차 주소
          var cityName = res.cityName; // 전국 일반 배송 주소 2차 주소
           var countryName = res.countryName // 국내 일반 배송 주소 3차 주소
          var address = res.address; // 상세 배송 주소 정보
          var nationalCode = res.nationalCode // 배송지 주소의 국가 코드
}
});

가장 가까운 배송 주소 인터페이스 확인

코드 복사 코드는 다음과 같습니다.

wx.getLatestAddress({
타임스탬프: 0, // 위치 서명 타임스탬프, 6.0.2 이전 버전과 호환되는 경우에만 제공
nonceStr: '', // 위치 서명 임의 문자열, 6.0.2 이전 버전과 호환되는 경우에만 제공
​​ addrSign: '', // 위치 서명, 6.0.2 이전 버전과 호환되는 경우에만 제공, 자세한 내용은 부록 4
를 참조하세요. 성공: 함수(res) {
          var userName = res.userName // 수취인 이름
        var telNumber = res.telNumber; // 수취인의 전화번호
        var postalCode = res.postalCode // 우편번호
           var ProvinceName = res.provinceName // 전국 일반 배송 주소의 1차 주소
          var cityName = res.cityName; // 전국 일반 배송 주소 2차 주소
           var countryName = res.countryName // 국내 일반 배송 주소 3차 주소
          var address = res.address; // 상세 배송 주소 정보
          var nationalCode = res.nationalCode // 배송지 주소의 국가 코드
}
});

위챗 스토어

WeChat 제품 페이지 인터페이스로 이동

코드 복사 코드는 다음과 같습니다.

wx.openProductSpecificView({
productId: '', // 제품 ID
viewType: '' // 0. 기본값, 일반 상품상세페이지 1. 상품상세페이지 스캔 2. 상품상세페이지 저장
});

위챗 카드 쿠폰

매장에 적용 가능한 카드, 쿠폰 목록 불러오기 및 사용자 선택 목록 가져오기

코드 복사 코드는 다음과 같습니다.

wx.chooseCard({
shopId: '', // 매장 ID
CardType: '', // 카드 종류
CardId: '', // 카드 쿠폰 ID
timeStamp: 0, // 카드 서명 타임스탬프
nonceStr: '', // 카드 서명 임의 문자열
cardSign: '', //카드 및 쿠폰 서명, 자세한 내용은 부록 6
을 참조하세요. 성공: 함수(res) {
        var cardList= res.cardList; // 사용자가 선택한 카드 목록 정보
}
});

카드, 쿠폰 일괄 추가 인터페이스

코드 복사 코드는 다음과 같습니다.

wx.addCard({
카드목록: [{
카드 ID: '',
카드 확장: ''
}], // 추가될 카드 및 쿠폰 목록
성공: 함수(res) {
          var cardList = res.cardList; // 카드 및 쿠폰 목록 정보 추가
}
});

WeChat 카드 패키지의 카드 및 쿠폰 인터페이스 보기

코드 복사 코드는 다음과 같습니다.

wx.openCard({
카드목록: [{
카드 ID: '',
코드: ''
}]// 개봉해야 할 카드 및 쿠폰 목록
});

위챗페이

WeChat 결제 요청 시작

코드 복사 코드는 다음과 같습니다.

wx.chooseWXPay({
타임스탬프: 0, // 결제 서명 타임스탬프
noncestr: '', // 결제 서명 임의 문자열
package: '', // 주문 세부정보 확장 문자열, 자세한 내용은 부록 5
를 참조하세요. paySign: '', // 결제 서명, 자세한 내용은 부록 5를 참조하세요
});