h5唤起微信扫一扫

  1. 安装和使用
npm install weixin-jsapi
import wx from 'weixin-jsapi'
  1. 封装成一个方法
import wx from "weixin-jsapi"
// 获取签名的接口(wx.config 里面的几个参数)
import {
    
     handleWxScanCode } from "@/api/tools" 
/**
 * 唤起微信支付
 * 获取微信签名信息
 * url: 当前扫码界面的url
 */
const wxScanCode =  (url) => {
    
    
  return new Promise(async(resolve,reject) => {
    
    
      let result = ''
      // const url = window.location.href.split("#")[0]
      // 发送请求
      const res = await handleWxScanCode({
    
     url })
      const {
    
     timestamp, nonceStr, signature, appId } = res.data
      wx.config({
    
    
        debug: false, // 调试模式,true 开启, false 关闭
        appId: appId, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: noncestr, // 必填,生成签名的随机串
        signature: signature, // 必填,签名
        jsApiList: ["scanQRCode"], // 必填,需要使用的JS接口列表
      })
      wx.error(function(res) {
    
    })
      wx.ready(function() {
    
    
        wx.checkJsApi({
    
    
          jsApiList: ["scanQRCode"],
          success: function(res) {
    
    }
        })
        wx.scanQRCode({
    
    
          needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
          scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
          success: function(res) {
    
    
		    // 业务代码,根据自己的实际需求来编写
		    // resultStr: 扫码成功后返回的结果
            result = res.resultStr
            result = result.split('?')[1].split('=')[1]
            // 获取到自己需要的结果
            resolve(result)
          }
        })
      })
  })
}
export default wxScanCode

猜你喜欢

转载自blog.csdn.net/m0_49045925/article/details/118668463