最近有遇到小程序需要展示二维码的需求，我使用的vue2+uniapp的开发环境。因为小程序有包的大小限制，所以不能使用npm下载，需要下载文件下来，直接放到公共文件里面展示。
好的，下来就要看使用流程，
下载文件
先下载qrcode的lib
地址：https://download.csdn.net/download/qq_43185384/86543462
大概内容为
// Core code comes from https://github.com/davidshimjs/qrcodejs
var QRCode;
(function () {
/**
* Get the type by string length
*
* @private
* @param {String} sText
* @param {Number} nCorrectLevel
* @return {Number} type
*/
function _getTypeNumber(sText, nCorrectLevel) {
var nType = 1;
var length = _getUTF8Length(sText);
for (var i = 0, len = QRCodeLimitLength.length; i <= len; i++) {
var nLimit = 0;
switch (nCorrectLevel) {
case QRErrorCorrectLevel.L:
nLimit = QRCodeLimitLength[i][0];
break;
case QRErrorCorrectLevel.M:
nLimit = QRCodeLimitLength[i][1];
break;
case QRErrorCorrectLevel.Q:
nLimit = QRCodeLimitLength[i][2];
break;
case QRErrorCorrectLevel.H:
nLimit = QRCodeLimitLength[i][3];
break;
}
if (length <= nLimit) {
break;
} else {
nType++;
}
}
if (nType > QRCodeLimitLength.length) {
throw new Error("Too long data");
}
return nType;
}
function _getUTF8Length(sText) {
var replacedText = encodeURI(sText).toString().replace(/\%[0-9a-fA-F]{2}/g, 'a');
return replacedText.length + (replacedText.length != sText ? 3 : 0);
}
。。。更多内容
QRCode.CorrectLevel = QRErrorCorrectLevel;
})();
module.exports = QRCode引用
在使用的地方使用：
html:
html部分包含一个一张图片和刷新按钮，还是一张canvas画布，图片用来展示，画布用来画二维码。
<template>
<view class="content">
<view class="cont-img">
<img :src="popupURL" alt="" class="popupURL-box" />
<view class="cont-refresh" @click="creadCode()">
刷新
<u-icon name="reload"></u-icon>
</view>
</view>
<!--创建一个画布，将它移出屏幕外看不到的地方-->
<canvas
class="canvas-code"
canvas-id="myQrcode"
style="left: -800px; position: absolute"
/>
</view>
</template>js部分
js部分的上面包含了qrcode的引入，底下是定义一个地址变量，在onshow里面每次加载的时候调用，保证了二维码能够展示出来，mounted里面不好，只是页面第一次进入加载，容易丢失。底下是调用的方法，text字段是你二维码需要跳转的地址。
<script>
import QRCode from './../../../common/weapp-qrcode.js'
export default {
data() {
return {
popupURL: '',
}
},
onShow() {
// this.getReceivedOrder()
this.creadCode()
},
mounted() {
// this.creadCode()
},
methods: {
creadCode() {
new QRCode('myQrcode', {
text:
'http://www.xxx.com/electronicReceipt/#/?id=' +
uni.getStorageSync('userAccount'),
width: 120, //canvas 画布的宽
height: 120, //canvas 画布的高
padding: 8, // 生成二维码四周自动留边宽度，不传入默认为0
correctLevel: QRCode.CorrectLevel.L, // 二维码可辨识度
callback: (res) => {
//工具回调数据
// 接下来就可以直接调用微信小程序的api保存到本地或者将这张二维码直接画在海报上面去，看各自需求
this.popupURL = res.path
},
})
},
},
}
</script>
css部分：
css部分主要是因为要居中，使用了flex布局来调整位置。
<style lang="scss" scoped>
.content {
min-height: 1100rpx;
background-color: #eeeeef;
padding: 200rpx 20rpx;
.cont-img {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
width: 100%;
.popupURL-box {
width: 400rpx;
height: 380rpx;
}
.cont-refresh {
padding: 10px 0;
}
}
}
</style>添加路由
这部分代码主要是页面的路由的引用，当然在tabbar的上面还要有pages数组里面也要引入页面，这部分是你页面能够出来的根本原因。我的项目的页面是由四部分组成，第三部分我的提单是一个二维码。
{
...//这部分代码主要是页面的路由的引用。
"tabBar": {
"color": "#909399",
"selectedColor": "#303133",
"borderStyle": "black",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/tabbar/receivedispatchlist/receivedispatchlist",
"iconPath": "static/subscribe.png",
"selectedIconPath": "static/subscribe-selected.png",
"text": "收货派车单"
},
{
"pagePath": "pages/tabbar/dispatchlist/dispatchlist",
"iconPath": "static/subscribe.png",
"selectedIconPath": "static/subscribe-selected.png",
"text": "发货派车单"
},
{
"pagePath": "pages/tabbar/bill/index",
"iconPath": "static/bill.png",
"selectedIconPath": "static/bill-selected.png",
"text": "我的提单"
},
{
"pagePath": "pages/tabbar/my/my",
"iconPath": "static/my.png",
"selectedIconPath": "static/my-selected.png",
"text": "我的"
}
]
}
}效果
这是最终的展示效果，是在微信开发者工具上看到的实际的页面。
以上就是小程序生成二维码的使用的流程了方法，希望对大家学习和使用有用。