调用微信扫一扫功能JS-SDK说明文档

最新推荐文章于 2024-12-20 17:03:04 发布

原创

最新推荐文章于 2024-12-20 17:03:04 发布 · 682 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

文章介绍了如何在前端使用Vant框架和微信JS-SDK实现微信扫一扫功能，包括获取微信签名、配置权限验证以及扫码成功和失败的处理。

import { showToast } from 'vant'  //引入vant框架提示方法
import wx from "weixin-jsapi"; // 引入微信js-sdk 
import $ from 'jquery'

import { getWToken, getTicket } from '@api/modules/waste.js'
/**
 1. 获取微信签名，注入权限验证配置
 2. @returns 
 */
export function requestWxConfig() {

  // 获取当前扫码界面的url，url后面不能携带任何参数及#号，所以在此进行分割
  const url = window.location.href.split("#")[0]
  getWToken().then(res => {
    if (res.code == 200) {
      getTicket({uri: url}).then((res) => {
        let obj = {
          debug: false,
          appId: res.data.appid,
          timestamp: res.data.timestamp,
          nonceStr: res.data.noncestr,
          signature: res.data.sha1,
          jsApiList: ['scanQRCode'],
        }
        wx.config(obj)
        // 配置成功
        wx.ready(function () {
          console.log(88)
        })
        // 配置失败
        wx.error(function (res) {
          console.log(res)
        })

      })

    } else {
      console.log('api接口报错==>', res)
    }

  })

}
/**
 点击扫描按钮的时候执行on