自己做了一个h5端调起微信扫一扫的功能，上网一找，没有说得很详细的，依样画葫芦，结果出了很多问题。下面给大家讲一下做的方法，用这个方法亲测有效。

在做之前了解一下 JSSDK使用步骤，这个在 https://developers.weixin.qq.com/doc/

如果看完这个，对UNIAPP（H5）JSSDK的使用还是不明白，可以看看下面这种方法

这个随便一搜就有。下面开始实现

第一步引入jweixin-module文件，按照自己喜欢的方式途径下载好jweixin-module文件

本人是直接 npm install jweixin-module --save

我们只需要引入文件夹里面的jweixin-module就行

在main.js加载jweixin-module文件 import wx from ‘@/node_modules/jweixin-module/lib/index’ 这里的路径看你文件放在哪，我没有单独把jweixin-module文件提出来，你也可以提出来后放在components里面

接着就是页面中使用了

下面分段说明

这里我在页面加载完毕的时候就请求接口了，你也自己封装一个方法，直接引入就行。

通过config接口注入权限设置（拿到签名数据后就是注入权限了)

最后在需要的地方使用就行啦

最后附上我的代码，里面请求接口改成你自己的

<template>

    <view>

        <button class=“bg-blue” @click=“scancode()”>扫码</button>

    </view>

</template>

<script>

    export default {

        data() {

            return {}

        },

        onLoad() {

            // #ifdef H5

            let redirect_uri = location.href.split(’#’)[0]

            this.$http.get(‘你的接口’, {

                sing_url: redirect_uri

            }).then(res => {

                this.wx_co(res.data)

            }).catch(e => {

                console.log(‘错误信息’, e);

            });

            // #endif

        },

        methods: {

            wx_co: function(wx_co) {

                this.$wx.config({

                    debug: false, // 开启调试模式

                    appId: wx_co.appId, // 必填，公众号的唯一标识

                    timestamp: wx_co.timestamp, // 必填，生成签名的时间戳

                    nonceStr: wx_co.nonceStr, // 必填，生成签名的随机串

                    signature: wx_co.signature, // 必填，签名，见附录1

                    jsApiList: [‘onMenuShareAppMessage’, ‘scanQRCode’] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

                });

                this.$wx.ready(function() { //需在用户可能点击分享按钮前就先调用

                    this.$wx.checkJsApi({

                        jsApiList: [‘scanQRCode’], // 需要检测的JS接口列表，所有JS接口列表见附录2,

                        success: function(res) {

                            // 以键值对的形式返回，可用的api值true，不可用为false

                            // 如：{“checkResult”:{“chooseImage”:true},“errMsg”:“checkJsApi:ok”}

                        }

                    });

                });

                this.$wx.error(function(res) {

                    console.log(res, ‘this.$wx.error’) // config信息验证失败会执行error函数

                });

            },

            scancode: function() {

                this.$wx.scanQRCode({

                    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，

                    scanType: [“qrCode”, “barCode”], // 可以指定扫二维码还是一维码，默认二者都有

                    success: function(res) {

                        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果

                    }

                });

            }

        }

    }

</script>

<style lang=“scss”>

</style>

好了，到这里UNI-APP 开发微信公众号（H5）调用微信扫一扫就实现了，是不是很简单，

最后附上效果

 

讲得不是很好，但是用这个方法一定可以调起微信扫一扫！

想要代码可以找我拿