评论

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

最后附上效果


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

想要代码可以找我拿

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

10 个评论

  • 沐沐ᯤ⁹⁹⁹ᴳ
    沐沐ᯤ⁹⁹⁹ᴳ
    01-15

    必须要配合公众号使用吗??

    01-15
    赞同
    回复
  • A_sunzt
    A_sunzt
    2022-09-19

    您好,楼主这个方法在iOS上测试过吗?谢谢。

    2022-09-19
    赞同
    回复
  • SuJinTuan
    SuJinTuan
    2021-10-18

    您好,请问可以加下联系方式?想向你讨教下uniapp微信扫码功能

    2021-10-18
    赞同
    回复
  • HQ
    HQ
    2021-07-19

    楼主,我现在Android手机能正常使用扫码功能,但iOS会提示签名错误,我加你QQ了,可以向您求教一下嘛?

    2021-07-19
    赞同
    回复 2
    • 如果有一天
      如果有一天
      2021-09-24
      我在ios端也调用失败,安卓手机可以正常调用,您那边解决了么?
      2021-09-24
      回复
    • A_sunzt
      A_sunzt
      2022-09-19回复如果有一天
      我现在也是iOS调用失败,iPhone13。您那边解决了吗?
      2022-09-19
      回复
  • 执念
    执念
    2021-06-04

    求个代码呀谢谢楼主,QQ已经加你啦

    2021-06-04
    赞同
    回复
  • just do it
    just do it
    2021-04-18

    errmsg:config:invalid url domain

    报这种错一般是什么问题?


    2021-04-18
    赞同
    回复 1
    • A_sunzt
      A_sunzt
      2022-09-19
      微信公众号设置一下域名
      2022-09-19
      回复
  • 往惜
    往惜
    2021-04-02

    HXD,我加你QQ了,问几个问题。求解答

    2021-04-02
    赞同
    回复
  • 一月💙
    一月💙
    2020-08-06

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

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

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

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

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

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