uview-plus 3.3.30 → 3.3.31

package/changelog.md

@@ -1,5 +1,10 @@
+## 3.3.31（2024-08-31）
+feat: qrcode初步支持nvue
+
+
 ## 3.3.30（2024-08-30）
 fix: slider兼容step为字符串类型
+
 ## 3.3.29（2024-08-30）
 fix: 修复tabs组件current参数为字符串处理逻辑
 

package/components/u-qrcode/qrcode.js

@@ -1031,6 +1031,7 @@ let QRCode = {};
             image: '',
             imageSize: 30,
             canvasId: opt.canvasId,
+            nvueContext: opt.nvueContext,
             context: opt.context,
             usingComponents: opt.usingComponents,
             showLoading: opt.showLoading,
@@ -1090,7 +1091,12 @@ let QRCode = {};
                     mask: true
                 });
             }
-            var ctx = uni.createCanvasContext(options.canvasId, options.context);
+            var ctx = '';
+            if (options.nvueContext) {
+                ctx = options.nvueContext;
+            } else {
+                ctx = uni.createCanvasContext(options.canvasId, options.context);
+            }
             var count = qrCodeAlg.getModuleCount();
             var ratioSize = options.size;
             var ratioImgSize = options.imageSize;
@@ -1141,34 +1147,52 @@ let QRCode = {};
                 ctx.draw(true, () => {
                     // 保存到临时区域
                     setTimeout(() => {
-                        uni.canvasToTempFilePath({
-                            width: options.width,
-                            height: options.height,
-                            destWidth: options.width,
-                            destHeight: options.height,
-                            canvasId: options.canvasId,
-                            quality: Number(1),
-                            success: function (res) {
-                                if (options.cbResult) {
-                                    // 由于官方还没有统一此接口的输出字段，所以先判定下  支付宝为 res.apFilePath
-                                    if (!empty(res.tempFilePath)) {
-                                        options.cbResult(res.tempFilePath)
-                                    } else if (!empty(res.apFilePath)) {
-                                        options.cbResult(res.apFilePath)
-                                    } else {
+                        if (options.nvueContext) {
+                            ctx.toTempFilePath(
+                                0,
+                                0,
+                                options.width,
+                                options.height,
+                                options.width,
+                                options.height,
+                                "",
+                                1,
+                                function(res) {
+                                    if (options.cbResult) {
                                         options.cbResult(res.tempFilePath)
                                     }
                                 }
-                            },
-                            fail: function (res) {
-                                if (options.cbResult) {
-                                    options.cbResult(res)
-                                }
-                            },
-                            complete: function () {
-                                uni.hideLoading();
-                            },
-                        }, options.context);
+                            );
+                        } else {
+                            uni.canvasToTempFilePath({
+                                width: options.width,
+                                height: options.height,
+                                destWidth: options.width,
+                                destHeight: options.height,
+                                canvasId: options.canvasId,
+                                quality: Number(1),
+                                success: function (res) {
+                                    if (options.cbResult) {
+                                        // 由于官方还没有统一此接口的输出字段，所以先判定下  支付宝为 res.apFilePath
+                                        if (!empty(res.tempFilePath)) {
+                                            options.cbResult(res.tempFilePath)
+                                        } else if (!empty(res.apFilePath)) {
+                                            options.cbResult(res.apFilePath)
+                                        } else {
+                                            options.cbResult(res.tempFilePath)
+                                        }
+                                    }
+                                },
+                                fail: function (res) {
+                                    if (options.cbResult) {
+                                        options.cbResult(res)
+                                    }
+                                },
+                                complete: function () {
+                                    uni.hideLoading();
+                                },
+                            }, options.context);
+                        }
                     }, options.text.length + 100);
                 });
             }, options.usingComponents ? 0 : 150);
