微信小程序开发——使用第三方插件生成二维码
需求场景:
小程序中指定页面需要根据列表数据生成多张二维码。
实现方案:
鉴于需要生成多张二维码,可以将生成二维码的功能封装到组件中,直接在页面列表循环中调用就好了。也可以给组件添加slot,在页面调用时写入需要跟二维码组件绑定在一起进行显示的内容。
技术难点:
微信小程序并没有提供官方二维码生成功能魔抗,所以这个就只能自己去找插件实现了。对于网上的插件,有很大一部分都是根据qrcode.js改进的。
对于插件的选择并不是很顺利,第一次选定了weapp-qrcode这个插件,本来开发测试都好好的,到了同事的华为v10上,就会出现间隔性不显示的问题(两个页面之间切换,有时候会不显示二维码),这个问题已经在git上提了Issues,并被作者标记为bug。
后边又找到另一个插件weapp-qrcode-base64,经反复测试验证,这个插件可以正常使用,已经将这个功能做了个小程序片段,详见:小程序二维码生成组件。
组件代码:
components/qrcode/index.js
// components/myComponent.js
const QR = require('./weapp-qrcode.js')
const rpx2px = wx.getSystemInfoSync().windowWidth / 750
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
value: String, //二维码内容
width: String, //二维码宽度(默认长宽相等)
},
data: {
qrcodeURL: ''
},
ready: function() {
var imgData = QR.drawImg(this.data.value, {
typeNumber: 3,//码点大小 1-40,数字越大,码点越小,二维码会显得越密集
errorCorrectLevel: 'H',//纠错等级 H等级最高(30%) 简单来说,就是二维码被覆盖了多少仍然能被识别出来 详见qrcode.js
size: parseInt(rpx2px * this.data.width)
})
this.setData({
qrcodeURL: imgData
})
},
methods: {
/**
* 长按保存图片
*/
save: function() {
var self = this
var aa = wx.getFileSystemManager(),
filePath = wx.env.USER_DATA_PATH + '/qrcode_' + self.data.value + '.png';
//写入临时文件
aa.writeFile({
filePath: filePath,
data: self.data.qrcodeURL.slice(22),
encoding: 'base64',
success: res => {
//保存临时文件到手机相册中去
wx.saveImageToPhotosAlbum({
filePath: filePath,
success: function(res) {
wx.showToast({
title: '保存成功',
})
},
fail: function(err) {
console.log(err)
}
})
console.log(res)
},
fail: err => {
console.log(err)
}
})
}
}
})
components/qrcode/index.wxml
<view class='qrcode'>
<image src="{{qrcodeURL}}" bindlongpress='save' style="width:{{width}}rpx; height:{{width}}rpx;margin:0 auto;"> </image>
<slot name="text"></slot>
</view>
页面引用:
pages/index/index.js
Page({
data: {
textArr: [
"11111111",
"00000000",
"7539514682492"
]
},
onLoad: function() { }
})
pages/index/index.wxml
<view wx:for="{{textArr}}">
<qrcode class="iblock" value="{{item}}" width="440">
<view slot="text">
{{item}}
</view>
</qrcode>
</view>
上边组件可以点击小程序二维码生成组件导入到微信开发者工具中进行查看。
微信小程序开发——使用第三方插件生成二维码的更多相关文章
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热潮即将到来, 我也怀着激动的心情准备全身心投入其中,不过截止目前,在官方网站上下载的最新版本都无法使用,打开 ...
- 【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
转自:https://www.cnblogs.com/stevenluo/p/6030445.html 微信小程序概念的提出,绝对可以算得上中国IT界惊天动地的一件大事,这可能意味着一场新的开发热 ...
- java、python、golang等开发语言如何快速生成二维码?
免费二维码生成途径非常多!比如比较有名的草料二维码,如果只是简单的使用,用它就足够了.但是如果想大规模的生成,那就不太合适了.再者很多工具都没办法在二维码中加入logo(像微信二维码一样). 接下来, ...
- 微信小程序开发工具使用与设计规范(二)
[未经作者本人同意,请勿以任何形式转载] 上一篇文章主要分析了微信小程序应用场景和优劣势.本篇你可以学习到: 如何使用小程序开发工具写一个Hello World 微信小程序设计规范 微信小程序项目结构 ...
- 自己开发chrome插件生成二维码
摘要: 最近在开发微信项目时,需要在微信调试,所以经常会在微信中输入本地服务地址,输入起来特别麻烦,所以自己就想了想微信中的扫一扫,然后开发了这款chrome插件,将当前url生成二维码,用微信扫一扫 ...
- C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)
用C#如何生成二维码,我们可以通过现有的第三方dll直接来实现,下面列出几种不同的生成方法: 1):通过QrCodeNet(Gma.QrCodeNet.Encoding.dll)来实现 1.1):首先 ...
- qrcode插件生成二维码
<!DOCTYPE html> <html> <head> <meta name="viewport" content="wid ...
- 使用Python第三方库生成二维码
本文主要介绍两个可用于生成二维码的Python第三方库:MyQR和qrcode. MyQR的使用: 安装: pip install MyQR 导入: from MyQR import myqr imp ...
- h5开发app之在线生成二维码
h5通过jquery和qrcode在线生成二维码 首先我们需要下载一个qrcode.js文件,然后依次引入jquery和qrcode文件. 1.创建一个输入框以便做演示使用: <input id ...
随机推荐
- 关于Spring IOC (DI-依赖注入)你需要知道的一切
<Spring入门经典>这本书无论对于初学者或者有经验的工程师还是很值一看的,最近花了点时间回顾了Spring的内容,在此顺带记录一下,本篇主要与spring IOC相关 ,这篇博文适合初 ...
- VS Code好用到飞起的配置设置
Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在桌面上运行,适用于Windows,macOS和Linux.它内置了对JavaScript,TypeScript和Node. ...
- Linux操作系统-CentOS6启动流程和服务管理
Linux操作系统-CentOS6启动流程和服务管理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux组成 1>.Linux: kernel+rootfs ker ...
- 关于ssh_config和sshd_config
转载:https://www.cnblogs.com/panda2046/p/5933498.html 在远程管理linux系统基本上都要使用到ssh,原因很简单:telnet.FTP等传输方式是 ...
- OpenStack核心组件-horizon web 界面管理
1. horizon 介绍 Horizon: Horizon 为 Openstack 提供一个 WEB 前端的管理界面 (UI 服务 )通过 Horizone 所提供的 DashBoard 服务 , ...
- CVE-2019-5475:Nexus2 yum插件RCE漏洞复现
0x00 前言 如果有想一起做漏洞复现的小伙伴,欢迎加入我们,公众号内点击联系作者即可 提示:由于某些原因,公众号内部分工具即将移除,如果有需要的请尽快保存 0x01 漏洞概述 最近hackerone ...
- python关于time几种格式处理方法总结
一.日期时间的表示方法: 时间戳 timestamp: 简介:时间戳表示的是从1970年1月1日00:00:00开始按秒计算的偏移量,是一个float类型 展示形式:1575278720.331 时间 ...
- Appium启动淘宝APP,输入搜索内容
# -*- coding:utf-8 -*- from appium import webdriver from time import sleep desired_caps ={ 'platform ...
- VMware共享本地文件
最后可以在这里找到
- 安装cuda及之后更新环境变量的方法
安装参考:https://www.cnblogs.com/fanfzj/p/8521728.html 更新环境变量: 将 CUDA.CUPTI 和 cuDNN 安装目录添加到 %PATH% 环境变量中 ...