uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟

更新時(shí)間：2022年11月15日 09:35:29 作者：蓋世小可愛(ài)

在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能,但是下面的提示說(shuō)明可以通過(guò)微信的JS-SDK實(shí)現(xiàn)掃碼功能,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)微信H5掃碼功能的完整步驟,需要的朋友可以參考下

前端界面如圖

首先打開uniapp官網(wǎng)，在uni-app官網(wǎng)上發(fā)現(xiàn)uni-app不支持H5掃碼功能。失望ing

but 往官網(wǎng)下面看有幾行提示信息 驚喜ing

話不多說(shuō) 上才藝

步驟一：引入sdk

這里有兩種引入方式：

1.按照文檔的方法，下載js文件，直接引入到項(xiàng)目里

2.通過(guò)npm安裝

npm install weixin-js-sdk --save
// 按需引入
import wx from 'weixin-js-sdk';

步驟二：配置微信config信息

// 最好是在onLoad中調(diào)用
  onLoad: function () { 
    this.getCofig();
  },

methods: {
    // 配置信息
    getCofig() {
      const that = this;
      let url = '';
      let ua = navigator.userAgent.toLowerCase();
      url = window.location.href.split('#')[0]; //獲取到的url是當(dāng)前頁(yè)面的域名

      // GetWeixinScan 后端提供配置信息
      uni.request({
        url: '/api/goods/wx/wx_jsapi_ticket', // 此處找后端要接口 微信不能使用端口訪問(wèn)端口改為 wx
        method: 'GET',
        data: {
          url: url // 當(dāng)前頁(yè)面的域名
        },
        success: (response) => {
          const res = response.data;
          console.log(res, 'resres')
          if (res) {
            that.wxConfig(
              res.appId,
              res.timestamp,
              res.nonceStr,
              res.signature
            );
          } else {
            alert('獲取配置信息返回為空');
          }
        }
        , fail: error => {
          console.log(error, '請(qǐng)求獲取微信配置失敗 請(qǐng)求方法：http://xx.haileer.top:8901/wx_jsapi_ticket');
        }
      });
    },
    //wx.config的配置
    wxConfig(appId, timestamp, nonceStr, signature) {
      wx.config({
        debug: false, // 開啟調(diào)試模式,
        appId: appId, // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)
        timestamp: timestamp, // 必填，生成簽名的時(shí)間戳
        nonceStr: nonceStr, // 必填，生成簽名的隨機(jī)串
        signature: signature, // 必填，簽名
        jsApiList: ['scanQRCode', 'checkJsApi'], // 必填，需要使用的JS接口列表
      });
      wx.ready(() => {
        console.log('配置完成，掃碼前準(zhǔn)備完成')
      })
      wx.error(function (res) {
        alert('出錯(cuò)了：' + res.errMsg); //wx.config配置錯(cuò)誤，會(huì)彈出窗口哪里錯(cuò)誤，然后根據(jù)微信文檔查詢即可。
      });
    },
}

步驟三：觸發(fā)事件實(shí)現(xiàn)掃碼功能

 // 點(diǎn)擊掃碼 區(qū)分普通掃碼和H5掃碼
    scan() {
      const that = this
      // #ifndef H5
      uni.scanCode({
        success: function (res) {
          console.log("進(jìn)來(lái)了1")
          console.log('條碼res：' + res);
          console.log('條碼類型：' + res.scanType);
          console.log('條碼內(nèi)容：' + res.result);  
        },
        fail: error => {
          console.log("暫不支持1") 
        }

      });
      // #endif
      // #ifdef H5
      // this.log("暫不支持H5掃碼 走onScan這個(gè)方法") 
      this.onScan()
      // #endif
    },
       // h5掃描二維碼并解析  
    onScan() {
      const that = this; 
      wx.scanQRCode({
        needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
        scanType: ['qrCode', 'barCode'], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
        success: function (res) { 
          var result = res.resultStr; // 當(dāng) needResult 為 1 時(shí)，掃碼返回的結(jié)果
          var resultArr = result.split(','); // 掃描結(jié)果以逗號(hào)分割數(shù)組
          var codeContent = resultArr[resultArr.length - 1]; // 獲取數(shù)組最后一個(gè)元素，也就是最終的內(nèi)容 
        },
        fail: function (response) {
          console.log("調(diào)用掃碼失敗")
          that.$toast(response);
          alert(' wx.scanQRCode失敗')
        },
      });

    },

