效果图如下：

实现

wxml

<!-- 存放二维码的图片-->
<view class='container'><image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
</view><!-- 画布，用来画二维码，只用来站位，不用来显示-->
<view class="canvas-box"><canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" />
</view>

wxss

.container {display: flex;align-items: center;justify-content: center;width: 100%;height: 100%;
}.container image {width: 686rpx;height: 686rpx;background-color: #f9f9f9;
}.canvas-box {position: fixed;top: 999999rpx;left: 0;
}

js

var QR = require("../../../lib/qrcode.js");Page({/*** 页面的初始数据*/data: {canvasHidden: false,imagePath: '',},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {//option为上个页面传递过来的参数var jiaoyanCode = 'sorry,jiaoyanCode is loss';//   if (options) {//        jiaoyanCode = options.jiaoyanCode;//   }console.log(jiaoyanCode);var size = this.setCanvasSize(); //动态设置画布大小  this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h);       },//适配不同屏幕大小的canvassetCanvasSize: function() {var size = {};try {var res = wx.getSystemInfoSync();var scale = 750 / 686; //不同屏幕下canvas的适配比例；设计稿是750宽  686是因为样式wxss文件中设置的大小var width = res.windowWidth / scale;var height = width; //canvas画布为正方形size.w = width;size.h = height;} catch (e) {// Do something when catch errorconsole.log("获取设备信息失败" + e);}return size;},/*** 绘制二维码图片*/createQrCode: function(url, canvasId, cavW, cavH) {//调用插件中的draw方法，绘制二维码图片QR.api.draw(url, canvasId, cavW, cavH);setTimeout(() => {this.canvasToTempImage(canvasId);}, 1000);},/*** 获取临时缓存照片路径，存入data中*/canvasToTempImage: function() {var that = this;//把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径。wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function(res) {var tempFilePath = res.tempFilePath;console.log(tempFilePath);that.setData({imagePath: tempFilePath,// canvasHidden:true});},fail: function(res) {console.log(res);}});},/*** 点击图片进行预览*/previewImg: function (e) {var img = this.data.imagePath;console.log(img);wx.previewImage({current: img, // 当前显示图片的http链接urls: [img] // 需要预览的图片http链接列表});},
})

qrcode.js 可以去这里下载。

详细源码请查看 https://github.com/demi520/wxapp-qrcode

PS：鉴于有个别网友私信反应还是出不来二维码图片，这里特地上传了一份源码。源码如下：https://download.csdn.net/download/She_lock/11982918
特别说明：这份源码和这篇文章分享的源码几乎一模一样，下载导入即可运行。能不下载自己调试就自己调试，省的还得花5积分。

微信小程序动态生成二维码相关推荐

微信小程序实现生成二维码功能并下载到本地
微信小程序实现生成二维码功能并下载到本地背景实现备注背景有这样一个需求,后台返回了url地址,微信小程序将url地址转成二维码图片,展示在页面上,并且该二维码图片可下载到用户手机相册中实现 ...
转载：在微信小程序中生成二维码
目录转载: weapp-qrcode-canvas-2d 仓库地址测试环境使用安装方法1:直接引入 js 文件安装方法2:npm安装安装完成后调用例子1:没有使用叠加图片例子2:使用叠 ...
微信小程序之生成二维码
首先先扯一些题外话,本人是java行业的小白,因为是改行做的java,之前的工作就不提了. 之前写过几篇随便,刚看了下,觉得比较low,就都删了,所以也算是进入java行业的第一篇随笔,如果有表述上或 ...
【微信小程序】生成二维码方式
前言基础库 2.12.0 开发者工具 1.03.2008270 生成二维码方式微信小程序的二维码可分为: 微信生成的二维码普通链接二维码微信生成的二维码,是指调用微信小程序服务端接口 wxac ...
vue H5页面跳转微信小程序以及生成二维码跳转小程序
研究了两种H5跳转小程序的方法,同时携带参数 1. 手机浏览器打开H5页面,点击按钮拉起微信小程序 2. H5页面上生成小程序二维码,手机微信扫码跳转目标小程序为了开发方便,以上两种均借助了微信小程 ...
如何在微信小程序中生成二维码：一个最简单的案例就让你明白
使用weapp.qrcode.js 在微信小程序中,快速生成二维码一.效果二.具体步骤.代码下载weapp-qrcode代码然后将 dist 目录下的weapp.qrcode.esm.j ...
微信小程序前端生成二维码并保存（海报同理）
这里写自定义目录标题 1.前端生成二维码并保存 1.前端生成二维码并保存 1.下载weapp.qrcode.js文件并引入项目中 2.先在wxml文件中构建canvas画布 <canvas st ...
小程序动态生成二维码
在项目中有一个使用二维码签到的需求,原理很简单,两个不同的账号登录,生成二维码一方向后台请求一个二维码信息的链接,签到的一方扫描二维码读取信息向后台请求校验.这里和后台对接的部分部件,原理已经说了,下 ...
.net/C# 微信小程序如何生成二维码图片
1.生成微信小程序二维码,需要获取微信小程序Access_Token.代码如下,先获取Access_Token /// <summary>/// 获取微信小程序Access_Token// ...

微信小程序动态生成二维码

效果图如下：

实现

wxml

wxss

js

微信小程序动态生成二维码相关推荐

最新文章

热门文章