2023【建议收藏】uniapp( vue3)使用canvas生成海报并保存，taro/微信小程序也适用

news2024/11/8 1:34:21

有段时间没写vue了，有点生疏了......

1、代码有注释，完整代码如下

<template>
	<view class="page">
		<canvas class="canvas" v-if="isShow" :style="{width:`${canvasWidth}px`,height:`${canvasHeight}px`}"
			:canvas-id="canvasId"></canvas>
		<view class="tool">
			<u-button @click="nextImg" :custom-style="buttonCustomStyle" text="下一张"
				color="linear-gradient(to right, #232526, #414345)"></u-button>
			<u-button @click="save" :custom-style="buttonCustomStyle" text="保存图片"
				color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref, watch } from "vue";
	import { getImgBase64, drawRoundedRect, drawText, getSystemInfo } from "@/utils/canvas";
	import { imageList } from './utils'
	import type { ImageListType } from './utils'
	import { getAuthorize } from "@/utils";
	// 按钮样式
	const buttonCustomStyle = reactive({
		width: '49%',
	});
	// const color = '#f7f6ff'
	const offsetNumber : number = 20;
	const listHeight : number = 66;
	const context = ref(null)
	const pageColor = ref(imageList[0].pageColor)
	const canvasId = ref<string>(String(`canvasId${new Date().getTime()}`))
	const isShow = ref<boolean>(false)
	const imageObj = ref<ImageListType>(imageList[0])
	const imgTemp = ref<string>(wx.env.USER_DATA_PATH + `/${new Date().getTime()}-temp.png`) //图片存储的临时路径
	const canvasWidth = ref<number>(0)// canvas宽度
	const canvasHeight = ref<number>(0)// canvas宽度
	const canvasWidthRate = ref<number>(0.8)//canvas基于屏幕宽度占比,随便设置，我这里设置占屏幕宽度的百分之八十
	// 绘制图片,并转成base64
	const drawBgImg = async () => {
		// 图片临时地址重新赋值，避免图片加载路径都是一样的
		imgTemp.value = wx.env.USER_DATA_PATH + `/${new Date().getTime()}-temp.png`
		const ctx = context.value
		const { imgUrl, imageWidth, imageHeight } = await getImgBase64({
			src: imageObj.value.imageSrc,
			canvasWidth: canvasWidth.value,
			filePath: imgTemp.value
		})
		canvasHeight.value = canvasHeight.value + imageHeight //重新计算画布总高度
		// 填充背景矩阵
		drawRoundedRect(ctx, 0, 0, canvasWidth.value, canvasHeight.value, {
			fillColor: imageObj.value.bgColor,
			leftBottom: true,
			leftTop: true,
			rightBottom: true,
			rightTop: true,
			r: 5
		})
		// 图片如何居中呢？
		// 当前画布宽度 - 图片宽度 = 空出来的间隙
		// 图片居中 = 空出来的间隙 / 2 = x 轴起点 x = canvasWidth.value - imageWidth) / 2
		ctx.drawImage(imgUrl, (canvasWidth.value - imageWidth) / 2, offsetNumber, imageWidth, imageHeight);
	}
	// 绘制文字
	const drawTxt = async () => {
		const ctx = context.value
		const offsetY = canvasHeight.value
		// 填充矩形背景
		drawRoundedRect(ctx, 0, canvasHeight.value, canvasWidth.value, listHeight, {
			fillColor: imageObj.value.bgColor,
		});
		// 绘制文字
		drawText({
			ctx,
			text: imageObj.value.name,
			fillStyle: '#000000',
			fontSize: 22,
			x: (canvasWidth.value / 2),
			y: offsetY + 25,
			center: true
		})
		// 绘制文字
		drawText({
			ctx,
			text: imageObj.value.desc,
			fillStyle: '#000000',
			fontSize: 16,
			x: (canvasWidth.value / 2),
			y: offsetY + 25 + 25,
			center: true
		})
		//画布高度重新计算
		canvasHeight.value = canvasHeight.value + listHeight
	}
	// 初始化canvas
	const initCanvas = async () => {
		try {
			uni.showLoading()
			const { windowWidth } : any = await getSystemInfo()
			const ctx = context.value
			canvasHeight.value = offsetNumber;//初始化高度
			canvasWidth.value = windowWidth * canvasWidthRate.value//初始化宽度
			await drawBgImg()
			await drawTxt()
			ctx.draw()
		} finally {
			uni.hideLoading()
		}

	}
	onMounted(() => {
		isShow.value = true
	})
	watch(isShow, () => {
		if (isShow.value) {
			canvasId.value = String(`canvasId${new Date().getTime()}`)//由于存在多次绘制，避免ID重复，需要重新赋值
			context.value = uni.createCanvasContext(canvasId.value)//由于存在多次绘制，所以每次都重新创建新的画布实例
			initCanvas()

		}

	})
	// 下一张图
	const nextImg = () => {
		isShow.value = false
		imageObj.value = imageList[imageObj.value.id + 1] ?? imageList[0]
		pageColor.value = imageObj.value.pageColor
		setTimeout(() => {
			isShow.value = true
		}, 100)
	}
	// 图片添加到相册
	const addIamgeToAlbum = async () => {
		try {
			const { tempFilePath } = await uni.canvasToTempFilePath({
				canvasId: canvasId.value,
			});
			console.log('tempFilePath', tempFilePath);
			await uni.saveImageToPhotosAlbum({
				filePath: tempFilePath
			})
			uni.showToast({
				title: '保存成功！'
			})
		} catch {

		}

	}
	// 保存
	const save = async () => {
		try {
			uni.showLoading()
			// 获取用户设置
			const { authSetting } = await uni.getSetting()
			// 没有权限的时候
			if (!authSetting['scope.writePhotosAlbum']) {
				await getAuthorize('scope.writePhotosAlbum', {
					title: '请授权保存到相册',
					callback: addIamgeToAlbum
				})
				return
			}
			addIamgeToAlbum()
		} catch (err) {
		} finally {
			uni.hideLoading()
		}

	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: v-bind(pageColor);
		height: 100vh;
		overflow: hidden;

		.canvas {
			margin: 20px auto 0;
		}

		.tool {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
		}
	}
