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


Posted in Javascript onMarch 29, 2019

好久没有写文章了,最近公司要做海报分享的活动,需要在小程序中生成扫了之后可以跳转普通网页的二维码,就在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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
Feb 14 Javascript
JavaScript实现打开链接页面的方式汇总
Jun 02 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
Jul 20 Javascript
jQuery Raty 一款不错的星级评分插件
Aug 24 Javascript
JS实战篇之收缩菜单表单布局
Dec 10 Javascript
JS实现复制内容到剪贴板功能
Feb 05 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
vue里面父组件修改子组件样式的方法
Feb 03 Javascript
vue 中动态绑定class 和 style的方法代码详解
Jun 01 Javascript
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
vue语法自动转typescript(解放双手)
Sep 18 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 #Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 #Javascript
使用weixin-java-miniapp配置进行单个小程序的配置详解
Mar 29 #Javascript
详解a标签添加onclick事件的几种方式
Mar 29 #Javascript
node(koa2) web应用模块介绍详解
Mar 29 #Javascript
Vue js 的生命周期(看了就懂)(推荐)
Mar 29 #Javascript
浅谈js闭包理解
Mar 28 #Javascript
You might like
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
javascript attachEvent绑定多个事件执行顺序问题
2010/10/20 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
简单讲解AngularJS的Routing路由的定义与使用
2016/03/05 Javascript
最佳的JavaScript错误处理实践
2016/07/16 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Js利用console计算代码运行时间的方法示例
2017/09/24 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
基于PHP pthreads实现多线程代码实例
2020/06/24 Javascript
纯JS开发baguetteBox.js响应式画廊插件
2020/06/28 Javascript
python使用Tkinter显示网络图片的方法
2015/04/24 Python
python 基础教程之Map使用方法
2017/01/17 Python
python中redis查看剩余过期时间及用正则通配符批量删除key的方法
2018/07/30 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
记录Python脚本的运行日志的方法
2019/06/05 Python
Python+OpenCV 实现图片无损旋转90°且无黑边
2019/12/12 Python
Python3.9新特性详解
2020/10/10 Python
澳大利亚家具和家居用品购物网站:Zanui
2018/12/29 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
Shell脚本如何向终端输出信息
2014/04/25 面试题
入党自荐书范文
2014/03/09 职场文书
教师个人自我评价范文
2014/04/13 职场文书
2015大学生实训报告
2014/11/05 职场文书
教师个人年度总结
2015/02/11 职场文书
大学生党员自我评价
2015/03/04 职场文书
如何写新闻稿
2015/07/18 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers
Win11绿屏怎么办?Win11绿屏死机的解决方法
2021/11/21 数码科技
Java中的Kotlin 内部类原理
2022/06/16 Java/Android