注意事項(xiàng)

在調(diào)用后端接口獲取config信息的時(shí)候

1.后端提供的接口端口號(hào)使用wx代替

2.傳給后端的url參數(shù)，記得一定是網(wǎng)頁(yè)域名 const url = location.href.split(‘#’)[0]

3.可以提醒后端把jsapi_ticket的值也返回，便于在自行使用工具校驗(yàn)簽名算法的時(shí)候輸入

4.可以提醒后端把timestamp把后三位數(shù)去掉，因?yàn)楹灻ｒ?yàn)中的timestamp最多只能輸入10位

補(bǔ)充：uniapp 微信公眾號(hào)H5掃碼功能

uniapp 不支持H5掃碼功能所以需要調(diào)用微信的SDK

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#2

第一步先下載sdk文件，然后引入 index.js文件也可以放在components方法里

npm install jweixin-module --save

第二步調(diào)接口返回config配置信息

//在onload 中調(diào)用，找后臺(tái)要接口?。?！
var apiUrl = location.href.split("#")[0]
uni.request({
				url: api.api.getJsSdkConfig,
				data: {
					url: apiUrl,//當(dāng)前頁(yè)面的域名
					api: ['scanQRCode'],//調(diào)用的方法去接口列表里找
				},
				success: function(res) {
					
					var wxData = JSON.parse(res.data.data.config)
					that.wx_sanCode(wxData)
				}
 
			})

//掃碼
			wx_sanCode: function(wxData) {
				wx.config({
					debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái)，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過(guò)log打出，僅在pc端時(shí)才會(huì)打印。
					appId: wxData.appId, // 必填，公眾號(hào)的唯一標(biāo)識(shí)
					timestamp: wxData.timestamp, // 必填，生成簽名的時(shí)間戳
					nonceStr: wxData.nonceStr, // 必填，生成簽名的隨機(jī)串
					signature: wxData.signature, // 必填，簽名
					jsApiList: wxData.jsApiList // 必填，需要使用的JS接口列表
				})
				wx.ready(function() {
					// config信息驗(yàn)證后會(huì)執(zhí)行ready方法，所有接口調(diào)用都必須在config接口獲得結(jié)果之后，config是一個(gè)客戶端的異步操作，所以如果需要在頁(yè)面加載時(shí)就調(diào)用相關(guān)接口，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來(lái)確保正確執(zhí)行。對(duì)于用戶觸發(fā)時(shí)才調(diào)用的接口，則可以直接調(diào)用，不需要放在ready函數(shù)中。
					wx.checkJsApi({
						jsApiList: ['scanQRCode'], // 需要檢測(cè)的JS接口列表，所有JS接口列表見(jiàn)附錄2,
						success: function(res) {
							console.log('返回信息')
							console.log(res)
							// 以鍵值對(duì)的形式返回，可用的api值true，不可用為false
							// 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
						}
					});
				});
				wx.error(function(res){
				  // config信息驗(yàn)證失敗會(huì)執(zhí)行error函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對(duì)于SPA可以在這里更新簽名。
				console.log(res,'接口驗(yàn)證失敗')
				});			}

然后就是點(diǎn)擊事件乎起掃碼功能

//掃碼
		bindsaoQRcode:function(){
				wx.scanQRCode({
				  needResult: 1, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
				  scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
				  success: function (res) {
					  console.log(res);
					  console.log('掃碼')
				    var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
	                window.location.href = result //安卓機(jī)型跳轉(zhuǎn)渲染有問(wèn)題 所以要加這句
				  }
				});
			},