SoFunction
Updated on 2025-04-05

Vue uses WeChat scan function implementation code to implement the code

Step 1: Install weixin-js-sdk and jquery packagesnpm install weixin-js-sdk jquery

Part 2: Configuration (The configurations are all returned by the backend, and the novices frontend only needs to pass the value as needed)

The code is as follows

import wx from “weixin-js-sdk”;
import $ from “jquery”;
goSao() {

 //Here [url parameter must be the URL to refer to], request the backend interface to exchange for signature //(Compatible with Android and iOS) let url = "Pass value";
 let ua = ();
 if (/iphone|ipad|ipod/.test(ua)) {
   = ("#")[0];
 } else if (/android/.test(ua)) {
   = ;
 }
 //Passed value in order to remove it# 
 $.get(`The path required in the background=${}`,
  function(response) {
   ({
    // Turn on debug mode, the return values ​​of all APIs called will be alerted on the client. To view the passed parameters, you can open them on the PC side. The parameter information will be printed through the log and will only be printed on the PC side.    debug: false,
    // Required, the unique identification of the official account    appId: ,
    // Required to generate a signature time stamp    timestamp: ,
    // Required to generate a random string of signatures    nonceStr: ,
    // Required, signature    signature: ,
    // Required, list of JS interfaces that need to be used, list of all JS interfaces    jsApiList: ["scanQRCode"]
   });
   (response)
  }
 );
 (function(res) {
  alert("An error occurred:" + ); //The advantage of this place is that the configuration is wrong, and the pop-up window will be incorrect, and then query according to the WeChat document. });
 let _t = this
  (function () {
    ({
      jsApiList: ['scanQRCode'],
      success: function (res) {

      }
    });
    ({
      needResult: 1, // The default is 0, the scan result is processed by WeChat, and 1 will directly return the scan result.      scanType: ["qrCode"], // You can specify whether to scan the QR code or the 1R code, both are default      success: async (res)=>{
       var result = ; // When needResult is 1, the result returned by scanning the code      alert(result )
      }
    });
  });
},

Tested, available

Note: Only available for WeChat browsers, and other browsers cannot

Summarize

This is the end of this article about the implementation code of vue using WeChat scan function. For more related vue, please search for my previous article or continue browsing the related articles below. I hope everyone will support me in the future!