最麻烦的事情是这玩意要在正式上调试，相当于你不能在内网自己调试，每发布一次就调试一次

看到无数次这个invalid signature都崩溃了

最后我看到了config ok，觉得简直是奇迹。

这个链接是jssdk的使用说明，简单来说就是这个要前后端配合的。相信后端！

后端工作：

1.要是公众号的appid而不是小程序的，申请h5的域名，自己配好白名单。权限问题害得是后端

2.看文档后端自己去拿AccessToken，通过AccessToken拿jsapi_ticket ，拿到之后最谜语人头疼的的就是这步----加密算法

但其实就是把jsapi_ticket 变成 三个东西signature，timestamp，nonceStr。

其中因为jsapi_ticket是不能频繁获取，2小时内有效，所以后端需要缓存到数据库，2小时内jsapi_ticket不变，signature，timestamp，nonceStr是给前端的，这三个随时变，怎么转？其实已经给了你函数了，自己去下载吧

https://www.weixinsxy.com/jssdk/sample.zip

上面有java，nodejs，python等，直接用就行

3.url这个特别关键，url不能硬编码hardCode，开给前端，让前端传给你去拿signature，timestamp，nonceStr，所以这个接口就是这样写的，前端给url和token，后端return回signature，timestamp，nonceStr

 最后要用这个校验微信 JS 接口签名校验工具

概述 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

前端工作：

1.拿到接口，baseUrl必须是域名的，正在的接口叫https://www.xxxxx.com，（这也是白名单的接口），然后axios.post拿params是url，url是当前的url，url是最关键的，url后如果有?参数的话，可以把参数?后面的传入sessionToken里面，然后url传入?前面的那个短的就行，拿url也可以传入的时候写同一个就可以了。目的就是拿到正确的signature，timestamp，nonceStr，这步和后端联调校验确认好

2.下面就是引入sdk了，两种方法，第一种是cnpm i weixin-js-sdk，然后import wx from "weixin-js-sdk";

但是由于我的框架是uniapp+vite+vue3+ts，uniapp它自带wx这个接口，所以会有变量冲突，污染的问题，所以我用了第二种方法在index.html里面

<script

      type="text/javascript"

      src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"

    ></script>

 /**wxx是jssdk*/

    window["wxx"] = wx;

    console.log("引入的wxsdk", window["wxx"]);然后这样就行，写在body的前面，打印看看有什么接口

我们看到确实有scanQRCode这个接口，和小程序原生的scanCode是不同滴

3.引入jssdk后，并且拿到那三个后signature，timestamp，nonceStr，配置，注意是公众号的appID，而不是小程序的，debug暂时先开着true，后面上线再关掉，主要是看弹出来的signature是否有效

 window["wxx"].config({

      debug: true, // 是否开启调试模式，可以在开发阶段设置为true，便于调试

      // appId: "wx5c1cdd31fc7a089", // 小程序的AppID

      appId: "wxa9d93851b1f8a5a", // 公众号的AppID

      timestamp: timestamp,

      nonceStr: nonceStr,

      signature: signature,

      jsApiList: ["scanQRCode"], // 需要使用的微信功能、列表

}）

4.如果以上都没问题，那下面就简单了，直接调用就可以，注意这个needResult一般都是1，如果不是1的话success的回调函数就不能执行了，扫到什么就弹出什么

const WXCMD_scan = () => {

    console.log("点击微信扫一扫wxx", window["wxx"])

    console.log("点击微信扫一扫wx", wx)

  QRCode()}

function QRCode() {

    console.log("微信扫一扫")

    window["wxx"].scanQRCode({

        // onlyFromCamera: false,

        needResult: 1,

        scanType: ["qrCode", "barCode"],

        success: (result) => {

            console.log('result', result.resultStr);

            let QRCode = result.resultStr + ""

            // =======================================

            //你要用二维码的结果干的事情，发通知，都写在这

            inputValue.value = QRCode

           

            // =======================================

            // wx.showToast({

            //     title: '聚焦' + QRCode,

            //     icon: "none",

            //     image: "",

            //     duration: 1500,

            //     mask: true,

            // });

        },

        fail: (res) => {

            console.log('fail', res);

            // let QRCode = "DGSSL-T4-yhy-A-Q40-59"

            // BS.ED.emit("聚焦铝模板", QRCode);

            wx.showToast({

                title: "打开失败" + res,

                icon: "none",

                image: "",

                duration: 1500,

                mask: true,

            });

        },

    });

}

这个弄了差不多一个星期有多，非常头疼，需要前后端和发布人员极度配合，如果是全栈就很容易了。之前我也走了很多弯路，比如github看源代码，h5跳回小程序又跳回h5，通过url传参等等，也看到很多人在文档下面骂这个功能为什么这么难，都不行，希望能把微信小程序能把和h5配合的文档弄得简单点吧...........希望这篇文章能用简练的语言给大家一点启发！！