uview-plus 3.4.39 → 3.4.40
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/changelog.md +3 -0
- package/components/u-qrcode/qrcode.js +119 -57
- package/components/u-qrcode/u-qrcode.vue +13 -9
- package/package.json +1 -1
package/changelog.md
CHANGED
|
@@ -1036,7 +1036,11 @@ let QRCode = {};
|
|
|
1036
1036
|
usingComponents: opt.usingComponents,
|
|
1037
1037
|
showLoading: opt.showLoading,
|
|
1038
1038
|
loadingText: opt.loadingText,
|
|
1039
|
+
that: opt.that
|
|
1039
1040
|
};
|
|
1041
|
+
|
|
1042
|
+
let canvas = null;
|
|
1043
|
+
|
|
1040
1044
|
if (typeof opt === 'string') { // 只编码ASCII字符串
|
|
1041
1045
|
opt = {
|
|
1042
1046
|
text: opt
|
|
@@ -1083,8 +1087,25 @@ let QRCode = {};
|
|
|
1083
1087
|
}
|
|
1084
1088
|
return options.foreground;
|
|
1085
1089
|
}
|
|
1090
|
+
|
|
1091
|
+
let getCanvas = async (id) => {
|
|
1092
|
+
return new Promise((resolve, reject)=>{
|
|
1093
|
+
try {
|
|
1094
|
+
const query = uni.createSelectorQuery().in(this.options.that);
|
|
1095
|
+
query.select(`#${id}`)
|
|
1096
|
+
.fields({ node: true, size: true })
|
|
1097
|
+
.exec((res) => {
|
|
1098
|
+
resolve(res[0].node)
|
|
1099
|
+
})
|
|
1100
|
+
}
|
|
1101
|
+
catch (e) {
|
|
1102
|
+
console.error("createCanvasContextFail",e)
|
|
1103
|
+
}
|
|
1104
|
+
|
|
1105
|
+
})
|
|
1106
|
+
}
|
|
1086
1107
|
// 创建canvas
|
|
1087
|
-
let createCanvas = function (options) {
|
|
1108
|
+
let createCanvas = async function (options) {
|
|
1088
1109
|
if(options.showLoading){
|
|
1089
1110
|
uni.showLoading({
|
|
1090
1111
|
title: options.loadingText,
|
|
@@ -1094,8 +1115,17 @@ let QRCode = {};
|
|
|
1094
1115
|
var ctx = '';
|
|
1095
1116
|
if (options.nvueContext) {
|
|
1096
1117
|
ctx = options.nvueContext;
|
|
1097
|
-
}
|
|
1098
|
-
|
|
1118
|
+
}
|
|
1119
|
+
else {
|
|
1120
|
+
// 获取canvas node节点
|
|
1121
|
+
canvas = await getCanvas(options.canvasId);
|
|
1122
|
+
// #ifdef MP
|
|
1123
|
+
// 不清楚是小程序的bug还是什么原因，canvas的node节点宽高和设置的宽高不一致 重新设置下
|
|
1124
|
+
canvas.width = options.size;
|
|
1125
|
+
canvas.height = options.size;
|
|
1126
|
+
// #endif
|
|
1127
|
+
|
|
1128
|
+
ctx = canvas.getContext('2d');
|
|
1099
1129
|
}
|
|
1100
1130
|
var count = qrCodeAlg.getModuleCount();
|
|
1101
1131
|
var ratioSize = options.size;
|
|
@@ -1107,14 +1137,18 @@ let QRCode = {};
|
|
|
1107
1137
|
for (var row = 0; row < count; row++) {
|
|
1108
1138
|
for (var col = 0; col < count; col++) {
|
|
1109
1139
|
var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
|
|
1110
|
-
var h = (Math.ceil((row + 1) *
|
|
1140
|
+
var h = (Math.ceil((row + 1) * tileH) - Math.floor(row * tileH));
|
|
1111
1141
|
var foreground = getForeGround({
|
|
1112
1142
|
row: row,
|
|
1113
1143
|
col: col,
|
|
1114
1144
|
count: count,
|
|
1115
1145
|
options: options
|
|
1116
1146
|
});
|
|
1117
|
-
|
|
1147
|
+
if (options.nvueContext) {
|
|
1148
|
+
ctx.setFillStyle(qrCodeAlg.modules[row][col] ? foreground : options.background);
|
|
1149
|
+
} else {
|
|
1150
|
+
ctx.fillStyle = qrCodeAlg.modules[row][col] ? foreground : options.background;
|
|
1151
|
+
}
|
|
1118
1152
|
ctx.fillRect(Math.round(col * tileW), Math.round(row * tileH), w, h);
|
|
1119
1153
|
}
|
|
1120
1154
|
}
|
|
@@ -1122,12 +1156,33 @@ let QRCode = {};
|
|
|
1122
1156
|
var x = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
|
|
1123
1157
|
var y = Number(((ratioSize - ratioImgSize) / 2).toFixed(2));
|
|
1124
1158
|
drawRoundedRect(ctx, x, y, ratioImgSize, ratioImgSize, 2, 6, true, true)
|
|
1125
|
-
|
|
1159
|
+
if (options.nvueContext) {
|
|
1160
|
+
ctx.drawImage(options.image, x, y, ratioImgSize, ratioImgSize);
|
|
1161
|
+
}
|
|
1162
|
+
else {
|
|
1163
|
+
// #ifdef H5
|
|
1164
|
+
const img = new Image();
|
|
1165
|
+
// #endif
|
|
1166
|
+
// #ifndef H5
|
|
1167
|
+
const img = canvas.createImage();
|
|
1168
|
+
// #endif
|
|
1169
|
+
img.onload = () => {
|
|
1170
|
+
ctx.drawImage(img, x, y, ratioImgSize, ratioImgSize);
|
|
1171
|
+
};
|
|
1172
|
+
img.src = options.image;
|
|
1173
|
+
}
|
|
1126
1174
|
// 画圆角矩形
|
|
1127
1175
|
function drawRoundedRect(ctxi, x, y, width, height, r, lineWidth, fill, stroke) {
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1176
|
+
if (options.nvueContext) {
|
|
1177
|
+
ctxi.setLineWidth(lineWidth);
|
|
1178
|
+
ctxi.setFillStyle(options.background);
|
|
1179
|
+
ctxi.setStrokeStyle(options.background);
|
|
1180
|
+
}
|
|
1181
|
+
else {
|
|
1182
|
+
ctxi.lineWidth = lineWidth;
|
|
1183
|
+
ctxi.fillStyle = options.background;
|
|
1184
|
+
ctxi.strokeStyle = options.background;
|
|
1185
|
+
}
|
|
1131
1186
|
ctxi.beginPath(); // draw top and top right corner
|
|
1132
1187
|
ctxi.moveTo(x + r, y);
|
|
1133
1188
|
ctxi.lineTo(x + width, y); // move to top-right corner
|
|
@@ -1152,57 +1207,64 @@ let QRCode = {};
|
|
|
1152
1207
|
}
|
|
1153
1208
|
}
|
|
1154
1209
|
setTimeout(() => {
|
|
1155
|
-
|
|
1156
|
-
|
|
1157
|
-
|
|
1158
|
-
|
|
1159
|
-
|
|
1160
|
-
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
1164
|
-
|
|
1165
|
-
|
|
1166
|
-
|
|
1167
|
-
|
|
1168
|
-
|
|
1169
|
-
|
|
1170
|
-
|
|
1171
|
-
|
|
1172
|
-
}
|
|
1173
|
-
);
|
|
1174
|
-
} else {
|
|
1175
|
-
uni.canvasToTempFilePath({
|
|
1176
|
-
width: options.width,
|
|
1177
|
-
height: options.height,
|
|
1178
|
-
destWidth: options.width,
|
|
1179
|
-
destHeight: options.height,
|
|
1180
|
-
canvasId: options.canvasId,
|
|
1181
|
-
quality: Number(1),
|
|
1182
|
-
success: function (res) {
|
|
1183
|
-
if (options.cbResult) {
|
|
1184
|
-
// 由于官方还没有统一此接口的输出字段，所以先判定下 支付宝为 res.apFilePath
|
|
1185
|
-
if (!empty(res.tempFilePath)) {
|
|
1186
|
-
options.cbResult(res.tempFilePath)
|
|
1187
|
-
} else if (!empty(res.apFilePath)) {
|
|
1188
|
-
options.cbResult(res.apFilePath)
|
|
1189
|
-
} else {
|
|
1210
|
+
// canvas2 绘制是自动的不需要手动绘制
|
|
1211
|
+
if(options.nvueContext){
|
|
1212
|
+
ctx.draw(true, () => {
|
|
1213
|
+
// 保存到临时区域
|
|
1214
|
+
setTimeout(() => {
|
|
1215
|
+
if (options.nvueContext) {
|
|
1216
|
+
ctx.toTempFilePath(
|
|
1217
|
+
0,
|
|
1218
|
+
0,
|
|
1219
|
+
options.width,
|
|
1220
|
+
options.height,
|
|
1221
|
+
options.width,
|
|
1222
|
+
options.height,
|
|
1223
|
+
"",
|
|
1224
|
+
1,
|
|
1225
|
+
function(res) {
|
|
1226
|
+
if (options.cbResult) {
|
|
1190
1227
|
options.cbResult(res.tempFilePath)
|
|
1191
1228
|
}
|
|
1192
1229
|
}
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1230
|
+
);
|
|
1231
|
+
} else {
|
|
1232
|
+
uni.canvasToTempFilePath({
|
|
1233
|
+
width: options.width,
|
|
1234
|
+
height: options.height,
|
|
1235
|
+
destWidth: options.width,
|
|
1236
|
+
destHeight: options.height,
|
|
1237
|
+
canvasId: options.canvasId,
|
|
1238
|
+
quality: Number(1),
|
|
1239
|
+
success: function (res) {
|
|
1240
|
+
if (options.cbResult) {
|
|
1241
|
+
// 由于官方还没有统一此接口的输出字段，所以先判定下 支付宝为 res.apFilePath
|
|
1242
|
+
if (!empty(res.tempFilePath)) {
|
|
1243
|
+
options.cbResult(res.tempFilePath)
|
|
1244
|
+
} else if (!empty(res.apFilePath)) {
|
|
1245
|
+
options.cbResult(res.apFilePath)
|
|
1246
|
+
} else {
|
|
1247
|
+
options.cbResult(res.tempFilePath)
|
|
1248
|
+
}
|
|
1249
|
+
}
|
|
1250
|
+
},
|
|
1251
|
+
fail: function (res) {
|
|
1252
|
+
if (options.cbResult) {
|
|
1253
|
+
options.cbResult(res)
|
|
1254
|
+
}
|
|
1255
|
+
},
|
|
1256
|
+
complete: function () {
|
|
1257
|
+
uni.hideLoading();
|
|
1258
|
+
},
|
|
1259
|
+
}, options.context);
|
|
1260
|
+
}
|
|
1261
|
+
}, options.text.length + 100);
|
|
1262
|
+
});
|
|
1263
|
+
}
|
|
1264
|
+
else{
|
|
1265
|
+
options.cbResult("")
|
|
1266
|
+
}
|
|
1267
|
+
|
|
1206
1268
|
}, options.usingComponents ? 0 : 150);
|
|
1207
1269
|
}
|
|
1208
1270
|
createCanvas(this.options);
|
|
@@ -2,8 +2,12 @@
|
|
|
2
2
|
<view class="u-qrcode" @longpress="longpress">
|
|
3
3
|
<view class="u-qrcode__content" @click="preview">
|
|
4
4
|
<!-- #ifndef APP-NVUE -->
|
|
5
|
-
<canvas
|
|
6
|
-
|
|
5
|
+
<canvas
|
|
6
|
+
class="u-qrcode__canvas"
|
|
7
|
+
:id="cid"
|
|
8
|
+
:canvas-id="cid"
|
|
9
|
+
type="2d"
|
|
10
|
+
:style="{ width: size + unit, height: size + unit }" />
|
|
7
11
|
<!-- #endif -->
|
|
8
12
|
<!-- #ifdef APP-NVUE -->
|
|
9
13
|
<gcanvas class="u-qrcode__canvas" ref="gcanvess"
|
|
@@ -14,11 +18,8 @@
|
|
|
14
18
|
:style="{ width: size + unit, height: size + unit }">
|
|
15
19
|
<up-loading-icon vertical :text="loadingText" textSize="14px"></up-loading-icon>
|
|
16
20
|
</view>
|
|
17
|
-
<!-- <image v-show="show" :src="result" :style="{ width: size + unit, height: size + unit }" /> -->
|
|
18
21
|
</view>
|
|
19
|
-
|
|
20
|
-
v-model:show="popupShow" @select="selectClick">
|
|
21
|
-
</up-action-sheet> -->
|
|
22
|
+
|
|
22
23
|
</view>
|
|
23
24
|
</template>
|
|
24
25
|
|
|
@@ -120,7 +121,7 @@ export default {
|
|
|
120
121
|
canvasObj: {}
|
|
121
122
|
}
|
|
122
123
|
},
|
|
123
|
-
|
|
124
|
+
mounted(){
|
|
124
125
|
// #ifdef APP-NVUE
|
|
125
126
|
/*获取元素引用*/
|
|
126
127
|
this.ganvas = this.$refs["gcanvess"]
|
|
@@ -135,7 +136,9 @@ export default {
|
|
|
135
136
|
if (this.loadMake) {
|
|
136
137
|
if (!this._empty(this.val)) {
|
|
137
138
|
setTimeout(() => {
|
|
138
|
-
|
|
139
|
+
setTimeout(()=>{
|
|
140
|
+
this._makeCode()
|
|
141
|
+
})
|
|
139
142
|
}, 0);
|
|
140
143
|
}
|
|
141
144
|
}
|
|
@@ -162,6 +165,7 @@ export default {
|
|
|
162
165
|
correctLevel: that.lv, // 容错级别
|
|
163
166
|
image: that.icon, // 二维码图标
|
|
164
167
|
imageSize: that.iconSize,// 二维码图标大小
|
|
168
|
+
that,
|
|
165
169
|
cbResult: function (res) { // 生成二维码的回调
|
|
166
170
|
that._result(res)
|
|
167
171
|
},
|
|
@@ -250,7 +254,7 @@ export default {
|
|
|
250
254
|
rt = false
|
|
251
255
|
}
|
|
252
256
|
return rt
|
|
253
|
-
}
|
|
257
|
+
},
|
|
254
258
|
},
|
|
255
259
|
watch: {
|
|
256
260
|
size: function (n, o) {
|
package/package.json
CHANGED