Vue에 WeChat SDK 인터페이스를 도입하는 방법

이 글은 주로 WeChat SDK 인터페이스를 vue 프로젝트에 도입하는 방법을 소개합니다. 편집자는 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가서 살펴보겠습니다.

WeChat 웹 페이지를 구축하려면 기본적으로 WeChat SDK에 대한 액세스가 필요합니다. 저도 이 작업을 할 때 많은 노력을 기울였고 나중에 직접 읽을 수 있도록 기록하고 싶었습니다. , 도움이 필요한 친구들이 참고할 수 있도록 해주세요. 좋아요를 누르거나 팔로우를 하시면 모두에게 도움이 되기를 바랍니다.

SDK 설치

npm install weixin-js-sdk --save

시작하기 전에 WeChat 공식 계정의 액세스 문서를 읽어보세요. 예를 들어 WeChat 공유 기능에 액세스하려면 공유 기능이 필요합니다. 네, 각 경로의 URL이 다르기 때문에 Souyi는 각 경로 주소에 이를 도입해야 합니다.

전체 단계:

vue가 SDK를 도입하는 경우 라우팅 구성 요소와 구성 요소 수명 주기인 creatd() 및 Mounted()에 코드를 넣는 것입니다.

의사 코드를 사용하여 전체 프로세스와 수행해야 할 작업을 숙지하세요.

//wx是引入的微信sdk
 wx.config('这里有一些参数');//通过config接口注入权限验证配置
 
 wx.ready(function() { //通过ready接口处理成功验证
 // config信息验证成功后会执行ready方法
   wx.onMenuShareAppMessage({ // 分享给朋友 ,在config里面填写需要使用的JS接口列表，然后这个方法才可以用 
     title: '这里是标题', // 分享标题
     desc: 'This is a test!', // 分享描述
     link: '链接', // 分享链接
     imgUrl: '图片', // 分享图标
     type: '', // 分享类型,music、video或link，不填默认为link
     dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
     });
     wx.onMenuShareTimeline({ //分享朋友圈
     title: '标题', // 分享标题
     link: '链接',
     imgUrl: '图片', // 分享图标
     success: function() {
       // 用户确认分享后执行的回调函数
     },
     cancel: function() {
       // 用户取消分享后执行的回调函数
     }
   });
 });
 wxx.error(function(res){//通过error接口处理失败验证
   // config信息验证失败会执行error函数
 });

위 프로세스를 몇 번 읽어 전체 프로세스에 대한 아이디어를 얻으세요. 가장 중요한 단계는 다음을 사용하여 권한을 주입하는 것입니다. 다음 변명.

Config 인터페이스 삽입 권한

WeChat 인터페이스에 액세스하는 가장 중요하고 중요한 단계는 다음 정보를 입력하는 것입니다. 정보를 입력한 후에는 기본적으로 사용할 수 있습니다. 일반적으로 백엔드 인터페이스를 통해 다음 정보를 얻습니다.

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名，见附录1
  jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

구성 구성 정보 가져오기:

프론트 엔드에서 위의 정보를 얻으려면 많은 작업을 수행할 필요가 없으며 백엔드 인터페이스만 조정하면 됩니다. 백엔드는 해당 정보를 처리하고 인터페이스를 통해 이러한 매개변수를 사용자에게 반환합니다. 현재 라우팅 페이지의 전체 URL을 백엔드에 전달해야 하며, 백엔드는 위 정보를 귀하에게 반환합니다. 나중에 해당 인터페이스를 호출하고 필요에 따라 콘텐츠를 사용자 정의할 수 있습니다.

함정: url

여기서 주목해야 할 것은 url의 문제입니다. url이 올바르게 전달되지 않으면 백엔드도 정보를 반환하지만 서명 정보는 잘못됩니다.

위에 언급된 전체 URL은 'http(s)://' 부분과 '? '' 뒤에 GET 매개변수 부분이 있지만, '#' 해시 다음 부분은 포함되지 않습니다. location.href를 통해 얻을 수 있습니다.

참고: Vue 프로젝트 및 라우팅에 기록 모드가 활성화되어 있지 않은 경우, 즉 URL에 "#"이 포함된 경우 백엔드에서 서명을 올바르게 얻으려면 URL에서 # 뒤의 문자를 제거해야 합니다. (URL의 '#' 해시 부분을 제거하고 location.href.split('#')[0] 사용)

Encapsulation call SDK 주입:

SDK는 모든 라우팅 페이지에 주입되어야 하기 때문에 이 반복해서 사용해야 합니다. 그렇지 않으면 너무 많은 코드가 부담스러워질 것입니다.

내가 한 일은 다음과 같습니다.

Axios를 레이어로 래핑한 다음 Axios 인터페이스를 main.js의 Vue 인스턴스에 마운트했기 때문입니다.

그런 다음 전역 함수에서 이 인터페이스를 호출한 다음 각 라우팅 페이지의 해당 구성 요소에서 이 함수를 호출하고 현재 페이지의 URL과 기타 제목, 사진 등을 전달합니다.

구체적인 단계는 다루지 않겠습니다. 가장 중요한 것은 위의 프로세스를 참조하는 것입니다.

서명 확인:

단계에 문제가 없음을 반복적으로 확인했지만 WeChat SDK 삽입이 여전히 서명에 실패하는 경우, 이때 백엔드 알고리즘에 문제가 있는지 고려해야 합니다. , 백엔드를 반환할 수 있습니다. 서명을 WeChat에서 제공하는 JS 인터페이스 서명 확인 도구에서 생성된 서명과 비교하면 백엔드 알고리즘에 문제가 있을 수 있습니다.

두 번째 한마디

솔직히 만들 때 url에 속아서 처음 만드는거라 경험도 없고 시간도 많이 걸렸어요. SDK를 도입하는 것은 어렵지 않습니다. 중요한 것은 구성 정보를 올바르게 입력하고 나머지는 실제 필요에 따라 수행된다는 것입니다.

위 내용은 제가 여러분을 위해 정리한 내용입니다. 앞으로 도움이 되길 바랍니다.

관련 기사:

JS에서 웹 버전 계산기를 구현하는 방법

JS를 사용하여 공의 포물선 궤적 이동을 구현하는 방법

JavaScript를 사용하여 이진 트리 탐색을 구현하는 방법

Axios 크로스 도메인에서 쿠키를 구현하는 방법

JavaScript에서 탄력적 효과를 얻는 방법

axios를 사용하여 Ajax 요청을 구현하는 방법(자세한 튜토리얼)

위 내용은 Vue에 WeChat SDK 인터페이스를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!