1. Introducing wechat JSSDK

In fact, I've studied this step for a long time. vue can import external cdn resources. However, in uniapp, at present, I don't know how to configure relevant files. It seems that it doesn't work according to vue's method. Still, I haven't found the right method. Friends who know can leave a message and tell me. Next, let me talk about my introduction method.
In fact, there is this in the uniapp community: Dccloud community introduces wechat JSSDK.
If your backend doesn't know how to write the interface to work with you. You can give it to him Wechat official Demo (it seems that csdn can't be downloaded directly. It's recommended to copy the website and open it). Let him study it.
For details on how to use some relevant interfaces of wechat JSSDK, please browse the wechat official documents. This article only provides a relatively simple packaging method.

Two methods

1,npm

Directly open cmd under your project and enter the following code to import the module

npm install jweixin-module --save

2. Download js files directly and save them locally

There are several download addresses

1. https://unpkg.com/jweixin-module@1.6.0/lib/index.js
2. http://res.wx.qq.com/open/js/jweixin-1.6.0.js
3. http://res.wx.qq.com/open/js/jweixin-1.6.0.js

The first one is the download address of dccloud, which corresponds to the npm above. The last two are Official wechat jssdk Address of
However, there are some problems with these downloads. I have tried these three addresses anyway. The downloaded files will always report some unspeakable errors when used, so it is recommended to use the first method, which is more stable.

Encapsulate JSSDK for our convenience

No more nonsense, just go directly to my encapsulated code.
The tool functions and interfaces involved in this article need to be modified according to your actual situation:

import { randomString } from "@/myui/js/random";//Random string utility function
import { getSignature } from "@/api/apiconfig";//The signature acquisition interface written on your back end

var wxjssdk = require("jweixin-module"); //Introducing JSSDK
var nonceStr = randomString(32); // Generate a random string of signatures. Note that this s is uppercase
var timestamp = parseInt(new Date().getTime() / 1000) + ""; // The timestamp of the generated signature, in seconds
var url = location.href.split("#")[0]; // Get the # front part of the url of the current page
var appId = "Use your own official account here. APPID"; // The only sign of official account appid is the case.
var config = { nonceStr, timestamp, url }; //Get the parameters required by wechat signature interface
var jsApiList = ["scanQRCode"]; //List of wechat JS interfaces to be used
export default {
	async wxconfig() {
		let response = await getSignature(config); //Get the signature interface, you can use Uni Instead of request (), here is my own encapsulated interface
		let wxconfig = {
			debug: false, //Remember to turn this off when you officially deploy
			// When the debugging mode is enabled, the return values of all APIs called will be alert ed on the client. To view the incoming 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.
			appId, // Required, the only sign of official account.
			timestamp, // Required, time stamp to generate signature
			nonceStr, // Required. Generate a random signature string. Note that this s is capitalized
			signature: response.Data, // Required, signature
			//Every time you add an interface for use, you need to add the corresponding wechat js interface here
			jsApiList, // Required, list of JS interfaces to be used
		};
		wxjssdk.config(wxconfig);
	},
	//Encapsulate the wechat JSSDK method and throw the res value into the callback function based on the principle of closure function
	scanQRcode({ success, fail, needResult = 1 }) {
		this.wxconfig();
		wxjssdk.ready(() => {
			wxjssdk.scanQRCode({
				needResult, // The default value is 0. The scanning result is processed by wechat, and 1 returns the scanning result directly,
				// scanType: ["qrCode", "barCode"], / / you can specify whether to scan QR code or 1D code. Both are available by default
				success: res => {
					// {errMsg: "scanQRCode:ok", resultStr: ""} when needResult is 1, the result returned by resultStr code scanning
					// {errMsg: "scanQRCode:ok"} when needResult is 0, the page will jump
					//If the code scanning is successful, the code scanning result will be thrown
					success(res);
				},
			});
		});
		wxjssdk.error(res => {
			console.log("config fail:", res);
			//config fail, throw the failure reason
			fail(res);
		});
	},
};

The interface call here (let response = await getSignature(config);)
We use Uni Request () can replace it. If not, I suggest you look at the uniapp document first.

You need to use the page file of wechat JSSDK to import and call
The specific codes are as follows:

import wxjs from "@/utils/wxJSSDK";

wxjs.scanQRcode({
success: res => {
	uni.showToast({
		title: "Code scanning succeeded",
		icon: "none",
	});
},
});

In fact, interested friends can see after packaging and uni Scancode () works the same way, so it will be more convenient to use in the future. We don't have to write the process of wechat official documents every time we call the interface.

So far, we have completed the introduction and call of wechat JSSDK. If you have any questions, please leave a message for discussion and learn together.