支付宝小程序开发——根据字符串生成二维码

探险王 發表於 2019-10-25 12:33:00

支付宝小程序开发——根据字符串生成二维码

支付宝小程序开发中，如果需要根据字符串生成二维码，那么可以直接使用 qrcode 插件，你无需引用js，直接使用开发者工具的npm功能就可以了。
一. 安装插件：
1.开发者工具左侧工具栏点击如图所示的图标（npm）：
<img src="https://img2018.cnblogs.com/blog/546882/201910/546882-20191025114023703-1741938194.png" alt="">
2.NPM包管理界面，输入框中输入 qrcode 并按回车键，等待插件安装完成：
<img src="https://img2018.cnblogs.com/blog/546882/201910/546882-20191025114108590-486282114.png" alt=""><img src="https://img2018.cnblogs.com/blog/546882/201910/546882-20191025114245270-263999645.png" alt="">
 
二. 引用并使用插件：
<div class="cnblogs_code">
<pre> 1 //引用插件
 2 const QRCode = require('qrcode');
 3 Page({
 4 data: {
 5 imgSrc: ''
 6 },
 7 onReady() {
 8 //根据字符串生成svn格式的二维码
 9 let self = this;
10 QRCode.toString('13549687961', { type: 'svg' }, function(err, url) {
11 let str = 'data:image/svg+xml;base64,' + Buffer(url).toString('base64');
12 self.setData({
13 imgSrc: str
14 })
15 });
16 }
17 ......</pre>
</div>
页面引用：
<div class="cnblogs_code">
<pre><image src="{{imgSrc}}"style="width:100%;" mode="aspectFit" /></pre>
</div>
如此，编译项目，二维码生成：
<img src="https://img2018.cnblogs.com/blog/546882/201910/546882-20191025114818491-1385123596.png" alt="">
 
 三. 需要生成多个券码的情况：
如果是根据数组中的某个券码生成二维码，那么可以封装这个方法：
<div class="cnblogs_code">
<pre>//根据字符串生成二维码
getQrcode(str) {
var qrcode=''
QRCode.toString(str, { type: 'svg', errorCorrectionLevel: 'H', maskPattern: 4, version: 2 }, function(err, url) {
 qrcode= 'data:image/svg+xml;base64,' + Buffer(url).toString('base64');
});
return qrcode
},</pre>
</div>
<div class="cnblogs_code">
<pre>//将券码合成二维码并保存到卡券详情数据中
arr.forEach(item=>{
console.log(item)
item["qrcode"]=self.getQrcode(item.coupon_number)
})
self.setData({
cardData: arr
}) </pre>
</div>
 

</div>
<div id="MySignature" role="contentinfo">
个人原创博客，转载请注明来源地址：https://www.cnblogs.com/xyyt 
来源：https://www.cnblogs.com/xyyt/p/11737232.html

頁: [1]

琼殿技术论坛's Archiver

支付宝小程序开发——根据字符串生成二维码