</style>

1.1、工具函数 - canvas.ts

//utils/canvas.ts
const fs = uni.getFileSystemManager()

// 将Base64写入本地文件
const base64WriteFile = (filePath : string, data : string) => {
	return new Promise((resolve, reject) => {
		fs.writeFile({
			filePath,
			data,
			encoding: 'base64',
			success: (res) => {
				resolve(res);
			},
			fail: (err) => {
				reject(err);
			},
		});
	});
};
// 参数的类型校验
type GetImgBase64Type = {
	src : string;//图片地址(本地/在线地址)
	canvasWidth : number;//画布宽度
	filePath : string//临时路径
}
// 加载图片地址，生成base64并写入临时路径中
export const getImgBase64 = async (params : GetImgBase64Type) => {
	const { src, canvasWidth, filePath } = params
	try {
		// 获取图片信息：地址、宽高
		const imgInfo = await uni.getImageInfo({
			src,
		});
		// 计算图片在画布中的宽度
		const imageWidth = canvasWidth * 0.8;//随便定的，多少px都行
		// // 根据比例计算图片在画布中的高度
		const scaleFactor = Number((imageWidth / imgInfo.width).toFixed(2));
		// 根据比例计算图片高度
		const imageHeight = imgInfo.height * scaleFactor;
		// 生成base64
		const base64 : any = fs.readFileSync(imgInfo.path, 'base64')
		// 写入本地
		await base64WriteFile(filePath, base64)
		const currentImgInfo = await uni.getImageInfo({
			src: filePath,
		});
		return {
			imageWidth,
			imageHeight,
			imgUrl: currentImgInfo.path
		}
	} catch (err) {
		console.log('err', err);
	}

};

