微信小程序生成二维码的示例代码

好久没有写文章了，最近公司要做海报分享的活动，需要在小程序中生成扫了之后可以跳转普通网页的二维码，就在github上面找了一下，确实找到了一个兼容兼容性比较不错的，给打加分享一下。

中间尝试了不少，有些在Android上上城会出现问题，亲测这个有效，兼容比较好，已经应用到我们项目中了。

由于在使用便利性方面考虑，我对这个进行了一定的改动，新增了二维码白边功能和支持回调函数直接获取临时文件的功能，希望能够帮助到大家。

github地址

weapp-qrcode 点击查看(欢迎star)，其中附有源工程地址

使用

在github上下载工程，主要用到的文件是/utils/weapp-qrcode.js文件

引入文件：

可以将文件直接放在自己工程下面引入使用

import QRCode from '/utils/weapp-qrcode.js'

使用：

new QRCode('myQrcode',{
 text: 'http://www.tongxingschool.com',
 width: 200,
 height: 200,
 padding: 12, // 生成二维码四周自动留边宽度，不传入默认为0
 correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
 callback: (res) => {
  console.log(res.path)
  // 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
 }
})

结构：

<canvas class="canvas-code"canvas-id="myQrcode" style="background:#fff;width: 200px;height: 200px;"/>

