如何生成不限制的小程序二维码，并且选择上传文件后将二维码下载到指定文件夹内（傻瓜式教程）

本文链接：https://blog.youkuaiyun.com/wenbo_zhang/article/details/144828763

由于后端小伙伴没有时间，所以麻烦我这个前端小白自己把所需要的小程序二维码自己跑下来，呜呜呜~~~（天将降大任于斯人也，必先......）。废话不多说，直接开始干活：

一、创建vue3开发环境

1、在命令行输入 npm create vite@latest

2、然后会提示你，需要按照vite依赖包，我们填y回车

3、然后会让你输入项目名，根据自己需求修改和填写

4、上下箭头选择vue框架，之后根据自己需要进行选择（由于自己只需要跑图片，所以作者选js，图简单）

5、进入项目并且安装依赖 npm install

注释：作者小白不需要完整的项目，只需跑图片，所以不仔细说明页面项目构造，有需要的小伙伴可查阅其他资料。

二、安装 axios，并直接使用

npm install axios --save

或者

yarn add axios

引入Axios的步骤如下：

在需要使用Axios的.js或.vue文件中，通过import语句来引入Axios：

import axios from 'axios';

三、提前获取access_token（小程序二维码需要）

// 获取access_token

const getAccessToken = async() => {

const res = await axios.get('/api/cgi-bin/token?grant_type=client_credential&appid=xxxxxxx&secret=xxxxxxxxxx')

if (res.status === 200) {

accessToken.value = res.data.access_token

} else {

getAccessToken()

}

}

注释：

grant_type：client_credential（唯一默认值，无需修改）

appid：小程序ID（可在dcloud中查看）

secret：需要后端小伙伴进行提供。（之前也可在dcloud查看，但其为了安全，将这个东西隐藏了）

四、选择上传的文件，并且生成对应的小程序二维码

创建input标签，选择文件

  <input type="file" @change="handleFile" placeholder="选择文件" accept=".xlsx, .xls"/>

js逻辑的提前准备

首先因为生成的二维码比较大，所以需要进行压缩

npm install compressorjs

或者

yarn add compressorjs

然后直接引入使用

import Compressor from 'compressorjs'

如何使项目选择相关文件夹，并识别其中数据

npm install xlsx

引入使用

import * as XLSX from "xlsx"

具体相关逻辑

// 选择上传的excel文件
const handleFile = (event) => {
  const file = event.target.files[0]
  if (!file) return
  const reader = new FileReader()
  reader.onload = async(e) => {
    const data = new Uint8Array(e.target.result)
    const workbook = XLSX.read(data, { type: 'array' })
    const firstSheetName = workbook.SheetNames[0]
    const worksheet = workbook.Sheets[firstSheetName]
    const json = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
    fileInput.value = json.flat().map(String)
    fileInput.value.forEach(element => {
      dataArr.value.push({scene:element, page:'pages/company-detail/supplier-detail/supplier-detail'})
    })
    let requestQueue = []
    for (let i = 0; i < dataArr.value.length; i++ ){
      const item = dataArr.value[i]
      const getImageCode = await axios.post(`/api/wxa/getwxacodeunlimit?access_token=${accessToken.value}`, item, {
        headers: {'Content-Type': 'application/json'},
        responseType: 'blob'
      })
      // 将blob数据压缩显示后下载到本地
      let blob = new Blob([getImageCode.data], { type: 'image/jpeg' })
      new Compressor(blob, {
        quality: 0.5, // 取值范围 0~1，内容逐渐清晰
        success: (res) => {
          // URL.createObjectURL是浏览器自动解析blob数据，可将图片显示
          imageSrc.value.push({ image: URL.createObjectURL(res), sequence: item })
          // 创建a标签，模拟点击
          const link = document.createElement('a')
          link.href = URL.createObjectURL(res)
          link.download = `${item.scene}.png`
          link.click()
          link.remove()
        }
      })
      requestQueue.push(getImageCode)
      if (requestQueue.lengt >= 10) {
        await Promise.race(requestQueue)
        requestQueue = requestQueue.filter(p => p !== request)
      }
    }
    await Promise.all(requestQueue)
  }
  reader.readAsArrayBuffer(file)
}

注释：

access_token就是之前获取的值，注意有效时间是两小时。