推荐一款适用所有Javascript运行环境的二维码生成组件。

uQRCode是一款基于Javascript环境开发的二维码生成插件，适用所有Javascript运行环境的前端应用和Node.js应用。

uQRCode可扩展性高，它支持自定义渲染二维码，可通过uQRCode API得到二维码绘制关键信息后，使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式，如随机颜色、圆点、方块、块与块之间的间距等。
还可以保存二维码到本地相册

组件地址

官方文档：https://uqrcode.cn/doc。

github地址：https://github.com/Sansnn/uQRCode。

npm地址：https://www.npmjs.com/package/uqrcodejs。

uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=1287。

1、uni-app示例

Template部分

<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>

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();
}

模板示例

还有一些其他示例，自己查看。

组件查看

HTML示例、使用js操作dom进行绘制或是使用svg绘制等

导出临时文件路径
原生方式基于Canvas的

2、保存二维码到本地相册

安装uqrcode组件后，在template中键入。设置ref属性可使用组件内部方法，canvas-id属性为组件内部的canvas组件标识，value属性为二维码生成对应内容，options为配置选项，可配置二维码样式，绘制Logo等

<uqrcode ref="uqrcode" canvas-id="qrcode" value="https://uqrcode.cn/doc" :options="{ margin: 10 }"></uqrcode>

保存二维码到本地相册
为了保证方法调用成功，请在 complete 事件返回success=true后调用。

// uqrcode为组件的ref名称
this.$refs.uqrcode.save({
  success: () => {
    uni.showToast({
      icon: 'success',
      title: '保存成功'
    });
  }
});