type DrawRoundedRectParamsType = {
	leftTop ?: boolean;
	leftBottom ?: boolean;
	rightTop ?: boolean;
	rightBottom ?: boolean;
	fillColor ?: string;
	r ?: number;
};
// canvas 绘制自定义圆角矩形
export const drawRoundedRect = (
	ctx : any,
	x : number,
	y : number,
	w : number,
	h : number,
	params ?: DrawRoundedRectParamsType,
) => {
	const {
		leftTop = false,
		leftBottom = false,
		rightTop = false,
		rightBottom = false,
		fillColor = 'transparent',
		r = 0,
	} = params || {};
	ctx.save(); // 保存当前绘图状态 防止虚线影响其他图形
	ctx.beginPath();
	ctx.setFillStyle(fillColor);
	ctx.setStrokeStyle('transparent');
	ctx.moveTo(x + r, y);
	// 绘制上边线和左上角圆弧
	if (leftTop) {
		ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
		ctx.lineTo(x, y);
	} else {
		ctx.moveTo(x, y + r);
		ctx.lineTo(x, y);
		ctx.lineTo(x + r, y);
	}
	ctx.lineTo(x + w - r, y);
	// 绘制上边线和右上角圆弧
	if (rightTop) {
		ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
	} else {
		ctx.lineTo(x + w - r, y);
		ctx.lineTo(x + w, y);
		ctx.lineTo(x + w, y + r);
	}

	ctx.lineTo(x + w, y + h - r);

	// 绘制下边线和右下角圆弧
	if (rightBottom) {
		ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
	} else {
		ctx.lineTo(x + w, y + h - r);
		ctx.lineTo(x + w, y + h);
		ctx.lineTo(x + w - r, y + h);
	}

	ctx.lineTo(x + r, y + h);

	// 绘制下边线和左下角圆弧
	if (leftBottom) {
		ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
	} else {
		ctx.lineTo(x + r, y + h);
		ctx.lineTo(x, y + h);
		ctx.lineTo(x, y + h - r);
	}

	ctx.lineTo(x, y + r);

	// 绘制左边线和左上角圆弧
	if (leftTop) {
		ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
		ctx.moveTo(x + r, y);
	} else {
		ctx.moveTo(x, y + r);
		ctx.lineTo(x, y);
		ctx.lineTo(x + r, y);
	}
	ctx.fill();
	ctx.closePath();
	ctx.stroke();
	ctx.restore(); // 恢复之前的绘图状态
};
type DrawTextConfigType = {
	ctx : any;
	fillStyle : string;//填充颜色
	fontSize : number//文字大小
	text : string;//在画布上输出的文本
	x : number;//绘制文本的左上角x坐标位置
	y : number//绘制文本的左上角y坐标位置
	center ?: boolean
}
// 绘制文本
export const drawText = (config : DrawTextConfigType) => {
	const { fillStyle, fontSize, x, y, text, ctx, center = false } = config
	ctx.setFillStyle(fillStyle);
	ctx.setFontSize(fontSize);
	if (center) {
		ctx.textAlign = 'center';//文字水平居中
	}
	ctx.fillText(text, x, y);
}
// 获取当前设备信息
export const getSystemInfo = () => {
	return new Promise((resolve) => {
		uni.getSystemInfo({
			success(res) {
				resolve(res)
			},
		})
	})
}

1.2、工具函数 - index.ts

//utils/index.ts
// 获取用户授权
type GetAuthorizeType = {
	title ?: string;//授权弹框描述
	callback ?: () => void//成功的回调
}
export const getAuthorize = (scope : string, params : GetAuthorizeType) => {
	const { title = '请开启授权', callback } = params
	return new Promise(() => {
		uni.authorize({
			scope,
			success: () => {
				callback?.()
			},
			fail: () => {
				// 如果用户点了拒绝，需要弹框提示再次授权
				uni.showModal({
					title,
					success() {
						uni.openSetting();
					},
				});
			}
		})
	})
}

1.3、图片列表函数

