微信小程序 前台生成二维码(可带参数)

微信小程序 前台生成二维码(可带参数)

参考:https://segmentfault.com/a/1190000012675069
源码地址:https://github.com/tomfriwel/weapp-qrcode

最近的微信小程序项目中有这样一个需求,点击按钮生成保存店铺信息(小程序为交易平台系统)的二维码,可扫码进入店铺。各种百度之后发现此种方法方便易用,以此学习并记录下来,用的是原文作者改版后的生成二维码工具weapp-qrcode.js,demo里有很多文件,只需将util下的weapp-qrcode.js拷贝到项目中即可

参考图片如下(用的是原作者的图片)
这里写图片描述
这里写图片描述

使用方法

页面wxml中放置绘制二维码的canvas:

<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

js页面需引入weapp-qrcode.js文件

var QRCode = require('../../utils/weapp-qrcode.js')

onload中

    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            // usingIn: this,
            text: "code=123456",
            width: 150,
            height: 150,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    }

参数说明

usingIn 为可选参数,详情清查卡在自定义组件使用时失效及解决思路 #1

text 为需要转化为二维码的字符串;

width 和 height 为绘制出的二维码长宽,这里设置为跟canvas同样的长宽;

colorDark 和 colorLight 为二维码交替的两种颜色;

correctLevel 没有细看源码,命名上看应该是准确度;

如果需要再次生成二维码,调用qrcode.makeCode(‘text you want convert’)

实例应用

wxml:

<view class='input-wrapper'>
    <input bindinput='inputHandler' bindconfirm='confirmHandler' placeholder='输入需要转换为二维码的字符串' value='{{text}}'></input>
</view>
<view class='button-wrapper'>
    <button bindtap='tapHandler'>转为二维码</button>
</view>
<canvas class='canvas' canvas-id='canvas' bindlongtap='save'></canvas>

js:

var QRCode = require('../../utils/weapp-qrcode.js')

var qrcode;

Page({
    data: {
        text: '',
        image: ''
    },
    onLoad: function (options) {
        qrcode = new QRCode('canvas', {
            // usingIn: this,
            text: "",
            image:'/images/bg.jpg',
            width: 150,
            height: 150,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    },
    confirmHandler: function (e) {
        var value = e.detail.value
        qrcode.makeCode(value)
    },
    inputHandler: function (e) {
        var value = e.detail.value
        this.setData({
            text: value
        })
    },
    tapHandler: function () {
        // 传入字符串生成qrcode
        qrcode.makeCode(this.data.text)
    },
    save: function () {
        console.log('save')
        wx.showActionSheet({
            itemList: ['保存图片'],
            success: function (res) {
                console.log(res.tapIndex)
                if (res.tapIndex == 0) {
                    qrcode.exportImage(function (path) {
                        wx.saveImageToPhotosAlbum({
                            filePath: path,
                        })
                    })
                }
            }
        })
    }
})

wxss:

.input-wrapper {
    margin: 40rpx auto 0 auto;
    width: 600rpx;
    height: 88rpx;
    border: 2rpx solid #ddd;
    border-radius: 16rpx;
    padding-left: 10rpx;
    padding-right: 10rpx;
}
.input-wrapper input {
    font-size: 32rpx;
    line-height: 88rpx;
    height: 100%;
}
.button-wrapper {
    margin-top: 40rpx;
}
.canvas {
    margin: 220rpx auto;
    width: 150px;
    height: 150px;
}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值