h5页面的按钮按下调用出微信扫一扫功能

h5页面的按钮按下调用出微信扫一扫功能，这个功能怎么实现。
h5页面的按钮按下调用出微信扫一扫功能，这个功能怎么实现。h5页面的按钮按下调用出微信扫一扫功能，这个功能怎么实现。

这个需要借助 wx官方的jdk

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

页面上点击按钮打开扫一扫的话，你可以使用js-sdk（https://mp.weixin.qq.com/wiki 中的微信网页开发——》微信JS-SDK说明文档）

https://my.oschina.net/u/4538334/blog/5270581

这个需要用到微信的js-sdk,想要使用这个sdk,你首先需要获取签名,签名的逻辑必须在后端实现,这是后端实现签名的文档
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

前端的做法就是先调用后端签名的接口,然后拿到后端返回的签名,调用wx.config注入需要用的功能,
我之前做过,前端代码你可以参考

scan() {
            let urls = location.href.split("#")[0];
            postAjax( `这里是后端签名的接口地址`,{
                url:urls,//接口参数必要当前页面的url,
                appId:"",//appid根据需求,如果只有一个公众号,可以在后端写死,如果有多个,可以前端传入
            }).then((res: any) => {
                //console.log(res);
              //这里的判断逻辑根据后端返回的参数来写
                if (res.data.code == 200) {
                    let result = res.data.data;
                    let that = this;
                    // @ts-ignore
                    wx.config({
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                        appId: result.appId, // 必填，公众号的唯一标识
                        timestamp: result.timestamp, // 必填，生成签名的时间戳
                        nonceStr: result.nonceStr, // 必填，生成签名的随机串
                        signature: result.signature,// 必填，签名
                        jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表
                    });
                    // @ts-ignore
                    wx.ready(function () {
                        // @ts-ignore
                        wx.scanQRCode({
                            needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                            scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
                            success: function (tes: any) {
                                let result: string = tes.resultStr; // 当needResult 为 1 时，扫码返回的结果
                            }
                        });
                    });
                    // @ts-ignore
                    wx.error(function (res: any) {
                        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                        console.log("签名失败", res);
                    });
                }
            })
        }

不同环境在不同环境下使用，例如：
微信浏览器使用微信的扫一扫

通用的话，建议用打开图片拍照，然后识别图片里的二维码

1、绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
2、引入 JS 文件，在需要调用 JS 接口的页面引入如下 JS 文件，http://res.wx.qq.com/open/js/jweixin-1.6.0.js
3、通过 config 接口注入权限验证配置

wx.config({
  debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

4、调用微信扫一扫接口，将以下代码放到你的按钮click事件里面即可。

wx.scanQRCode({
  needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
  }
});

官网有对应的api

用微信公众平台提供的js-sdk就可以实现，去看微信公众号开发文档