uni-app 小程序二维码的生成及保存

前言：最近写了小程序二维码，分享一下

前面只写了小程序端的实现（有人在评论指出），现在更新下兼容版本，主要实现还是在-图像base64保存为文件，下面上一下兼容版本的

export function base64ToPath(base64) {
    return new Promise(function(resolve, reject) {
        if (typeof window === 'object' && 'document' in window) {
            base64 = base64.split(',')
            var type = base64[0].match(/:(.*?);/)[1]
            var str = atob(base64[1])
            var n = str.length
            var array = new Uint8Array(n)
            while (n--) {
                array[n] = str.charCodeAt(n)
            }
            return resolve((window.URL || window.webkitURL).createObjectURL(new Blob([array], { type: type })))
        }
        var extName = base64.match(/data\:\S+\/(\S+);/)
        if (extName) {
            extName = extName[1]
        } else {
            reject(new Error('base64 error'))
        }
        var fileName = Date.now() + '.' + extName
        if (typeof plus === 'object') {
            var bitmap = new plus.nativeObj.Bitmap('bitmap' + Date.now())
            bitmap.loadBase64Data(base64, function() {
                var filePath = '_doc/uniapp_temp/' + fileName
                bitmap.save(filePath, {}, function() {
                    bitmap.clear()
                    resolve(filePath)
                }, function(error) {
                    bitmap.clear()
                    reject(error)
                })
            }, function(error) {
                bitmap.clear()
                reject(error)
            })
            return
        }
        if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
            var filePath = wx.env.USER_DATA_PATH + '/' + fileName
            wx.getFileSystemManager().writeFile({
                filePath: filePath,
                data: base64.replace(/^data:\S+\/\S+;base64,/, ''),
                encoding: 'base64',
                success: function() {
                    resolve(filePath)
                },
                fail: function(error) {
                    reject(error)
                }
            })
            return
        }
        reject(new Error('not support'))
    })
}

应用：

import { base64ToPath } from '@/common/plus.js'
base64ToPath(url).then(path=>{
    console.log(path)
})

下面是从前的内容

• 通过接口获取token，直接调取微信接口POST https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN
  这个方法在模拟器上可以实现，但是由于安全域名的配置不能是https://api.weixin.qq.com。。。所以必须由后台获取

• 说一下实现：
  获取接口返回的数据（我这边由后台处理返回的是base64），然后把数据转图片文件，由canvas画出来（小程序的canvas绘制图片，图片路径必须为本地的路径）

• 组件代码(接口返回数据处理)：

import {getQrCode} from "@/api/spu.js"
//获取小程序码
getQrCode(this.option.path).then(res=>{
    uni.showLoading({title: '正在生成图片'});
    this.base64ToPath(res.result,path=>{
        console.log(path)
        this.qrCodeRes = path
        this.toDrawCanvas() //画图
    })
})

• base64转图片文件代码：

base64ToPath(path,success) {
    let that = this
    var fileName = Date.now() + '.' + 'png'
    if (typeof wx === 'object' && wx.canIUse('getFileSystemManager')) {
        var filePath = wx.env.USER_DATA_PATH + '/' + fileName
        wx.getFileSystemManager().writeFile({
            filePath: filePath,
            data: path,
            encoding: 'base64',
            success() {
                success(filePath)
            },
            fail(error) {
                that.$toast(error)
            }
        })
        return
    }
}

• 接口代码：

//获取微信小程序二维码(接口)
export function getQrCode(path,success) {
    let param = {
        "page":"pages/product/detail/index",
        "scene":path.split('?')[1],
        "width":"280"
    }
    return apiBase('wx/getXcxQrCode',param,{showLoading:false,resAll:true})
}

好啦，完成。。。撒花花～～～