微信二维码生成
前段时间做支付宝小程序项目需要生成二维码，然后找的方案。
首先看看目录结构截图
312313213123131312.png
红线勾出来的是主要内容，onLoad函数里面是最初的使用代码，然后接下来我会顺藤摸瓜的让读者搞清楚流程。
wxml部分（pages/index/index.wxml）
<view class="container page">
<view class="panel">
<!-- 条形码部分 -->
<view class="barcode">
<view class="barnum">{{code}}</view>
<canvas canvas-id="barcode" />
</view>
<!-- 二维码部分 -->
<view class="qrcode">
<canvas canvas-id="qrcode" />
</view>
</view>
</view>
wxss部分（pages/index/index.wxss）
page {
background-color: #439057;
}
.page {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.container {
padding-bottom: 10rpx;
}
.panel {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: stretch;
box-sizing: border-box;
width: 710rpx;
margin-top: 40rpx;
border-radius: 10rpx;
background-color: #fff;
}
.header {
height: 140rpx;
background-color: #f0f0f0;
border-radius: 10rpx 10rpx 0 0;
}
.barcode {
display: flex;
height: 320rpx;
flex-direction: column;
justify-content: center;
align-items: center;
}
.barnum {
width: 670rpx;
height: 100rpx;
line-height: 100rpx;
font-size: 38rpx;
font-weight: bold;
text-align: center;
letter-spacing: 10rpx;
white-space: nowrap;
}
.barcode > canvas {
width: 680rpx;
height: 200rpx;
}
.qrcode {
height: 420rpx;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.qrcode > canvas {
width: 420rpx;
height: 420rpx;
}
js部分（pages/index/index.js）
// 引入封装好的方法
var wxbarcode = require('../../utils/index.js');
Page({
data: {
code: 'www.baidu.com' //不用理会 只是小程序的数据展示
},
onLoad: function() {
// 以下是重点，使用封装好的方法展示条形码和二维码
wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
wxbarcode.qrcode('qrcode', 'http://www.baidu.com', 420, 420);
}
})
js部分（utils/index.js）
注意这个js文件是上面index.js文件第一行引入的路径，要确保引入进去./或者../要自己把握！
var barcode = require('./barcode'); //引入生成条形码方法
var qrcode = require('./qrcode'); //引入生成二维码方法
function convert_length(length) {
return Math.round(wx.getSystemInfoSync().windowWidth * length / 750);
}
function barc(id, code, width, height) { //封装展示条形码方法
barcode.code128(wx.createCanvasContext(id), code, convert_length(width), convert_length(height))
}
function qrc(id, code, width, height) { //封装展示二维码方法方法
qrcode.api.draw(code, {
ctx: wx.createCanvasContext(id),
width: convert_length(width),
height: convert_length(height)
})
}
// 导出两个封装好的方法让index.js里可以用
module.exports = {
barcode: barc,
qrcode: qrc
}
剩下barcode.js和qrcode.js在后面会为大家奉上。
支付宝小程序二维码生成
跟微信二维码生成有异曲同工之妙，只不过语法的原因，有些部分“wx”要改成“my”就行了。
在这就不一一说了。以下为支付宝小程序二维码生成展示图，后面附上demo可自行查看。
2fwfw23343.png
在这附上链接地址，简单粗暴
微信小程序&支付宝小程序二维码生成
提取码：ke93
最后再附上帮楼主解决问题的作者文章链接
对每一个帮我们解决问题的作者都要怀着感恩的心情，尊重他人的劳动成果，愿君附上以下原创地址
