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


Posted in Javascript onJuly 17, 2018

最近接到这样一个需求,需要在小程序里将十几位随机字符串转换为二维码的形式展示。公众号中(另一终端)调用JSSDK扫一扫功能,去扫描小程序生成的二维码。得到字符串,然后进行接下来的逻辑处理。

下面记录的是小程序中生成二维码图片这一操作,用的是原文作者改版后的生成二维码工具weapp-qrcode.js(demo的众多文件中只需将util下的这个文件拷贝到自己项目中),可在原文地址里clone demo。

截图(copy原文)

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

使用

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

加入点击改变二维码图片的按钮

<canvas class='canvas' canvas-id='canvas'></canvas>
<button bindtap='tapHandler' data-code='123abc456efg000'>转为二维码</button>  <!-- data-code为生成二维码所依据的字符串,这里将其写死了,实际应改为{{变量名}} -->
<button bindtap='tapHandler' data-code='555444333222111'>转为二维码</button>

2、页面js中引入

onload中初始化二维码 

定义按钮的事件处理函数

var QRCode = require('../../utils/weapp-qrcode.js');
var qrcode;
Page({
  onload: function(options){
    qrcode = new QRCode('canvas', {
      text: "code=0000000000000",
      width: 150,
      height: 150,
      colorDark: "#000000",
      colorLight: "#ffffff",
      correctLevel: QRCode.CorrectLevel.H,
    });
  },
  tapHandler: function(e){
    qrcode.makeCode(e.target.dataset.code); //用元素对应的code更新二维码
  }
});

参数说明

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

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

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

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

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

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

总结

以上所述是小编给大家介绍的微信小程序将字符串生成二维码图片的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 函数调用规则
Sep 14 Javascript
Draggable Elements 元素拖拽功能实现代码
Mar 30 Javascript
基于jquery tab切换(防止页面刷新)
May 23 Javascript
js监听键盘事件示例代码
Jul 26 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
Dec 01 Javascript
解决vue数组中对象属性变化页面不渲染问题
Aug 09 Javascript
小程序实现分类页
Jul 12 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
使用Vue实现图片上传的三种方式
Jul 17 #Javascript
vue的token刷新处理的方法
Jul 17 #Javascript
vue 权限认证token的实现方法
Jul 17 #Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 #Javascript
详解webpack import()动态加载模块踩坑
Jul 17 #Javascript
vue-router中的hash和history两种模式的区别
Jul 17 #Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 #Javascript
You might like
Oracle 常见问题解答
2006/10/09 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
实例讲解YII2中多表关联的使用方法
2017/07/21 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
基于jquery实现智能提示控件intellSeach.js
2016/03/17 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
jQuery实现可移动选项的左右下拉列表示例
2016/12/26 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
Echarts动态加载多条折线图的实现代码
2019/05/24 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
python制作一个桌面便签软件
2015/08/09 Python
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
Python cookbook(数据结构与算法)实现优先级队列的方法示例
2018/02/18 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
Python实现序列化及csv文件读取
2020/01/19 Python
Pygame的程序开始示例代码
2020/05/07 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
html5 利用canvas实现超级玛丽简单动画
2013/09/06 HTML / CSS
html5使用canvas绘制一张图片
2014/12/15 HTML / CSS
函授本科毕业生自我鉴定
2013/10/16 职场文书
客服专员岗位职责
2014/02/28 职场文书
合伙经营协议书范本
2014/04/18 职场文书
大学生就业求职信
2014/06/12 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
Python一些基本的图像操作和处理总结
2021/06/23 Python
5行Python代码实现一键批量扣图
2021/06/29 Python
阿里面试Nacos配置中心交互模型是push还是pull原理解析
2022/07/23 Java/Android