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>

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

概述 | 微信开放文档 

 

在React中,如果你想要让H5页面集成微信功能,你需要通过微信JavaScript SDK来实现。首先,需要在你的项目里引入微信的`js-sdk`,通常的做法是在HTML文件的`<head>`部分加入如下的代码: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js" charset="utf-8"></script> ``` 然后,在需要使用的地方,你可以创建个按钮并添加事件监听器,例如: ```jsx import WeixinJSBridge from 'weixin-jsbridge'; function scanButton() { if (typeof WeixinJSBridge === 'undefined') { // 如果微信SDK尚未准备好,注册回调函数 window.addEventListener('load', function () { if (typeof WeixinJSBridge === 'undefined') { document.getElementById('scan-button').onclick = scanButton; } else { WeixinJSBridge.call('scanCode', { success: function (res) { console.log('描结果:', res); // 这里处理码后的逻辑 }, cancel: function () { // 用户取消码操作 } }, { scanType: ['qrCode', 'barCode'], // 可选码类型 needResult: 1, // 默认为true,0表示直接返回描结果,1表示弹出可以选择保存的图片或者文字 saveToAlbum: false // 默认false,如果设置为true则可以将图片保存到手机相册 }); } }); } else { // 如果已经准备好,直接调用 WeixinJSBridge.on('menu:share:appmessage', function (params) { // 成功后的回调 }); WeixinJSBridge.call('scanCode'); } } // 在渲染阶段添加按钮并触发事件 render() { return ( <button id="scan-button" onClick={scanButton}></button> ); } ``` 记得在实际应用中替换上述示例中的回调处理逻辑,并且在用户首次访问页面时检查是否已授权微信JS-SDK,如果没有,需引导用户手动授权。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值