fixed:修复安卓端类型报错

lmsail · Apr 20, 2024 · de0246b · de0246b
1 parent 8acc5c1
commit de0246b
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 144 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,17 @@
 ## 项目说明
 
-尽可能的还原了微信朋友圈的UI、交互，`uniapp x` 体验比 `uniapp` 要好很多，熟悉`ts`的朋友可以快速上手！
+尽可能的还原了微信朋友圈的UI、交互，仅在ios上真机测试了效果，安卓真机未测试，大家可以下载感受一下！
 
 ## 更新说明
 
-### 1.0.0（2024-04-19）
+### 1.0.2（2024-04-20）
+
+- 修复安卓端运行报错、类型补全等
+- 优化安卓端体验
+- 新增九宫格图片尺寸动态计算
+- 新增发表朋友圈页面图片尺寸动态计算
+
+### 1.0.1（2024-04-19）
 
 - 补全变量类型，修复安装打包、运行报错，🎉 支持安卓
 - 优化代码结构
@@ -28,10 +35,8 @@ video竖屏全屏退出后，视频出现黑屏为官方BUG，官方正在修复
 
 [查看BUG修复进度](https://issues.dcloud.net.cn/pages/issues/detail?id=1491)  
 
-## 预览
-
-<img src="https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/a7e92550-fc8d-11ee-829d-478a042f758e_0.png" width="200" /> <img src="https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/a7e92550-fc8d-11ee-829d-478a042f758e_1.png" width="200" /> <img src="https://img-cdn-tx.dcloud.net.cn/stream/plugin_screens/a7e92550-fc8d-11ee-829d-478a042f758e_2.png" width="200" />  
-
 ---
 
-## 微信/QQ：582639426
+## 微信/QQ：582639426！  
+
+## github下载地址：[高度还原微信朋友圈](https://github.com/lmsail/uniapp-x-moments)  
diff --git a/components/uni-drag-image/uni-drag-image.uvue b/components/uni-drag-image/uni-drag-image.uvue
@@ -1,31 +1,41 @@
 <template>
 	<view>
 		<view class="addfile uni-row uni-row-wrap">
-			<view class="apply-image" v-for="(imageSrc, index) in imageList" v-if="imageList!!.length > 0" :style="move && currentIndex == index ? 'border: 1px dashed #eee;' : 'border: none'">
-				<image class="image" :id="`image_${index}`" mode="aspectFill" :src="imageSrc" @touchstart="(e: TouchEvent) => onTouchStart(e, index)" @touchmove="onTouchMove" @touchend="onTouchEnd"></image>
+			<view class="apply-image" v-for="(imageSrc, index) in imageList" :style="{
+				border: move && currentIndex == index ? '1px dashed #eeeeee;' : 'none',
+				width: imageSize + 'px',
+				height: imageSize + 'px'
+			}">
+				<image class="image" mode="aspectFill" 
+					:style="{ width: imageSize + 'px', height: imageSize + 'px' }" 
+					:id="`image_${index}`"
+					:src="imageSrc" 
+					@touchstart="(e: TouchEvent) => onTouchStart(e, index)" 
+					@touchmove="onTouchMove" 
+					@touchend="onTouchEnd"
+				></image>
 			</view>
-			<view class="uni-addfile uni-row uni-center" @click="chooseImage" v-if="imageList!!.length < count">
+			<view class="uni-addfile uni-row uni-center" id="image_10" :style="{ width: imageSize, height: imageSize }" @click="chooseImage" v-if="imageList.length < count">
 				<image class="plus" src="./plus.png" mode="scaleToFill"></image>
 			</view>
 		</view>
-
-		<!-- 删除区域 -->
 		<view class="delete-area uni-row uni-column uni-center" ref="deleteArea" :class="{show: move, opacity: isInDeleteArea}" :style="safeBottomStyle">
 			<uni-icons type="trash" size="26" color="#fff"></uni-icons>
 			<text class="font-14 color-white">{{ isInDeleteArea ? '松手即可删除' : '删除' }}</text>
 		</view>
 	</view>
-</template> 
+</template>
 
