微信小程序生成二维码工具

Rocture 发布于2019-08-21 18:35 / 1762人阅读

摘要：微信小程序生成二维码工具生成二维码数据的主要代码来自，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。

weapp-qrcode

微信小程序生成二维码工具

生成二维码数据的主要代码来自davidshimjs/qrcodejs，因为它这个里面生成二维码图片的功能在微信小程序里不能使用，我将这个功能改写成可以在微信小程序中使用。

截图

使用（自适应版本）

完整代码请参考pages/responsive/responsive，设置width和height的时候稍微所有不同。

canvas的长宽通过计算获得

const W = wx.getSystemInfoSync().windowWidth;
const rate = 750.0 / W;

// 300rpx 在6s上为 150px
const qrcode_w = 300 / rate;

Page({
    data: {
        ...
        qrcode_w: qrcode_w,
        ...
    },
    onLoad: function (options) {
        qrcode = new QRCode("canvas", {
            // usingIn: this,
            text: "https://github.com/tomfriwel/weapp-qrcode",
            image: "/images/bg.jpg",
            width: qrcode_w,
            height: qrcode_w,
            colorDark: "#1CA4FC",
            colorLight: "white",
            correctLevel: QRCode.CorrectLevel.H,
        });
    },
    ...
})

wxml页面中：

wxss中的canvas样式不再设置长宽。这样后就达到了自适应的效果，可以在不同设备上进行查看。

使用（非自适应）

完整代码请参考pages/index/index

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

页面js中引入:

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

页面加载好后:

//传入wxml中二维码canvas的canvas-id
//单位为px
var qrcode = new QRCode("canvas", {
    // usingIn: this,
    text: "https://github.com/tomfriwel/weapp-qrcode",
    width: 150,
    height: 150,
    colorDark: "#000000",
    colorLight: "#ffffff",
    correctLevel: QRCode.CorrectLevel.H,
});

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

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

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

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

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

如果需要再次生成二维码，调用qrcode.makeCode("text you want convert")。

wxss里需要设置同等的长宽，比如上面初始化时的长宽为150，那么：

.canvas {
    //...
    width: 150px;
    height: 150px;
}

主要流程

源代码

tomfriwel/weapp-qrcode

云服务器 GPU云服务器微信小程序生成免费生成微信小程序工具类微信小程序怎么制作微信小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90624.html

微信小程序开发系列二：微信小程序的视图设计

摘要：安装完毕后启动微信开发者工具，会要求我们指定一个本地项目目录和填写微信小程序的。我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。 showImg(https://segmentfault.com/img/remote/1460000016772885); 这是第一篇，从零开始学习微信小程序开发。主要是小程序的注册和开发环境的搭建。首先我们要在下列网址申请一个...

Ryan_Li 2019-08-23 12:29 评论0 收藏0
微信小程序开发系列一：微信小程序的申请和开发环境的搭建

摘要：我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。这是第一篇，从零开始学习微信小程序开发。安装完毕后启动微信开发者工具，会要求我们指定一个本地项目目录和填写微信小程序的。我最近也刚刚开始微信小程序的开发，想把我自学的一些心得写出来分享给大家。 showImg(https://segmentfault.com/img/remote/1460000016772885...

jeffrey_up 2019-08-23 12:29 评论0 收藏0
微信小程序集成 Jenkins

摘要：总结本文以微信小程序常规的发布流程为切入点，循序渐进地介绍了如何集成实现微信小程序预览上传功能。 showImg(https://raw.githubusercontent.com/yingye/Blog/master/images/wechat-jenkins.png); 本文首发于 https://github.com/yingye/Blo... ，欢迎各位关注我的Blog，正文以...

young.li 2019-08-23 11:41 评论0 收藏0
微信小程序码生成及可能存在的坑

摘要：换句话说，同一用户，对同一个微信开放平台下的不同应用，是相同的对于，微信程序码在同一时间用来掉用小程序码生成接口使用以及调用生成一个应用只有一个秘钥，只有一个有效，且有效期是分钟。小程序二维码的生成有三个不同的接口，针对不同的场景需求下文介绍的是第二种，也是用的最多的一种：适用于需要的码数量极多，或仅临时使用的业务场景接口地址：https://api.weixin.qq.com/wx...

546669204 2019-08-19 10:17 评论0 收藏0
微信小程序中生成二维码工具：weapp.qrcode.js

摘要：前言在近期的小程序开发中，有一个离线生成二维码的需求。所以，针对微信小程序的特点，封装了，用于在小程序中快速生成二维码。由于小程序没有动态创建标签的，所以这一步不能省略。调用绘制方法由于微信小程序不支持引入包，可以将目录下，拷贝至项目中。前言在近期的小程序开发中，有一个离线生成二维码的需求。当时想到了一些优秀的前端开源库 jquery-qrcode 和 node-qrcode，由于...

MarvinZhang 2019-08-26 11:35 评论0 收藏0