// ./utils/index.ts
export type ImageListType = {
	id : number;
	name : string
	desc : string
	imageSrc : string
	bgColor : string
	pageColor : string
}
export const imageList : ImageListType[] = [
	{
		id: 0,
		name: '那维莱特',
		desc: '潮水啊，我已归来！',
		imageSrc: '../../static/那维莱特.jpg',
		bgColor: '#b2d4ff',
		pageColor: '#d9e9ff',
	},
	{
		id: 1,
		name: '东方镜',
		desc: '太阳之下，诸世皆影！',
		imageSrc: '../../static/镜.jpg',
		bgColor: '#ffdecd',
		pageColor: '#fff3ed',
	},
	{
		id: 2,
		name: '魈',
		desc: '你去吧,我会在这里等你。',
		imageSrc: '../../static/魈.png',
		bgColor: '#f1ddff',
		pageColor: '#fbf4ff',
	},
	{
		id: 3,
		name: '琴团长',
		desc: '我以此剑起誓，必将胜利献给你！',
		imageSrc: '../../static/琴.jpg',
		bgColor: '#e6e4ff',
		pageColor: '#f7f6ff',
	},
]

2、效果如下

                                

                

3、添加相册授权

根据各自框架添加授权即可，比如uniapp在manifest.json下

    "mp-weixin" : {
        "appid" : "你的微信appid",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true,
         /* 授权 */
		"permission": {
			"scope.writePhotosAlbum": {
				"desc": "请授权保存到相册"
			}
		}
    },

4、项目地址

我的项目地址，点击跳转

5、问题总汇

5.1、为什么本地图片/在线图片真机不显示等？

将所有用到的图片转 base64 展示，参考上面工具函数中的 getImgBase64()

5.2、多文本如何换行？

参考下面地址  使用canvas画布时多行文本应该怎么换行？ | 微信开放社区  

5.3、多次绘制出现白屏等？

比如以弹框的形式多次点击生成等情况，首先要确保每个canvas-idID的实例不能重复。可以参考我上面标题1中的代码。

5.4、当ctx.draw()后需要立马回去临时路径做 image预览时，画布生成的内容不全？

5.4.1、前提情景

由于 canvas 的层级比较高，做预览的时候会遮住其他的view等标签。而且样式或拖拽等也不好处理，花费时间肯定更多一点，这个时候需要用 <image src="图片的临时路径" mode=""></image> 代替 canvas 做展示。

5.4.2、解决

改写ctx.draw()为如下：

		ctx.draw(
				false,
				setTimeout(async () => {
					//在这里生成临时路径
					const { tempFilePath } = await uni.canvasToTempFilePath({
						canvasId: canvasId.value,
					});
					console.log('tempFilePath', tempFilePath);
					await uni.saveImageToPhotosAlbum({
						filePath: tempFilePath
					})
				}, 100),
			);

由于绘制可能需要更长的时间，通过延时器即可解决。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1114533.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Python学习笔记——类、魔术方法

Python学习笔记——类、魔术方法

食用说明&#xff1a;本笔记适用于有一定编程基础的伙伴们。希望有助于各位&#xff01; 类 类的运用很常见&#xff1a;在大部分情况下&#xff0c;对一些特有的对象&#xff0c;可以使用特定的类来指向它&#xff1a; class Person:name unknownage -1sex 0partner No…
阅读更多...
【Proteus仿真】【Arduino单片机】蜂鸣器

【Proteus仿真】【Arduino单片机】蜂鸣器

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真Arduino单片机控制器&#xff0c;使用蜂鸣器等。 主要功能&#xff1a; 系统运行后&#xff0c;蜂鸣器播放音乐。 二、软件设计 /* 作者&#xff1a;嗨小易&#xff08;QQ&#x…
阅读更多...
连续/离散的控制系统阶跃测试（包括MATLAB里的step()函数）

连续/离散的控制系统阶跃测试（包括MATLAB里的step()函数）