@@ -1193,7 +1217,12 @@ let QRCode = {};
         }
     };
     QRCode.prototype.clear = function (fn) {
-        var ctx = uni.createCanvasContext(this.options.canvasId, this.options.context)
+        var ctx = '';
+        if (options.nvueContext) {
+            ctx = options.nvueContext;
+        } else {
+            uni.createCanvasContext(this.options.canvasId, this.options.context)
+        }
         ctx.clearRect(0, 0, this.options.size, this.options.size)
         ctx.draw(false, () => {
             if (fn) {

package/components/u-qrcode/u-qrcode.vue

@@ -1,8 +1,15 @@
 <template>
 	<view class="u-qrcode" @longpress="longpress">
 		<view class="u-qrcode__content" @click="preview">
+			<!-- #ifndef APP-NVUE -->
 			<canvas class="u-qrcode__canvas"
 				:id="cid" :canvas-id="cid" :style="{ width: size + unit, height: size + unit }" />
+			<!-- #endif -->
+			<!-- #ifdef APP-NVUE -->
+			<gcanvas class="u-qrcode__canvas" ref="gcanvess"
+				:style="{ width: size + unit, height: size + unit }">
+			</gcanvas>
+			<!-- #endif -->
 			<view v-if="showLoading && loading" class="u-qrcode__loading"
 				:style="{ width: size + unit, height: size + unit }">
 				<up-loading-icon vertical :text="loadingText" textSize="14px"></up-loading-icon>
@@ -17,6 +24,13 @@
 
 <script>
 import QRCode from "./qrcode.js"
+// #ifdef APP-NVUE
+// https://github.com/dcloudio/NvueCanvasDemo/blob/master/README.md
+import {
+	enable,
+	WeexBridge
+} from '../../libs/util/gcanvas/index.js';
+// #endif
 let qrcode
 export default {
 	name: "u-qrcode",
@@ -96,17 +110,43 @@ export default {
 				{
 					name: '保存二维码',
 				}
-			]
+			],
+			ganvas: null,
+			context: '',
+			canvasObj: {}
+		}
+	},
+	mounted: function () {
+		// #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 (this.loadMake) {
+			if (!this._empty(this.val)) {
+				setTimeout(() => {
+					this._makeCode()
+				}, 0);
+			}
 		}
 	},
 	methods: {
 		_makeCode() {
 			let that = this
 			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文字
@@ -225,16 +265,7 @@ export default {
 		}
 	},
 	computed: {
-	},
-	mounted: function () {
-		if (this.loadMake) {
-			if (!this._empty(this.val)) {
-				setTimeout(() => {
-					this._makeCode()
-				}, 0);
-			}
-		}
-	},
+	}
 }
 </script>
 <style lang="scss" scoped>

package/libs/util/gcanvas/bridge/bridge-weex.js