注意事项

  • 而宽高，js代码和结构中的宽高需要一致，宽高的样式一定要写成内联样式，不然会有意想不到的效果😁
  • padding的颜色自己控制即可，canvas的背景色就是留边的颜色
  • correctLevel是生成二维码可辨识度的级别，级别越高可辨识度越高，从低到高以此是M、L、H、Q

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序动态生成二维码的实现代码

    微信小程序动态生成二维码的实现代码

    效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu

  • 微信小程序 二维码canvas绘制实例详解

    微信小程序 二维码canvas绘制实例详解

    微信小程序 二维码canvas绘制 var canvas = { width: 100, height:36 }; function verification(ctx) { // //清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // //生成随机颜色 function getRandomColor() { return "#" + ("00000" + ((Math.random() * 167772

  • 微信小程序 获取二维码实例详解

     微信小程序 获取二维码实例详解 理论: 接口A: 适用于需要的码数量较少的业务场景 接口地址:(永久有效,数量有限,进入path对应的页面) https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN path String 不能为空,最大长度 128 字节 width Int 430(默认) 二维码的宽度 auto_color .. line_color .. 接口B:适用于需要的码数量极多,或仅临时使用的业务场景(永

  • nodejs获取微信小程序带参数二维码实现代码

    nodejs获取微信小程序带参数二维码实现代码 由于项目需求,需要获取小程序页面的带有参数的二维码.好,那就看文档搞吧. 之前都是写前端,没有写过后台的东西,这次难得有机会组长让我试一试试用node来写,那就写吧. 1.首页获取token,发送request请求,用get的方式,在url后面加上小程序的grant_type,appid,secret,就顺利拿到token了,注意,这个token是有有效时间的,小程序的是7200秒,也就是2个小时,每天获取的次数有限,需要有个中控服务器定时获取to

  • node实现生成带参数的小程序二维码并保存到本地功能示例

    本文实例讲述了node实现生成带参数的小程序二维码并保存到本地功能.分享给大家供大家参考,具体如下: 注意:小程序必须要上线才能获取到小程序二维码,否则会报错.. 使用node koa2框架,生成小程序二维码,需要引入两个模块 var requestp = require('request-promise'); var fs = require('fs'); // 载入fs模块 通过微信接口,获取小程序二维码,并保存到本地.返回图片名称. var wxapi = {}; module.expor

  • 微信小程序 PHP生成带参数二维码

    微信小程序 PHP生成带参数二维码

    微信小程序 PHP生成带参数二维码 官方获取小程序页面API 由于小程序参数二维码API提供的帮助有限,以下是我对该功能的一些理解 我主要是通过thinkphp后台接口实现,代码如下: 1.先获取ACCESS_TOKEN: $tokenUrl="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$this->appid."&secret=".

  • 微信小程序将字符串生成二维码图片的操作方法

    最近接到这样一个需求,需要在小程序里将十几位随机字符串转换为二维码的形式展示.公众号中(另一终端)调用JSSDK扫一扫功能,去扫描小程序生成的二维码.得到字符串,然后进行接下来的逻辑处理. 下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone demo. 截图(copy原文) 使用 1.页面wxml中放置绘制二维码的canvas 加入点击改变二维码

  • 微信小程序webview实现长按点击识别二维码功能示例

    本文实例讲述了微信小程序webview实现长按点击识别二维码功能.分享给大家供大家参考,具体如下: 场景:微信小程序,使用webview控件.需求:点击图片后长按图片出现"识别二维码" 1.JS代码: <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script type="text/javascript"> $(fu

  • 微信小程序生成二维码的示例代码

    好久没有写文章了,最近公司要做海报分享的活动,需要在小程序中生成扫了之后可以跳转普通网页的二维码,就在github上面找了一下,确实找到了一个兼容兼容性比较不错的,给打加分享一下. 中间尝试了不少,有些在Android上上城会出现问题,亲测这个有效,兼容比较好,已经应用到我们项目中了. 由于在使用便利性方面考虑,我对这个进行了一定的改动,新增了二维码白边功能和支持回调函数直接获取临时文件的功能,希望能够帮助到大家. github地址 weapp-qrcode 点击查看(欢迎star),其中附有源

  • 微信小程序二维码生成工具 weapp-qrcode详解

    微信小程序二维码生成工具 weapp-qrcode详解

    微信小程序 - 二维码生成工具 下载:weapp-qrcode.js文件 github:https://github.com/Pudon/weapp-qrcode-base64 在项目中引入 weapp-qrcode.js 文件 js const app = getApp(); const QR = require('../../lib/weapp-qrcode.js'); // 引入 weapp-qrcode Page({ /** * 页面的初始数据 */ data: { QrCodeURL:

  • three.js 制作动态二维码的示例代码

    今天郭先生说一下用canvas解析图片流,然后制作一个动态二维码的小案例,话不多说先上图,这是郭先生的微信二维码哦! 1. 解析图片流 canvas = document.createElement('canvas');//创建canvas画布 content = canvas.getContext('2d');//获取画布的上下文 canvas.width = 310;//设置尺寸 canvas.height = 310; img = new Image();//创建一张图片 img.src

  • Android ZxingPlus精简的二维码框架示例代码

    这个二维码框架不仅使用的代码少,而且可以生成带图片的二维码,而且二维码扫描界面也是先做好的,也比较好看.我们所需要做的就是在扫描二维码后得到的数据对其进行操作. 使用方法 添加依赖 compile 'com.singleshu:ZxingPlus:1.1.4' 代码 public class MainActivity extends AppCompatActivity { TextView test; ImageView imageView; @Override protected void o

  • Java生成中间logo的二维码的示例代码

    最近有负责微信开发,对于微信开发的项目,肯定少不了二维码啦,正好有个这样的需求,这对不同的商品生成一个二维码,扫码即刻下单.博主就弄了一个二维码生成的工具类. 弄出来之后,产品经理又说了,中间放上公司的logo是不是好一点?加上吧, 加上公司logo之后,产品经理想了想,每个商品都有个二维码,销售人员有很多个商品二维码,群发给用户,在qq群上,微信群上,怎么知道哪个二维码对应哪个商品的呢?于是决定要加上商品名称.最后商品二维码就成了下面这个模样了(当然啦,这里面的logo并不是博主现职公司的).

  • js生成二维码的示例代码

    js生成二维码的示例代码

    前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js 插件. 插件链接: qrcode.js下载地址,点击即可下载 一.一个简单的示例 如下:(仅供参考) <%-- Created by IntelliJ IDEA. User: ASUS author:xumz Date: 2021/2/27 Time: 10:33 搬运请备注 To change this template use File | Settings | File

  • PHP实现生成二维码的示例代码

    目录 前言 1.目前有2种类型的二维码 2.用户扫描带场景值二维码时,可能推送以下两种事件 3.创建二维码ticket 4.临时二维码请求说明 5.永久二维码请求说明 6.临时二维码和永久二维码生成实现的代码 前言 为了满足用户渠道推广分析和用户账号绑定等场景的需要,公众平台提供了生成带参数二维码的接口.使用该接口可以获得多个带不同场景值的二维码,用户扫描后,公众号可以接收到事件推送. 1.目前有2种类型的二维码 临时二维码,是有过期时间的,最长可以设置为在二维码生成后的30天(即2592000

  • C#/VB.NET 在Word中添加条码、二维码的示例代码

    本文介绍如何通过C# 和VB.NET代码实现在Word文档中添加条码和二维码.代码中将分为在Word正文段落中.页眉页脚中等情况来添加. 使用工具: Free Spire.Office for .NET (免费版) 工具简介: 这是Spire所有.NET平台下免费产品的集合包,包含Spire.Barcode.dll.Spire.DataExport.dll.Spire.Pdf.dll.Spire.Doc.dll.Spire.DocViewer.Forms.dll .Spire.PdfViewer

  • java使用jar包生成二维码的示例代码

    使用java进行二维码的生成与读取使用到了谷歌的zxing.jar 第一步 导入,maven依赖或者下载指定jar包 <!-- https://mvnrepository.com/artifact/com.google.zxing/javase --> <dependency> <groupId>com.google.zxing</groupId> <artifactId>javase</artifactId> <version

随机推荐