评论

UNI-APP 开发微信公众号(H5)JSSDK的使用、微信扫一扫

UNI-APP 开发微信公众号(H5)JSSDK的使用、微信扫一扫

自己做了一个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)调用微信扫一扫就实现了,是不是很简单,

最后附上效果


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

想要代码可以找我拿

最后一次编辑于  05-15  
点赞 3
收藏
评论

3 个评论

  • 一月🤍
    一月🤍
    08-06

    方便给一下完整的代码?谢谢

    08-06
    赞同
    回复 1
    • l
      l
      08-14
      您加下我的QQ,我发给你1391691989
      08-14
      回复
  • 守望碎想
    守望碎想
    07-22

    我用了您的方法,但是依然在手机端就是有时候能调到,有时候调不到

    07-22
    赞同
    回复 1
    • l
      l
      08-14
      能详细说一下吗,您加下我的QQ,1391691989
      08-14
      回复
  • 我
    05-28

    您好,想跟您交流下关于uinapp H5开发微信扫码的功能,请问怎么联系您?

    05-28
    赞同
    回复 1
    • l
      l
      06-21
      抱歉,这么晚才看到回复你。还需要的话可以加我QQ:1391691989
      06-21
      回复
登录 后发表内容