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

导读:本篇文章讲解 微信小程序动态生成二维码,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

效果图如下:

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

实现

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

    //适配不同屏幕大小的canvas
    setCanvasSize: 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 error
            console.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积分。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之家整理,本文链接:https://www.bmabk.com/index.php/post/16032.html

(0)
小半的头像小半

相关推荐

极客之家——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!