# 快速上手 提示
我们在开发插件过程中已经趟过很多坑了，通过不断的总结，该文档已然成为一份宝贵的趟坑指南，还请细细阅读并遵守文中的一些规则，这样可以避免掉很多不必要的坑哟。
提示
在uni-app中，我们更推荐使用组件方式来生成二维码，组件方式大大提高了页面的可读性以及避开了一些平台容易出问题的地方，当组件无法满足需求的时候，再考虑切换成原生方式。
官方文档：https://uqrcode.cn/doc (opens new window)。
github地址：https://github.com/Sansnn/uQRCode (opens new window)。
npm地址：https://www.npmjs.com/package/uqrcodejs (opens new window)。
uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=1287 (opens new window)。
# 原生方式 原生方式仅需要获取uqrcode.js文件便可使用。详细配置请移步到：文档 > 原生 (opens new window)。
# 安装 通过npm安装，成功后即可使用import或require进行引用。 # npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js
通过项目开源地址获取uqrcode.js，下载uqrcode.js后，将其复制到您项目指定目录，在页面中引入uqrcode.js文件即可开始使用。 # 引入 通过import引入。 // npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
Node.js通过require引入。 // npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
原生浏览器环境，在js脚本加载时添加到window。
# 简单用法 uQRCode基于Canvas API封装了一套方法，建议开发者使用canvas生成，一键调用，非常方便。以下是示例：
HTML示例
DOM部分
JS部分 // 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
uni-app示例
Template部分
JS部分 onReady() {
// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
}
微信小程序，建议使用Canvas 2D，关于Canvas 2D的使用请参考微信开放文档。
# 高级用法 考虑到部分平台可能不支持canvas，所以uQRCode并没有强制要求和canvas一起使用，您还可以选择其他方式来生成二维码，例如使用js操作dom进行绘制或是使用svg绘制等。以下是示例：
uni-app v-for+view
js操作dom
svg
更多用法大家自行探索咯，期待分享哟~
# 导出临时文件路径 原生方式基于Canvas的，请自行参阅各平台Canvas的导出方式。以下是部分示例：
uni-app // 通过uni.createCanvasContext方式创建绘制上下文的，对应导出API为uni.canvasToTempFilePath
// 调用完ctx.draw()方法后不能第一时间导出，否则会异常，需要有一定的延时
setTimeout(() => {
uni.canvasToTempFilePath(
{
canvasId: this.canvasId,
fileType: this.fileType,
width: this.canvasWidth,
height: this.canvasHeight,
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
}
},
// this // 组件内使用必传当前实例
);
}, 300);
Canvas2D // 得到base64
console.log(canvas.toDataURL());
// 得到buffer
console.log(canvas.toBuffer());
# 保存二维码到本地相册 必须在导出临时文件路径成功后再执行保存。uni-app通用保存方式（H5除外）：
uni.saveImageToPhotosAlbum({
filePath: tempFilePath,
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
}
});
H5可以通过设置标签href属性的方式进行保存：
const aEle = document.createElement('a');
aEle.download = 'uQRCode'; // 设置下载的文件名，默认是'下载'
aEle.href = tempFilePath;
document.body.appendChild(aEle);
aEle.click();
aEle.remove(); // 下载之后把创建的元素删除
经过测试，PC端浏览器可以下载，部分安卓自带或第三方浏览器可以下载，安卓微信浏览器不适用，移动端iOS所有浏览器均不适用，差异较大，还是推荐各位导出文件给图片组件显示，然后提示用户通过长按图片进行保存这种方式。
# uni-app组件方式 # 安装 通过uni-app插件市场地址安装：https://ext.dcloud.net.cn/plugin?id=1287 (opens new window)。详细配置请移步到：文档 > uni-app组件 (opens new window)。
# 引入 uni-app默认为easycom模式，可直接键入
# 简单用法 安装uqrcode组件后，在template中键入
Template部分
JS部分 data() {
return {
options: {
margin: 10
}
}
}
# 导出临时文件路径 为了保证方法调用成功，请在 complete (opens new window) 事件返回success=true后调用。
// uqrcode为组件的ref名称
this.$refs.uqrcode.toTempFilePath({
success: res => {
console.log(res);
}
});
# 保存二维码到本地相册 为了保证方法调用成功，请在 complete (opens new window) 事件返回success=true后调用。
// uqrcode为组件的ref名称
this.$refs.uqrcode.save({
success: () => {
uni.showToast({
icon: 'success',
title: '保存成功'
});
}
});