uniapp项目引入微信JSSDK并封装使用

1、引入微信JSSDK

其实这一步我研究了半天，vue中可以实现导入外部cdn资源的办法，但是，在uniapp中，目前我不知道怎么去配置相关文件，按照vue的方法去配置貌似不行，还是说我没找对方法，知道的朋友可以留言告诉我一下。接下来我就说一下我的引入方法。
其实在uniapp的社区有这个：DCloud社区引入微信JSSDK。
如果你们的后端不知道该怎么来写接口配合你使用。你可以给他微信官方的Demo（csdn貌似不能不直接下载，建议拷贝一下网址打开就好了），让他研究一下。
具体该如何使用微信JSSDK的一些相关接口，大家请自行浏览微信官方文档，本文只是提供一种比较简便的封装方法。

两种方法

1、npm

直接在你的项目下打开cmd输入下面的代码引入模块即可

npm install jweixin-module --save

2、直接下载js文件，保存到本地使用

下载地址有好几个

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

其中第一个是dcloud的下载地址，与上面的npm相对应，后面两个是微信jssdk官方的地址
但是这几个下载都有点问题，这三个地址反正我都试过，下载下来的文件在使用的时候始终会报一些不可名状的错误，所以建议还是用第一种方法，比较稳定。

封装JSSDK方便我们使用

废话不多说，直接上我封装好的代码。
文中涉及到的工具函数以及接口，大家需要根据自己的实际情况进行修改：

import { randomString } from "@/myui/js/random";//随机字符串工具函数
import { getSignature } from "@/api/apiconfig";//你们后端写好的签名的获取接口

var wxjssdk = require("jweixin-module"); //引入JSSDK
var nonceStr = randomString(32); // 生成签名的随机串,注意这个s是大写
var timestamp = parseInt(new Date().getTime() / 1000) + ""; // 生成签名的时间戳,到秒级
var url = location.href.split("#")[0]; // 获取当前页面的url中#前面那部分
var appId = "此处用你自己公众号的APPID"; // 公众号的唯一标识appid，注意大小写
var config = { nonceStr, timestamp, url }; //获取微信签名接口所需要的参数
var jsApiList = ["scanQRCode"]; //需要使用的微信JS接口列表
export default {
	async wxconfig() {
		let response = await getSignature(config); //获取签名接口，大家可以用uni.request()替代，此处是我自己封装的接口
		let wxconfig = {
			debug: false, //正式部署的时候记得把这个关掉
			// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId, // 必填，公众号的唯一标识
			timestamp, // 必填，生成签名的时间戳
			nonceStr, // 必填，生成签名的随机串,注意这个s是大写
			signature: response.Data, // 必填，签名
			//每增加一个要是用的接口，就需要在这里添加相应的微信js接口与之对应
			jsApiList, // 必填，需要使用的JS接口列表
		};
		wxjssdk.config(wxconfig);
	},
	//封装微信JSSDK方法,采用闭包函数的原理将res值抛出到回调函数中
	scanQRcode({ success, fail, needResult = 1 }) {
		this.wxconfig();
		wxjssdk.ready(() => {
			wxjssdk.scanQRCode({
				needResult, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
				// scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
				success: res => {
					// {errMsg: "scanQRCode:ok", resultStr: ""} 当needResult 为 1 时，resultStr扫码返回的结果
					// {errMsg: "scanQRCode:ok"}当needResult 为 0 时，会导致页面跳转
					//扫码成功，抛出扫码结果
					success(res);
				},
			});
		});
		wxjssdk.error(res => {
			console.log("config fail:", res);
			//config fail，抛出失败原因
			fail(res);
		});
	},
};

这里的接口调用(let response = await getSignature(config);)
大家使用uni.request()代替即可,不会的话，建议你先看一下uniapp文档。

在你需要使用到微信JSSDK的页面文件引入并调用
具体代码如下：

import wxjs from "@/utils/wxJSSDK";

wxjs.scanQRcode({
success: res => {
	uni.showToast({
		title: "扫码成功",
		icon: "none",
	});
},
});

其实，有心的朋友可以看到封装完后和uni.scanCode()用起来一样，这样以后就会更方便的使用，不用每调用一次接口，我们都要写一遍微信官方文档的那个流程。

到此我们就完成了微信JSSDK的引入和调用了，有什么问题，欢迎大家留言讨论，一起学习。