阶跃测试 只要是连续时间系统&#xff0c;无论是传递函数还是连续状态空间形式的模型&#xff0c;直接可以用**step()**做阶跃测试&#xff1b;但是对于离散系统而言&#xff0c;不能用step()函数&#xff0c;可以自行编写代码&#xff0c;如下。 1、离散系统&#xff1a;x(k…
阅读更多...
PHPEXCEL解决行数超过65536不显示问题

PHPEXCEL解决行数超过65536不显示问题

起因自然是导出数据到excel文件时&#xff0c;数据缺少现象。 百度讲解是将xls文件另存为xlsx文件。 除了这里的原因&#xff0c;还有一点是phpExcel存在两个写入类PHPExcel_Writer_Excel2007和PHPExcel_Writer_Excel5&#xff0c;而只有PHPExcel_Writer_Excel2007支持超过65…
阅读更多...
C++类对象所占内存空间大小分析

C++类对象所占内存空间大小分析

前言 类占内存空间是只类实例化后占用内存空间的大小&#xff0c;类本身是不会占内存空间的。用 sizeof 计算类的大小时&#xff0c;实际上是计算该类实例化后对象的大小。空类占用1字节原因&#xff1a;C要求每个实例在内存中都有一个唯一地址&#xff0c;为了达到这个目的&am…
阅读更多...
VR虚拟展厅的亮点是什么？有哪些应用？

VR虚拟展厅的亮点是什么？有哪些应用？

传统展厅主要是以静态陈列的形式来传达内容&#xff0c;而展示形式则有图片、视频等&#xff0c;虽然视频包含内容多&#xff0c;但是总体具有一定的局限性&#xff0c;客户体验感也较差&#xff0c;往往不能深入了解细节。随着VR技术越来越成熟&#xff0c;VR技术的广泛应用&a…
阅读更多...
解决Unity打包时，Android SDK 报错问题

解决Unity打包时，Android SDK 报错问题

报错内容应该包括类似如下信息&#xff1a; CommandInvokationFailure: Failed to update Android SDK package list. java.lang.UnsupportedClassVersionError: com/android/prefs/AndroidLocationsProvider has been compiled by a more recent version of the Java Runtim…
阅读更多...
Linux多线程服务端编程：使用muduo C++网络库 学习笔记 第一章 线程安全的对象生命期管理

Linux多线程服务端编程：使用muduo C++网络库 学习笔记 第一章 线程安全的对象生命期管理

编写线程安全的类不是难事&#xff0c;用同步原语&#xff08;synchronization primitives&#xff09;保护内部状态即可。但对象的生与死不能由对象自身拥有的mutex&#xff08;互斥器&#xff09;来保护。如何避免对象析构时可能存在的race condition&#xff08;竞态条件&am…
阅读更多...
客观来说这两年确实是香港优才计划申请的红利期！

客观来说这两年确实是香港优才计划申请的红利期！

客观来说这两年确实是香港优才计划申请的红利期&#xff01; 最明显的网上关于香港优才计划申请的帖子都比之前多了不少&#xff0c;首页经常随便一刷就是分享香港优才计划申请攻略的。 今年以来香港优才计划的政策也发生了很多变化&#xff1a; 1、取消年度配额限制&#xff0…
阅读更多...
双指针——盛水最多的容器

双指针——盛水最多的容器

一, 题目要求 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你不能倾斜容…
阅读更多...
深度学习技巧应用29-软件设计模式与神经网络巧妙结合，如何快速记忆软件设计模式

深度学习技巧应用29-软件设计模式与神经网络巧妙结合，如何快速记忆软件设计模式

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下软件设计模式与神经网络巧妙结合&#xff0c;如何快速记忆软件设计模式。我们知道软件设计模式有23种&#xff0c;考试的时候经常会考到&#xff0c;但是这么种里面我们如何取判断它呢&#xff0c;如何去记忆它呢&a…
阅读更多...
不好意思，Nginx 该换了！

不好意思，Nginx 该换了！

