vue.js 에서 위 챗 을 사용 하여 invalid signature 문 제 를 해결 합 니 다(완벽 하 게 해결)

1.버튼 을 누 르 면 위 챗 스 캔 기능 을 실현 합 니 다.

<template>
  <a class="btn" @click="scan">   </a>
</template>

2.config 인터페이스 로 설정 정 보 를 주입 합 니 다.wx.config 호출 방법 은 다음 과 같 습 니 다.
(그 중에서 appId,timestamp,nonceStr,signature 는 배경 에서 가 져 와 야 합 니 다.현재 웹 페이지 의 URL 을 전송 해 야 합 니 다.\#와 그 뒷부분 은 포함 되 지 않 습 니 다.location.href.split('\#')[0]가 져 오기)

wx.config({
  debug: true, //       ,     api         alert  ，         ，   pc   ，       log  ，  pc      。
  appId: '', //   ，        
  timestamp: , //   ，        ，    
  nonceStr: '', //   ，        
  signature: '',//   ，  
  jsApiList: [] //   ，     JS    ，  ：['chooseImage','previewImage','uploadImage']
})

3,ready 인터페이스 처리 성공 검증

wx.ready(function(){
 
  // config        ready  ，          config        ，
   config           ，                   ，         ready            。             ，       ，     ready   。
});

4.전체 코드 는 다음 과 같다. 

export default {
		data() {
			return {
				
			}
		},
		methods: {
			init(){
				let url = location.href.split('#')[0];//     fullUrl        url(  #    )
				this.$axios.get("/api/wx/jsdk/config",{params:{
					url:url
				}}).then(res => {
					if(res.success){
						window.wx.config({
						  debug: false,
						  appId: res.data.appId, //   ,        
						  timestamp: res.data.timeSpan, //   ,        
						  nonceStr: res.data.nonceStr, //   ,        
						  signature: res.data.sinature, //   ,  
						  jsApiList: ['checkJsApi', 'scanQRCode'] //   ,     JS    
						})
					}else{
						alert(res.msg);
					}
				})
			},
			scan(){
				window.wx.ready(function() {
					wx.checkJsApi({
						 jsApiList : ['scanQRCode'],
						 success : function(res) {
							if (res.checkResult.scanQRCode === true) {
								 wx.scanQRCode({ //        
								  needResult: 1, //    0，         ，1         ，
								  scanType: ['qrCode', 'barCode'], //              ，      
								  success: function (res) {
										let result = res.resultStr //  needResult   1  ，       
										window.location.href = result;//            
								 }
							 })
							} else {
							  alert('  ，             ')
							}
							
						 },
						 
						 fail: function (res) { //   getNetworkType        
						  alert('fail' + res)
						 }
						
					});
				});
				
				window.wx.error(function(res) {
					alert("   ：" + res.errMsg);//         wx.config    ，         ，            。
				});
					
			}
		},
		mounted() {
			this.init();
		}
	}

총결산
vue.js 에서 위 챗 을 사용 하여 invalid signature 문 제 를 해결 하 는 글 을 소개 합 니 다.