@@ -0,0 +1,241 @@
+const isWeex = typeof WXEnvironment !== 'undefined';
+const isWeexIOS = isWeex && /ios/i.test(WXEnvironment.platform);
+const isWeexAndroid = isWeex && !isWeexIOS;
+
+import GLmethod from '../context-webgl/GLmethod';
+
+const GCanvasModule =
+    (typeof weex !== 'undefined' && weex.requireModule) ? (weex.requireModule('gcanvas')) :
+        (typeof __weex_require__ !== 'undefined') ? (__weex_require__('@weex-module/gcanvas')) : {};
+
+let isDebugging = false;
+
+let isComboDisabled = false;
+
+const logCommand = (function () {
+    const methodQuery = [];
+    Object.keys(GLmethod).forEach(key => {
+        methodQuery[GLmethod[key]] = key;
+    })
+    const queryMethod = (id) => {
+        return methodQuery[parseInt(id)] || 'NotFoundMethod';
+    }
+    const logCommand = (id, cmds) => {
+        const mId = cmds.split(',')[0];
+        const mName = queryMethod(mId);
+        console.log(`=== callNative - componentId:${id}; method: ${mName}; cmds: ${cmds}`);
+    }
+    return logCommand;
+})();
+
+function joinArray(arr, sep) {
+    let res = '';
+    for (let i = 0; i < arr.length; i++) {
+        if (i !== 0) {
+            res += sep;
+        }
+        res += arr[i];
+    }
+    return res;
+}
+
+const commandsCache = {}
+
+const GBridge = {
+
+    callEnable: (ref, configArray) => {
+
+        commandsCache[ref] = [];
+
+        return GCanvasModule.enable({
+            componentId: ref,
+            config: configArray
+        });
+    },
+
+    callEnableDebug: () => {
+        isDebugging = true;
+    },
+
+    callEnableDisableCombo: () => {
+        isComboDisabled = true;
+    },
+
+    callSetContextType: function (componentId, context_type) {
+        GCanvasModule.setContextType(context_type, componentId);
+    },
+
+    callReset: function(id){
+        GCanvasModule.resetComponent && canvasModule.resetComponent(componentId);
+    },
+
+    render: isWeexIOS ? function (componentId) {
+        return GCanvasModule.extendCallNative({
+            contextId: componentId,
+            type: 0x60000001
+        });
+    } : function (componentId) {
+        return callGCanvasLinkNative(componentId, 0x60000001, 'render');
+    },
+
+    render2d: isWeexIOS ? function (componentId, commands, callback) {
+
+        if (isDebugging) {
+            console.log('>>> >>> render2d ===');
+            console.log('>>> commands: ' + commands);
+        }
+		
+        GCanvasModule.render([commands, callback?true:false], componentId, callback);
+
+    } : function (componentId, commands,callback) {
+
+        if (isDebugging) {
+            console.log('>>> >>> render2d ===');
+            console.log('>>> commands: ' + commands);
+        }
+
+        callGCanvasLinkNative(componentId, 0x20000001, commands);
+		if(callback){
+		callback();
+		}
+    },
+
+    callExtendCallNative: isWeexIOS ? function (componentId, cmdArgs) {
+
+        throw 'should not be here anymore ' + cmdArgs;
+
+    } : function (componentId, cmdArgs) {
+
+        throw 'should not be here anymore ' + cmdArgs;
+
+    },
+
+
+    flushNative: isWeexIOS ? function (componentId) {
+
+        const cmdArgs = joinArray(commandsCache[componentId], ';');
+        commandsCache[componentId] = [];
+
+        if (isDebugging) {
+            console.log('>>> >>> flush native ===');
+            console.log('>>> commands: ' + cmdArgs);
+        }
+
+        const result = GCanvasModule.extendCallNative({
+            "contextId": componentId,
+            "type": 0x60000000,
+            "args": cmdArgs
+        });
+
+        const res = result && result.result;
+
+        if (isDebugging) {
+            console.log('>>> result: ' + res);
+        }
+
+        return res;
+
+    } : function (componentId) {
+
+        const cmdArgs = joinArray(commandsCache[componentId], ';');
+        commandsCache[componentId] = [];
+
+        if (isDebugging) {
+            console.log('>>> >>> flush native ===');
+            console.log('>>> commands: ' + cmdArgs);
+        }
+
+        const result = callGCanvasLinkNative(componentId, 0x60000000, cmdArgs);
+
+        if (isDebugging) {
+            console.log('>>> result: ' + result);
+        }
+
+        return result;
+    },
+
+    callNative: function (componentId, cmdArgs, cache) {
+
+        if (isDebugging) {
+            logCommand(componentId, cmdArgs);
+        }
+
+        commandsCache[componentId].push(cmdArgs);
+
+        if (!cache || isComboDisabled) {
+            return GBridge.flushNative(componentId);
+        } else {
+            return undefined;
+        }
+    },
+
+    texImage2D(componentId, ...args) {
+        if (isWeexIOS) {
+            if (args.length === 6) {
+                const [target, level, internalformat, format, type, image] = args;
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texImage2D + ',' + 6 + ',' + target + ',' + level + ',' + internalformat + ',' + format + ',' + type + ',' + image.src
+                )
+            } else if (args.length === 9) {
+                const [target, level, internalformat, width, height, border, format, type, image] = args;
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texImage2D + ',' + 9 + ',' + target + ',' + level + ',' + internalformat + ',' + width + ',' + height + ',' + border + ',' +
+                    + format + ',' + type + ',' + (image ? image.src : 0)
+                )
+            }
+        } else if (isWeexAndroid) {
+            if (args.length === 6) {
+                const [target, level, internalformat, format, type, image] = args;
+                GCanvasModule.texImage2D(componentId, target, level, internalformat, format, type, image.src);
+            } else if (args.length === 9) {
+                const [target, level, internalformat, width, height, border, format, type, image] = args;
+                GCanvasModule.texImage2D(componentId, target, level, internalformat, width, height, border, format, type, (image ? image.src : 0));
+            }
+        }
+    },
+
+    texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image) {
+        if (isWeexIOS) {
+            if (arguments.length === 8) {
+                GBridge.callNative(
+                    componentId,
+                    GLmethod.texSubImage2D + ',' + 6 + ',' + target + ',' + level + ',' + xoffset + ',' + yoffset, + ',' + format + ',' + type + ',' + image.src
+                )
+            }
+        } else if (isWeexAndroid) {
+            GCanvasModule.texSubImage2D(componentId, target, level, xoffset, yoffset, format, type, image.src);
+        }
+    },
+
+    bindImageTexture(componentId, src, imageId) {
+        GCanvasModule.bindImageTexture([src, imageId], componentId);
+    },
+
+    perloadImage([url, id], callback) {
+        GCanvasModule.preLoadImage([url, id], function (image) {
+            image.url = url;
+            image.id = id;
+            callback(image);
+        });
+    },
+	
+	measureText(text, fontStyle, componentId) {
+	    return GCanvasModule.measureText([text, fontStyle], componentId);
+	},
+	
+	getImageData (componentId, x, y, w, h, callback) {
+		GCanvasModule.getImageData([x, y,w,h],componentId,callback);
+	},
+	
+	putImageData (componentId, data, x, y, w, h, callback) {
+		GCanvasModule.putImageData([x, y,w,h,data],componentId,callback);
+	},
+	
+	toTempFilePath(componentId, x, y, width, height, destWidth, destHeight, fileType, quality, callback){ 
+		GCanvasModule.toTempFilePath([x, y, width,height, destWidth, destHeight, fileType, quality], componentId, callback);
+	}
+}
+
+export default GBridge;