Cloudflare公司去年宣布弃用nginx&#xff0c;转用自研的新一代方向代理服务Pingora&#xff0c;并号称比nginx更快、更高效、更安全&#xff0c;下面通过Cloudfare官方网站的一篇文章来了解下Pingora比Nginx强在哪里。 简介 今天&#xff0c;我们很高兴有机会在此介绍 Pingo…
阅读更多...
NXP官方uboot针对ALPHA开发板网络驱动更改说明三

NXP官方uboot针对ALPHA开发板网络驱动更改说明三

一. 简介 前几篇文章学习了 在 NXP官方uboot上做网络驱动的一部分更改。地址如下&#xff1a; ALPHA开发板网络方案说明-CSDN博客 NXP官方uboot针对ALPHA开发板网络驱动更改说明一-CSDN博客 NXP官方uboot针对ALPHA开发板网络驱动更改说明二-CSDN博客 本文继续来学习在 NXP官…
阅读更多...
上位机通过Modbus转Profinet网关与CGV300变频器通讯配置案例

上位机通过Modbus转Profinet网关与CGV300变频器通讯配置案例

上位机通过Modbus转Profinet网关&#xff08;XD-MDPN100&#xff09;与CGV300变频器通讯的案例可以实现两个不同的通信协议之间的互联互通。在这个案例中&#xff0c;上位机通过Modbus协议与Profinet网关进行通信&#xff0c;然后通过Profinet协议与CGV300变频器进行通信。 通…
阅读更多...
【C++初阶(三）引用与内联函数】

【C++初阶(三）引用与内联函数】

本专栏内容为&#xff1a;C学习专栏&#xff0c;分为初阶和进阶两部分。 通过本专栏的深入学习&#xff0c;你可以了解并掌握C。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;C &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&…
阅读更多...
【做题小技巧】乘法得出的数超过int怎么办

【做题小技巧】乘法得出的数超过int怎么办

2023.10.20 首先看一道题哈&#xff1a;leetcode 2525题 给你四个整数 length &#xff0c;width &#xff0c;height 和 mass &#xff0c;分别表示一个箱子的三个维度和质量&#xff0c;请你返回一个表示箱子 类别 的字符串。 如果满足以下条件&#xff0c;那么箱子是 “B…
阅读更多...
滚柱导轨在重型机械设备中起什么作用？

滚柱导轨在重型机械设备中起什么作用？

滚柱导轨是一种以滚柱为滑动元件的导轨系统&#xff0c;它广泛应用于各种机械领域&#xff0c;特别是在重型设备和精密设备中&#xff0c;以下是滚柱导轨的主要应用领域&#xff1a; 1、重型机械设备&#xff1a;滚柱导轨具有较高的承载能力和抗振性能&#xff0c;因此在各种重…
阅读更多...
思维训练2

思维训练2

题目描述1 Problem - A - Codeforces 题目分析 通过题目发现a[1] d[1]&#xff0c; a[i] d[i] a[i - 1] 由于所有的数都为正数&#xff0c;所以只要出现a[i - 1] - d[i] > 0这种情况a[i]就可以取为绝对值&#xff0c;也就是说a[i]会有一正一负两种情况&#xff0c;当…
阅读更多...
如何在 Bash 脚本中添加注释

如何在 Bash 脚本中添加注释

在 Bash 脚本中添加注释是保持代码整洁且易于理解的最有效方法之一。 你可能会问为什么。 假设你的脚本包含一个复杂的正则表达式或多个复杂的代码块&#xff0c;在这种情况下&#xff0c;你可以添加注释&#xff0c;以便其他开发人员或你可以了解该代码块的含义。 注释掉部…
阅读更多...
【运维知识高级篇】超详细的Jenkins教程5（pipeline流水线配置+分布式构建）

【运维知识高级篇】超详细的Jenkins教程5（pipeline流水线配置+分布式构建）

CI/CD是持续集成&#xff0c;持续部署&#xff0c;集成就是开发人员通过自动化编译&#xff0c;发布&#xff0c;测试的手段集成软件&#xff0c;在开发的测试环境上测试发现自己的错误&#xff1b;持续部署是自动化构建&#xff0c;部署&#xff0c;通常也是在测试环境上进行&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023