From 3bd962a6d7f61239c020e2dbbeb7341e5b842dd1 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 21 四月 2026 11:46:41 +0800
Subject: [PATCH] 推送
---
node_modules/uview-plus/components/u-qrcode/u-qrcode.vue | 265 +++++++++++++++++++++++++++++++++++-----------------
1 files changed, 179 insertions(+), 86 deletions(-)
diff --git a/node_modules/uview-plus/components/u-qrcode/u-qrcode.vue b/node_modules/uview-plus/components/u-qrcode/u-qrcode.vue
index 4b95df2..1196d4a 100644
--- a/node_modules/uview-plus/components/u-qrcode/u-qrcode.vue
+++ b/node_modules/uview-plus/components/u-qrcode/u-qrcode.vue
@@ -7,8 +7,7 @@
}"
@longpress="longpress">
<view class="u-qrcode__content" @click="preview">
-
- <!-- #ifndef APP-NVUE || APP-PLUS -->
+ <!-- #ifdef MP || H5 -->
<canvas
class="u-qrcode__canvas"
:id="cid"
@@ -25,17 +24,12 @@
:style="{ width: sizeLocal + unit, height: sizeLocal + unit }" />
<!-- #endif -->
- <!-- #ifdef APP-PLUS -->
- <canvas
- class="u-qrcode__canvas"
- :id="cid"
- :canvas-id="cid"
- :style="{ width: sizeLocal + unit, height: sizeLocal + unit }" />
- <!-- #endif -->
-
<!-- #ifdef APP-NVUE -->
- <gcanvas class="u-qrcode__canvas" ref="gcanvess"
- :style="{ width: sizeLocal + unit, height: sizeLocal + unit }">
+ <web-view v-if="icon != ''" ref="web" src="/static/app-plus/up-canvas/local.html"
+ :style="'width:' + sizeLocal + 'px;height:' + sizeLocal + 'px'"
+ @onPostMessage="_onMessage" />
+ <gcanvas v-else class="u-qrcode__canvas" ref="gcanvess"
+ :style="{ width: sizeLocal + unit, height: sizeLocal + unit }">
</gcanvas>
<!-- #endif -->
<view v-if="showLoading && loading" class="u-qrcode__loading"
@@ -49,20 +43,27 @@
<script>
import QRCode from "./qrcode.js"
+import { sleep } from '../../libs/function/index';
// #ifdef APP-NVUE
// https://github.com/dcloudio/NvueCanvasDemo/blob/master/README.md
import {
enable,
- WeexBridge
+ WeexBridge,
+ Image as GImage
} from '../../libs/util/gcanvas/index.js';
+import { nextTick } from "vue";
// #endif
let qrcode
+// 20260201涓嶈兘鍦╠ata涓瓨鍌╟anvas锛屽惁鍒欎細瀵艰嚧鍦ㄥ井淇″皬绋嬪簭getContext鑾峰彇涓嶅埌canvas瀵硅薄鎶ラ敊Cannot read property 'type'
+let canvas = null
export default {
name: "u-qrcode",
props: {
cid: {
type: String,
- default: () => `u-qrcode-canvas${Math.floor(Math.random() * 1000000)}`
+ default: () => {
+ return `u-qrcode-canvas${Math.floor(Math.random() * 1000000)}`
+ }
},
size: {
type: Number,
@@ -134,7 +135,7 @@
default: () => false
},
},
- emits: ['result', 'longpressCallback'],
+ emits: ['preview', 'result', 'longpressCallback'],
data() {
return {
loading: false,
@@ -147,11 +148,10 @@
],
rootId: `rootId${Number(Math.random() * 100).toFixed(0)}`,
ganvas: null,
- context: '',
canvasObj: {},
sizeLocal: this.size,
- ctx: null, // ctx 鍦╪ew Qrcode 鏃秊s鏂囦欢鍐呴儴璁剧疆
- canvas: null, // ctx 鍦╪ew Qrcode 鏃秊s鏂囦欢鍐呴儴璁剧疆
+ ctx: null,
+ _ready: false
}
},
async mounted(){
@@ -159,17 +159,18 @@
if(this.useRootHeightAndWidth){
await this.setNewSize()
}
+ canvas = await this.getCanvasNode(this.cid)
- // #ifdef APP-NVUE
- /*鑾峰彇鍏冪礌寮曠敤*/
- this.ganvas = this.$refs["gcanvess"]
- /*閫氳繃鍏冪礌寮曠敤鑾峰彇canvas瀵硅薄*/
- this.canvasObj = enable(this.ganvas, {
- bridge: WeexBridge
- })
- /*鑾峰彇缁樺浘鎵�闇�鐨勪笂涓嬫枃锛岀洰鍓嶄笉鏀寔3d*/
- this.context = this.canvasObj.getContext('2d')
- // #endif
+ if (!canvas) return
+ // #ifdef MP
+ // 涓嶆竻妤氭槸灏忕▼搴忕殑bug杩樻槸浠�涔堝師鍥狅紝canvas鐨刵ode鑺傜偣瀹介珮鍜岃缃殑瀹介珮涓嶄竴鑷� 閲嶆柊璁剧疆涓�
+ canvas.width = this.sizeLocal
+ canvas.height = this.sizeLocal
+ // #endif
+ // #ifdef APP-PLUS-NVUE
+ this.isNvue = true
+ // #endif
+ this.ctx = this.getUPCanvasContext('2d')
if (this.loadMake) {
if (!this._empty(this.val)) {
@@ -182,31 +183,52 @@
}
},
methods: {
+ _onMessage(e) {
+ // console.log('post message', e)
+ const message = e.detail.data[0]
+ switch (message.action) {
+ // web-view 鍒濆鍖栧畬姣�
+ case 'onJSBridgeReady':
+ this._ready = true
+ this.$refs.web.evalJs('setContent('+JSON.stringify(this.$props) +')')
+ break
+ // qrcodeOk
+ case 'qrcodeOk':
+ this._result(message.imageData)
+ // this.$emit('load')
+ break
+ }
+ },
_makeCode() {
let that = this
+ if (!canvas) return
if (!this._empty(this.val)) {
// #ifndef APP-NVUE
this.loading = true
- // #endif
- qrcode = new QRCode({
- context: that, // 涓婁笅鏂囩幆澧�
- canvasId: that.cid, // canvas-id
- nvueContext: that.context,
- usingComponents: that.usingComponents, // 鏄惁鏄嚜瀹氫箟缁勪欢
- showLoading: false, // 鏄惁鏄剧ずloading
- loadingText: that.loadingText, // loading鏂囧瓧
- text: that.val, // 鐢熸垚鍐呭
- size: that.sizeLocal, // 浜岀淮鐮佸ぇ灏�
- background: that.background, // 鑳屾櫙鑹�
- foreground: that.foreground, // 鍓嶆櫙鑹�
- pdground: that.pdground, // 瀹氫綅瑙掔偣棰滆壊
- correctLevel: that.lv, // 瀹归敊绾у埆
- image: that.icon, // 浜岀淮鐮佸浘鏍�
- imageSize: that.iconSize,// 浜岀淮鐮佸浘鏍囧ぇ灏�
- cbResult: function (res) { // 鐢熸垚浜岀淮鐮佺殑鍥炶皟
- that._result(res)
- },
- });
+ // #endif
+ // nvue涓嬫椂鍥犱负gcanvas鐨凣Image涓嶇敓鏁堬紝鍥犳icon妯″紡浼氶噰鐢╳ebview
+ if ((this.icon == '' && that.isNvue) || !that.isNvue) {
+ qrcode = new QRCode({
+ vuectx: that, // 涓婁笅鏂囩幆澧�
+ canvasId: that.cid, // canvas-id
+ ctx: that.ctx,
+ isNvue: that.isNvue,
+ usingComponents: that.usingComponents, // 鏄惁鏄嚜瀹氫箟缁勪欢
+ showLoading: false, // 鏄惁鏄剧ずloading
+ loadingText: that.loadingText, // loading鏂囧瓧
+ text: that.val, // 鐢熸垚鍐呭
+ size: that.sizeLocal, // 浜岀淮鐮佸ぇ灏�
+ background: that.background, // 鑳屾櫙鑹�
+ foreground: that.foreground, // 鍓嶆櫙鑹�
+ pdground: that.pdground, // 瀹氫綅瑙掔偣棰滆壊
+ correctLevel: that.lv, // 瀹归敊绾у埆
+ image: that.icon, // 浜岀淮鐮佸浘鏍�
+ imageSize: that.iconSize,// 浜岀淮鐮佸浘鏍囧ぇ灏�
+ cbResult: function (res) { // 鐢熸垚浜岀淮鐮佺殑鍥炶皟
+ that._result(res)
+ },
+ });
+ }
} else {
uni.showToast({
title: '浜岀淮鐮佸唴瀹逛笉鑳戒负绌�',
@@ -232,7 +254,25 @@
});
}
});
- }
+ } else {
+ this.toTempFilePath({
+ success: res => {
+ that.result = res.tempFilePath
+ uni.saveImageToPhotosAlbum({
+ filePath: that.result,
+ success: function () {
+ uni.showToast({
+ title: '浜岀淮鐮佷繚瀛樻垚鍔�',
+ icon: 'success',
+ duration: 2000
+ });
+ }
+ });
+ },
+ fail: err => {
+ }
+ })
+ }
},
preview(e) {
// 棰勮鍥剧墖
@@ -261,7 +301,7 @@
}, e)
},
async toTempFilePath({success, fail}) {
- if (this.context) {
+ if (this.ct) {
this.ctx.toTempFilePath(
0,
0,
@@ -277,29 +317,16 @@
);
}
else {
- // #ifdef MP-TOUTIAO || H5
+ // #ifdef H5
success({
tempFilePath: this.ctx.canvas.toDataURL("image/png", 1)
})
// #endif
- // #ifdef APP-PLUS
+ // #ifndef H5
uni.canvasToTempFilePath(
{
canvasId: this.cid,
- success :res => {
- success(res)
- },
- fail: fail
- },
- this)
- // #endif
-
- // #ifndef MP-TOUTIAO || H5 || APP-PLUS
- const canvas = await this.getNode(this.cid,true);
- uni.canvasToTempFilePath(
- {
- canvas,
success :res => {
success(res)
},
@@ -324,7 +351,7 @@
* @return {Promise<void>}
*/
async setNewSize(){
- const rootNode = await this.getNode(this.rootId,false);
+ const rootNode = await this.getCanvasNode(this.rootId, false);
const { width , height } = rootNode;
// 灏嗘渶鐭殑璁剧疆涓轰簩缁寸爜 鐨剆ize
if(width > height){
@@ -341,27 +368,93 @@
* @param isCanvas 鏄惁涓篊anvas鑺傜偣
* @return {Promise<unknown>}
*/
- async getNode(id,isCanvas){
- return new Promise((resolve, reject)=>{
- try {
- const query = uni.createSelectorQuery().in(this);
- query.select(`#${id}`)
- .fields({ node: true, size: true })
- .exec((res) => {
- if(isCanvas){
- resolve(res[0].node)
- }
- else{
- resolve(res[0])
- }
-
- })
- }
- catch (e) {
- console.error("鑾峰彇鑺傜偣澶辫触",e)
- }
- })
+ async getCanvasNode(id, isCanvas = true) {
+ let that = this
+ return new Promise((resolve, reject) => {
+ try {
+ // #ifdef APP-NVUE
+ setTimeout(() => {
+ /*鑾峰彇鍏冪礌寮曠敤*/
+ this.ganvas = this.$refs["gcanvess"]
+ /*閫氳繃鍏冪礌寮曠敤鑾峰彇canvas瀵硅薄*/
+ let canvasNode = enable(this.ganvas, {
+ bridge: WeexBridge
+ })
+ resolve(canvasNode)
+ }, 200)
+ // #endif
+ // #ifndef APP-PLUS-NVUE
+ const query = uni.createSelectorQuery().in(that).select(`#${id}`);
+ query.fields({
+ node: true,
+ size: true
+ })
+ .exec((res) => {
+ if (isCanvas) {
+ if (res[0]?.node) {
+ resolve(res[0].node)
+ } else {
+ resolve(false)
+ console.error("鑾峰彇鑺傜偣鍑洪敊", res)
+ }
+ } else {
+ resolve(res[0])
+ }
+ })
+ // #endif
+ } catch (e) {
+ console.error("鑾峰彇鑺傜偣澶辫触", e)
+ }
+ })
},
+ getUPCanvasContext() {
+ // #ifdef APP-PLUS
+ return uni.createCanvasContext(this.cid, this);
+ // #endif
+ // #ifdef APP-PLUS-NVUE || MP || H5
+ return canvas.getContext('2d');
+ // #endif
+ },
+ drawImage(url, x, y, w, h) {
+ try {
+ let img = {}
+ // #ifdef APP-NVUE
+ img = new GImage();
+ // #endif
+
+ // #ifdef H5
+ // APP涓嬩笉鏀寔浼氫竴鐩村崱浣�
+ img = new Image();
+ // #endif
+
+ // #ifdef MP
+ // 灏忕▼搴�2d
+ // https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.createImage.html
+ img = canvas.createImage();
+ // #endif
+ // #ifdef APP-NVUE
+ let that = this
+ // console.log(img)
+ img.onload = function(){
+ if (process.env.NODE_ENV === 'development') {
+ console.log('drawImage缁樺埗2...')
+ }
+ that.cxt.drawImage(img, x, y, w, h);
+ }
+ // #endif
+ // #ifdef H5 || MP
+ img.onload = () => {
+ this.ctx.drawImage(img, x, y, w, h);
+ };
+ // #endif
+ img.src = url;
+ // #ifdef APP-VUE
+ this.ctx.drawImage(url, x, y, w, h);
+ // #endif
+ } catch (error) {
+ console.log('drawImage缁樺埗鍑洪敊', error)
+ }
+ },
selectClick(index) {
switch (index) {
--
Gitblit v1.9.3