package/libs/util/gcanvas/context-2d/FillStyleLinearGradient.js

@@ -0,0 +1,18 @@
+class FillStyleLinearGradient {
+
+    constructor(x0, y0, x1, y1) {
+        this._start_pos = { _x: x0, _y: y0 };
+        this._end_pos = { _x: x1, _y: y1 };
+        this._stop_count = 0;
+        this._stops = [0, 0, 0, 0, 0];
+    }
+
+    addColorStop = function (pos, color) {
+        if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
+            this._stops[this._stop_count] = { _pos: pos, _color: color };
+            this._stop_count++;
+        }
+    }
+}
+
+export default FillStyleLinearGradient;

package/libs/util/gcanvas/context-2d/FillStylePattern.js

@@ -0,0 +1,8 @@
+class FillStylePattern {
+    constructor(img, pattern) {
+        this._style = pattern;
+        this._img = img;
+    }
+}
+
+export default FillStylePattern;

package/libs/util/gcanvas/context-2d/FillStyleRadialGradient.js

@@ -0,0 +1,17 @@
+class FillStyleRadialGradient {
+    constructor(x0, y0, r0, x1, y1, r1) {
+        this._start_pos = { _x: x0, _y: y0, _r: r0 };
+        this._end_pos = { _x: x1, _y: y1, _r: r1 };
+        this._stop_count = 0;
+        this._stops = [0, 0, 0, 0, 0];
+    }
+
+    addColorStop(pos, color) {
+        if (this._stop_count < 5 && 0.0 <= pos && pos <= 1.0) {
+            this._stops[this._stop_count] = { _pos: pos, _color: color };
+            this._stop_count++;
+        }
+    }
+}
+
+export default FillStyleRadialGradient;