H5公众号调用微信扫一扫功能(vue)

1.引入微信sdk 

import wx from 'weixin-js-sdk'

2.初始化微信sdk,构建扫一扫所需要的参数

 async initWxConfig() {

      //首先获取当前url地址

      let url = await getSignUrl()

      let params = {

        appid: this.$route.query.appid,

        url: url,

      }

      //调用后端接口获取公众号参数

      const resp = await apiGet(apiGetSignature, params)

      if (resp.code == 200) {

        wx.config({

          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

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

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

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

          signature: resp.data.signature, // 必填，签名

          jsApiList: ['checkJsApi', 'scanQRCode'],

          openTagList: ['wx-open-launch-weapp'],

          success: function () {

            console.log('调用成功')

          },

          fail: function (error) {

            console.log(error)

          },

        })

      } else {

        console.log('auth wx url error')

      }

    },

getSignUrl获取当前项目链接(此处封装的公用方法,便于后续其他页面调用): 

export function getSignUrl(){

    var signLink = ''

    var ua = navigator.userAgent.toLowerCase();

    if (/iphone|ipad|ipod/.test(ua)) {

        signLink =window.entryUrl;

        if(!signLink)signLink = location.href

    } else {

        signLink = location.href

    }

    return signLink;

}

3.点击页面按钮调用微信提供的扫一扫方法:

 

  handleClick() {

      wx.ready(function () {

        wx.checkJsApi({

          //判断当前客户端版本是否支持指定JS接口

          jsApiList: ['scanQRCode'],

          success: function (res) {

            // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}

            if (res.checkResult.scanQRCode != true) {

              console.log('抱歉，当前客户端版本不支持扫一扫')

            }

          },

          fail: function (res) {

            //检测getNetworkType该功能失败时处理

            alert('checkJsApi error')

          },

        }) //wx.checkJsApi结束

        // 调起企业微信扫一扫接口

        wx.scanQRCode({

          desc: 'scanQRCode desc',

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

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

          success: function (res) {

            console.log('调用扫描成功', res)

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

            $('#codeValue').val(result) //显示结果

            // alert("扫码结果为：" + result);

          },

          error: function (res) {

            console.log(res)

            if (res.errMsg.indexOf('function_not_exist') > 0) {

              alert('版本过低请升级')

            }

          },

        }) //wx.scanQRcode结束

      }) //wx.ready结束

    },

 

全部完整代码: 

<!-- 微信扫一扫 -->
<template>
  <div class="collaborative_page common_page">
    <van-button type="primary" @click="handleClick">点击扫一扫</van-button>
  </div>
</template>

<script>
import { apiGetSignature } from '@/api/common.js'
import { getSignUrl } from '@/utils/share.js'
import wx from 'weixin-js-sdk'
export default {
  data() {
    return {}
  },
  created() {
    this.LoginInfo = mySessionStorage.getItem('LoginInfo')
      ? JSON.parse(mySessionStorage.getItem('LoginInfo'))
      : {}
    this.initWxConfig()
  },
  mounted() {},
  methods: {
    //点击按钮扫一扫
    handleClick() {
      wx.ready(function () {
        wx.checkJsApi({
          //判断当前客户端版本是否支持指定JS接口
          jsApiList: ['scanQRCode'],
          success: function (res) {
            // 以键值对的形式返回，可用true，不可用false。如：{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
            if (res.checkResult.scanQRCode != true) {
              console.log('抱歉，当前客户端版本不支持扫一扫')
            }
          },
          fail: function (res) {
            //检测getNetworkType该功能失败时处理
            alert('checkJsApi error')
          },
        }) //wx.checkJsApi结束

        // 调起企业微信扫一扫接口
        wx.scanQRCode({
          desc: 'scanQRCode desc',
          needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
          scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码，默认二者都有
          success: function (res) {
            console.log('调用扫描成功', res)
            var result = res.resultStr // 当needResult 为 1 时，扫码返回的结果
            $('#codeValue').val(result) //显示结果
            // alert("扫码结果为：" + result);
          },
          error: function (res) {
            console.log(res)
            if (res.errMsg.indexOf('function_not_exist') > 0) {
              alert('版本过低请升级')
            }
          },
        }) //wx.scanQRcode结束
      }) //wx.ready结束
    },
    async initWxConfig() {
      //首先获取当前url地址
      let url = await getSignUrl()
      let params = {
        appid: this.$route.query.appid,
        url: url,
      }
      //调用后端接口获取公众号参数
      const resp = await apiGetSignature(params)
      if (resp.code == 200) {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: resp.data.appid, // 必填，公众号的唯一标识
          timestamp: resp.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: resp.data.nonceStr, // 必填，生成签名的随机串
          signature: resp.data.signature, // 必填，签名
          jsApiList: ['checkJsApi', 'scanQRCode'],
          openTagList: ['wx-open-launch-weapp'],
          success: function () {
            console.log('调用成功')
          },
          fail: function (error) {
            console.log(error)
          },
        })
      } else {
        console.log('auth wx url error')
      }
    },
  },
}
</script>

官方文档提供的扫一扫方法:

概述 | 微信开放文档