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問題(推薦)的文章就介紹到這了,更多相關vue.js 微信掃一掃內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！