최근 프로젝트에서는 WeChat 공유가 필요했고 WeChat 공유 내용을 맞춤화해야 하는 필요성이 있었습니다. 이번이 처음으로 WeChat 공유를 접했기 때문에 그 과정에서 겪은 몇 가지 문제와 전체 과정을 기록했습니다. 기능을 완료하는 중입니다.
일반적인 과정은 다음과 같습니다. (자세한 내용은 각 단계에 기재되어 있습니다.)
npm install weixin-js-sdk --save-dev
구체적인 지침은 WeChat 공식 문서를 참조하세요.
2. 위챗 공유 초기화제가 작업하고 있는 프로젝트 중 상당수는 WeChat 공유 기능을 사용해야 하기 때문에 WeChat에서 공유하는 코드는 여기에 요약되어 있습니다.
아래 코드의 Api는 실제로 axios 요청입니다.
import wx from 'weixin-js-sdk'import api from '@/api'const wxApi = { /** * [wxRegister WeChat Api 초기화] * @param {Function} 콜백 [준비된 콜백 함수] */ wxRegister(콜백, url) { let query = { // 여기의 URL은 공유하려는 페이지와 정확히 일치하는 URL이어야 하며, base64 URL을 변환해야 합니다: url } api.getWxJsSdk(query).then(res => { let data = res.data wx.config({ debug: false, // 디버깅 모드 켜기 appId: data.appId, // 필수, 고유 식별자입니다. 공식 계정 타임스탬프: data.timestamp, // 필수, 서명의 타임스탬프 생성 nonceStr: data.nonceStr, // 필수, 서명의 무작위 문자열 생성 서명: data.signature, // 필수, 서명, 부록 1 참조 jsApiList: data.jsApiList // 필수, 사용해야 하는 JS 인터페이스 목록, 모든 JS 인터페이스 목록은 부록 2를 참조하세요. }) }) wx.ready((res) => { // 필요한 경우 준비된 콜백 메서드를 사용자 정의합니다. if (callback) { callback() } }) },}참고: 위에서 base64를 변환해야 하는 경우 js-base64를 사용할 수 있습니다.
3. 맞춤형 콘텐츠를 공유하도록 WeChat을 구성합니다(친구에게 보내기, Moments로 보내기)
두 번째 단계는 WeChat의 패키징 구성을 초기화하는 것입니다. 하지만 아직 해당 공유 및 기타 기능이 부족합니다.
//wxRegister 함수 뒤에 /***를 추가합니다. [ShareTimeline Moments에 대한 사용자 정의 WeChat 공유]* @param {[type]} 옵션 [정보 공유]* @param {[type]} 성공 [성공 콜백]* @param {[ type]} error [실패 콜백]*/ShareTimeline (옵션) {wx.updateTimelineShareData({ title: option.title, // 공유 제목 링크: option.link, // 링크 공유 imgUrl: option.imgUrl, // 아이콘 공유 성공 () { // 설정 성공}, cancel () { // 설정 실패}})},/*** [ShareAppMessage 사용자 정의 WeChat 친구 공유]* @ param {[유형]} 옵션 [공유 정보]* @param {[유형]} 성공 [성공 콜백]* @param {[유형]} 오류 [실패 콜백]*/ShareAppMessage (옵션) {wx.updateAppMessageShareData({ title: option.title, // 제목 공유 desc: option.desc, // 설명 공유 link: option.link, // 링크 공유 imgUrl: option.imgUrl, // 아이콘 공유 성공 () { // 설정 성공}, 취소 () { // 설정 실패}})}4. 페이지 호출 시
// 예시로 vue // 다음 함수 매개변수에 대해서는 위의 방법을 참조하세요. import wx from 'your encapsulated file' Mount(){ let base64 = require('js-base64').Base64 let url = base64. 인코딩(window.location.href) wx.wxRegister(this.wxRegCallback,url)},methods:{ // 맞춤형 jdk 콜백 wxRegCallback () {}, // 친구와 공유하기 위한 맞춤형 함수 wxShareAppMessage(){ let option = { title:'', // 제목 공유 desc: '', // 설명 공유 링크: ' ', // Share link imgUrl: '' // 공유 아이콘 } // 일반 메소드 wx.ShareAppMessage(option) 삽입 }, // 친구에게 공유하기 위한 맞춤 기능 Circle wxShareTimeline(){ let option = { title:'',// 제목 공유 desc: '', // 설명 공유 link: '', // 링크 공유 imgUrl: '' // 공유 아이콘 } // 일반 메소드 wx.ShareTimeline(option) 삽입 }}위챗으로 공유하는 과정입니다. 부족한 점이 있으면 지적해주세요.
메모:WeChat 공유는 실제 장치에서만 테스트할 수 있습니다.
localhost 형식을 사용하는 도메인 이름은 WeChat 확인을 통과할 수 없습니다.
요약위는 편집자가 소개한 WeChat 공유 및 사용자 정의 콘텐츠의 HTML5 구현입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 시간에 맞춰 답변해 드리겠습니다.