-<script> 
+<script lang="uts"> 
 	/**
 	 * 图片9宫格拖拽删除
-	 * 注意：页面暂不支持滚动，滚动可能导致布局错乱
+	 * 注意：页面暂不支持滚动，滚动可能导致布局错乱 
 	 */
 	export default {
 		props: {
 			imageList: {
-				type: Array as PropType<Array<string>>
+				type: Array as PropType<any[]>,
+				default: [] as any[]
 			},
 			count: {
 				type: Number,
@@ -52,12 +62,23 @@
 				deleteAreaY: 0,
 				deleteTimer: -1,
 				isInDeleteArea: false,
+
+				// 每张图片的尺寸，宽和高保持一致
+				imageSize: 90,
 			}
 		},
 		computed: {
 			safeBottomStyle() : string {
 				return `height: 100px;padding-bottom: ${this.bottomSafeHeight}px`;
-			},
+			}
+		},
+		watch: {
+			imageList: {
+				handler() {
+					this.$nextTick(() => this.resetImagesPosition());
+				},
+				deep: true
+			}
 		},
 		mounted() {
 			const sys = uni.getSystemInfoSync();
@@ -75,15 +96,26 @@
 			if (this.deleteAreaY == 0) {
 				this.deleteAreaY = sys.screenHeight - (100 + this.bottomSafeHeight);
 			}
+
+			// 计算每张图片的尺寸，左边边距各位30px，每张图片之间间距5px
+			if (this.imageSize == 90) {
+				// #ifdef APP-ANDROID
+				this.imageSize = (((sys.windowWidth as number) - 75) / 3).toInt(); 
+				// #endif
+
+				// #ifdef APP-IOS
+				this.imageSize = ((sys.windowWidth as number) - 75) / 3;
+				// #endif
+			}
 		},
 		methods: {
 			onTouchStart(e : TouchEvent, index: number) {
 				const element = e.target as UniElement | null;
 				if (element == null) return;
 
 				this.currentElement = element;
-				const nodeInfo = element.getBoundingClientRect() as NodeInfo;
-				this.nodePosition = [nodeInfo.left!, nodeInfo?.top!];
+				const nodeInfo = element.getBoundingClientRect();
+				this.nodePosition = [nodeInfo.left, nodeInfo.top];
 				this.currentIndex = index;
 				if (!this.move) {
 					this.move = true;
@@ -109,26 +141,25 @@
 			},
 
 			imageMovingAction(x: number, y: number) {
-				// 实时更新当前图片位置 +-50 是图片尺寸的一半
-				this.currentElement?.style?.setProperty('position', 'fixed')
-				this.currentElement?.style?.setProperty('left', x - 50 + 'px')
-				this.currentElement?.style?.setProperty('top', y - 50 + 'px')
-				this.currentElement?.style?.setProperty('z-index', 1 + this.currentIndex)
-				this.currentElement?.style?.setProperty('opacity', 0.8)
+				const imageHalfSize = this.imageSize / 2;
+				this.currentElement?.style?.setProperty('position', 'fixed');
+				this.currentElement?.style?.setProperty('left', x - imageHalfSize + 'px');
+				this.currentElement?.style?.setProperty('top', y - imageHalfSize + 'px');
+				this.currentElement?.style?.setProperty('z-index', 1 + this.currentIndex);
+				this.currentElement?.style?.setProperty('opacity', 0.8);
 				// 判断当前y轴是否触碰到了删除区域
 				if (this.deleteAreaY > 0) {
-					this.isInDeleteArea = (y + 50) >= this.deleteAreaY;
+					this.isInDeleteArea = y + imageHalfSize >= this.deleteAreaY;
 				}
 			},
 
 			// 移动结束重置图片位置
 			imageMovendAction() {
-				// this.currentElement?.style?.setProperty('position', 'relative')
 				this.currentElement?.style?.setProperty('left', this.nodePosition[0] + 'px')
 				this.currentElement?.style?.setProperty('top', this.nodePosition[1] + 'px')
 				this.currentElement?.style?.setProperty('z-index', 1);
 				this.currentElement?.style?.setProperty('opacity', 1); 
-				// this.resetImagesPosition(); // 重置所有图片位置
+				this.resetImagesPosition(); // 重置所有图片位置
 			},
 
 			deleteImage() {
@@ -137,29 +168,27 @@
 					return;
 				}
 				this.isInDeleteArea = false;
-				this.imageList!!.splice(this.currentIndex, 1);
-				this.resetImagesPosition();
+				this.imageList.splice(this.currentIndex, 1);
 			},
 
 			// 获取剩余的所有节点信息，并重置图片位置 
 			resetImagesPosition() {
-				const imageWith = 100; // 图片宽度
 				const spacing = 5; // 图片间的间隔
 				const startX = 30; // x轴起始边距
 				const staerY = this.startY; // y轴起始边距
-				for (let i = 0; i < this.imageList!!.length; i++) {
+				for (let i = 0; i < this.imageList.length; i++) {
 				    const row = Math.floor(i / 3); // 计算行数
 				    const col = i % 3; // 计算列数
-				    const x = startX + col * (100 + spacing); // 计算 x 轴坐标
-				    const y = staerY + row * (imageWith + spacing); // 计算 y 轴坐标
+				    const x = startX + col * (this.imageSize + spacing); // 计算 x 轴坐标
+				    const y = staerY + row * (this.imageSize + spacing); // 计算 y 轴坐标
 					this.setImagePosition(i, x, y);
 				}
 			},
 
 			// 设置图片位置
 			setImagePosition(index: number, x: number, y: number) {
 				const element = uni.getElementById<UniElement>(`image_${index}`);
-				element?.style?.setProperty('position', 'fixed')
+				element?.style?.setProperty('position', 'fixed');
 				element?.style?.setProperty('left', x + 'px'); 
 				element?.style?.setProperty('top', y + 'px');
 			},
@@ -176,20 +205,20 @@
 	.addfile {
 		margin-bottom: 30px;
 		.apply-image {
-			width: 100px;
-			height: 100px;
 			margin: 0 5px 5px 0;
+			min-width: 90px;
+			min-height: 90px;
 		}
 
 		.uni-addfile, .image {
 			background-color: #eee;
-			width: 100px;
-			height: 100px;
+			width: 100%;
+			height: 100%;
 			border-radius: 3px;
 
 			.plus {
-				width: 50px;
-				height: 50px;
+				width: 40px;
+				height: 40px;
 			}
 		}
 	}

diff --git a/components/uni-moments-image/uni-moments-image.uvue b/components/uni-moments-image/uni-moments-image.uvue
@@ -0,0 +1,45 @@
+<template>
+	<image 
+		class="image" 
+		v-for="(image, index) in imageList" 
+		:src="image" 
+		:style="{ width: imageSize, height: imageSize }"
+		mode="aspectFill" 
+		@click="previewImage(index)"
+	></image>
+</template>
+
+<script setup>
+	const props = defineProps({
+		imageList: Array as PropType<Array<String>>
+	});
+
+	// TODO 待优化...
+	const system = uni.getSystemInfoSync();
+
+	// 计算图片尺寸，这里的105是根据布局尺寸得来的
+	// 1、最外层左右 padding：15px -> 30px
+	// 2、每张图片右边距：5px -> 3张图片：15px
+	// 3、头像：45px，右侧边距：15px
+	const imageSize = computed<String>((): String => {
+		const imageCount = props.imageList!.length;
+		return imageCount >= 3 ? `${(system.screenWidth - 105) / 3}px` : `${(system.screenWidth - 105) / 2}px`;
+	});
+
+	// 图片预览
+	const previewImage = (index: number) => {
+		uni.previewImage({
+			urls: props.imageList!,
+			current: index
+		})
+	}
+</script>
+
+<style lang="scss" scoped>
+	.image {
+		margin: 5px 5px 0 0;
+		// width: 90px;
+		// height: 90px;
+		border-radius: 2px;
+	}
+</style>
diff --git a/manifest.json b/manifest.json
@@ -1,6 +1,6 @@
 {
     "name" : "momentsApp",
-    "appid" : "",
+    "appid" : "__UNI__970F4C1",
     "description" : "",
     "versionName" : "1.0.0",
     "versionCode" : "100",

diff --git a/pages/index/apply.uvue b/pages/index/apply.uvue
@@ -11,8 +11,7 @@
 
 		<!-- 发表文字 -->
 		<view class="content">
-			<textarea class="uni-textarea font-16" cursor-color="#29ad68" :auto-focus="false" :auto-height="true"
-				:adjust-position="false" :maxlength="100"></textarea>
+			<textarea class="uni-textarea font-16" cursor-color="#29ad68" :auto-focus="true" :auto-height="true" :adjust-position="false" :maxlength="100"></textarea>
 
 			<!-- 图片上传 -->
 			<uni-drag-image ref="dragImage" :imageList="imageList" @chooseImage="chooseImageEvent"></uni-drag-image>
@@ -32,6 +31,7 @@
 	import UniList from '@/components/uni-list/uni-list.uvue';
 	import UniItem from '@/components/uni-list/uni-item.uvue';
 	import uniDragImage from '../../components/uni-drag-image/uni-drag-image.uvue';
+	// 
 	export default {
 		components: {
 			UniList,
@@ -41,17 +41,7 @@
 		data() {
 			return {
 				disabled: true,
-				imageList: [
-					"http://iph.href.lu/200x200?text=1&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=2&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=3&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=4&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=5&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=6&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=7&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=8&fg=666666&bg=cccccc",
-					"http://iph.href.lu/200x200?text=9&fg=666666&bg=cccccc",
-				] as string[],
+				imageList: [] as string[],
 
 				address: '', // 当前位置信息
 			};
@@ -82,13 +72,24 @@
 
 			// 发表朋友圈
 			apply() {
-
+				this.imageList = [
+					"http://iph.href.lu/200x200?text=1&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=2&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=3&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=4&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=5&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=6&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=7&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=8&fg=666666&bg=cccccc",
+					"http://iph.href.lu/200x200?text=9&fg=666666&bg=cccccc",
+				];
 			},
 
 			// 选择图片
 			chooseImageEvent() {
+				const count = this.imageList.length > 0 ? 9 - this.imageList.length : this.imageList.length;
 				uni.chooseImage({
-					count: 9,
+					count: count,
 					sizeType: ['original', 'compressed'],
 					sourceType: ['album', 'camera'],
 					success: res => {