unicloud-db-contacts: 简化变量命名, 更新 uni-loading 组件

pages/component/mixin-datacom/datacom.uvue

@@ -40,7 +40,7 @@
           const data = res.data
           // const count = res.count
           this.mixinDatacomResData = data
-        }).catch((err) => {
+        }).catch((err: any | null) => {
           this.mixinDatacomError = err as UniCloudError
         }).finally(() => {
           this.mixinDatacomLoading = false

pages/component/unicloud-db-contacts/add.uvue

@@ -40,18 +40,19 @@
       return {
         collection: COLLECTION_NAME,
         genderList: GenderList as GenderType[],
-        $uniCloudElement: null as UniCloudDBElement | null
+        uniCloudElement: null as UniCloudDBElement | null
       }
     },
     onReady() {
-      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
+      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement
     },
     methods: {
       onFormSubmit: function (e : FormSubmitEvent) {
         const formData = e.detail.value
         const genderString = formData['gender'] as string
         formData['gender'] = (genderString.length > 0) ? parseInt(genderString) : -1
-        this.$uniCloudElement!.add(formData, {
+        console.log('formData', formData)
+        this.uniCloudElement!.add(formData, {
           showToast: false,
           needLoading: true,
           loadingTitle: "正在保存...",

pages/component/unicloud-db-contacts/detail.uvue

@@ -39,14 +39,14 @@
       return {
         collection: '',
         where: '',
-        $whereID: '',
-        $uniCloudElement: null as UniCloudDBElement | null
+        whereID: '',
+        uniCloudElement: null as UniCloudDBElement | null
       }
     },
-    onLoad(options : Map<string, string>) {
+    onLoad(options) {
       this.collection = COLLECTION_NAME;
-      this.$whereID = options.get('id') as string;
-      this.where = `_id=='${this.$whereID}'`;
+      this.whereID = options['id'] as string;
+      this.where = `_id=='${this.whereID}'`;
     },
     onShow() {
       // TODO 后续通过 EventChannel 实现
@@ -57,7 +57,7 @@
       uni.$off(UNICLOUD_DB_CONTACTS_UPDATE, this.onDataChange);
     },
     onReady() {
-      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
+      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement
     },
     methods: {
       displayGender(value : number | null) : string {
@@ -74,7 +74,7 @@
         })
       },
       onDataChange(_ : string) {
-        this.$uniCloudElement!.loadData()
+        this.uniCloudElement!.loadData()
       }
     }
   }

pages/component/unicloud-db-contacts/edit.uvue

@@ -49,31 +49,31 @@
         collection: '',
         where: '',
         genderList: GenderList as GenderType[],
-        $whereID: '',
-        $uniCloudElement: null as UniCloudDBElement | null
+        whereID: '',
+        uniCloudElement: null as UniCloudDBElement | null
       }
     },
-    onLoad(options : Map<string, string>) {
+    onLoad(options) {
       this.collection = COLLECTION_NAME;
-      this.$whereID = options.get('id') as string;
-      this.where = `_id=='${this.$whereID}'`;
+      this.whereID = options['id'] as string;
+      this.where = `_id=='${this.whereID}'`;
     },
     onReady() {
-      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
+      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement
     },
     methods: {
       onFormSubmit: function (e : FormSubmitEvent) {
         const formData = e.detail.value
         const genderString = formData['gender'] as string
         formData['gender'] = (genderString.length > 0) ? parseInt(genderString) : -1
-        this.$uniCloudElement!.update(this.$whereID, formData, {
+        this.uniCloudElement!.update(this.whereID, formData, {
           showToast: false,
           needLoading: true,
           needConfirm: false,
           loadingTitle: "正在保存...",
           success: (_ : UniCloudDBUpdateResult) => {
             // TODO 后续通过 EventChannel 实现
-            uni.$emit(UNICLOUD_DB_CONTACTS_UPDATE, this.$whereID)
+            uni.$emit(UNICLOUD_DB_CONTACTS_UPDATE, this.whereID)
             setTimeout(() => {
               uni.navigateBack()
             }, 500)
@@ -88,7 +88,7 @@
         })
       },
       remove(id : string | null, name : string | null) {
-        this.$uniCloudElement!.remove(id!, {
+        this.uniCloudElement!.remove(id!, {
           needConfirm: true,
           needLoading: true,
           loadingTitle: "正在删除...",
@@ -96,7 +96,7 @@
           confirmContent: name,
           success: (_ : UniCloudDBRemoveResult) => {
             // TODO 后续通过 EventChannel 实现
-            uni.$emit(UNICLOUD_DB_CONTACTS_DELETE, this.$whereID)
+            uni.$emit(UNICLOUD_DB_CONTACTS_DELETE, this.whereID)
             setTimeout(() => {
               uni.navigateBack({
                 delta: 2

pages/component/unicloud-db-contacts/list.uvue

@@ -29,14 +29,14 @@
     data() {
       return {
         collection: COLLECTION_NAME,
-        $uniCloudElement: null as UniCloudDBElement | null
+        uniCloudElement: null as UniCloudDBElement | null
       }
     },
     onReady() {
       // TODO 后续通过 EventChannel 实现
       uni.$on(UNICLOUD_DB_CONTACTS_DELETE, this.onDataChange);
-      this.$uniCloudElement = this.$refs['udb'] as UniCloudDBElement
-      this.$uniCloudElement!.loadData()
+      this.uniCloudElement = this.$refs['udb'] as UniCloudDBElement
+      this.uniCloudElement!.loadData()
     },
     onUnload() {
       // TODO 后续通过 EventChannel 实现
@@ -50,7 +50,7 @@
       uni.$off(UNICLOUD_DB_CONTACTS_UPDATE, this.onDataChange);
     },
     onPullDownRefresh() {
-      this.$uniCloudElement!.loadData({
+      this.uniCloudElement!.loadData({
         clear: true,
         success: (_ : UniCloudDBGetResult) => {
           uni.stopPullDownRefresh()
@@ -59,7 +59,7 @@
     },
     methods: {
       loadMore() {
-        this.$uniCloudElement!.loadMore()
+        this.uniCloudElement!.loadMore()
       },
       gotoAddPage() {
         // TODO 后续通过 EventChannel 实现
@@ -76,7 +76,7 @@
         })
       },
       onDataChange(_ : string) {
-        this.$uniCloudElement!.loadData({
+        this.uniCloudElement!.loadData({
           clear: true
         })
       }
@@ -97,6 +97,11 @@
 
   .udb {
     flex: 1;
+    /* TODO */
+    /* #ifdef WEB */
+    display: flex;
+    /* #endif */
+    flex-direction: column;
   }
 
   .list-view {

uni_modules/uni-loading/changelog.md

+## 1.0.4（2024-01-10）
+- 优化 兼容 uvue h5 项目
+## 1.0.3（2023-12-22）
+- 更新 示例项目
+## 1.0.2（2023-12-22）
+- 优化 circle 部分动画逻辑，使动画更顺滑
 ## 1.0.1（2023-12-20）
 - 修复 组件在高版本HBuilderX中运行出错的bug
 ## 1.0.0（2023-12-19）

uni_modules/uni-loading/components/uni-loading/circle.uvue

 <template>
-	<view :ref="elId" class="block" :style="{width:size+'px',height:size+'px'}"></view>
+  <!-- #ifdef APP -->
+  <view :ref="elId" class="block" :style="{width:size+'px',height:size+'px'}"></view>
+  <!-- #endif -->
+  <!-- #ifdef WEB -->
+  <svg :width="size" :height="size" viewBox="25 25 50 50" :style="{width:size+'px',height:size+'px'}" class="uni-load__img uni-load__img--android-H5">
+    <circle cx="50" cy="50" r="20" fill="none" :style="{color:color}" :stroke-width="iconsSize"></circle>
+  </svg>
+  <!-- #endif -->
 </template>
 <script>
-	import { easeInOutCubic } from './util'
-	export default {
-		name: "uni-loading",
-		props: {
-
-			speed: {
-				type: Number,
-				default: 16,
-			},
-			size: {
-				type: Number,
-				default: 20,
-			},
-			color: {
-				type: String,
-				default: '',
-			}
-		},
-		data() {
-			const elId = `Uni_${(Math.random() * 10e5).toInt().toString(36)}`
-			return {
-				elId: elId,
-				timer: 0,
-			};
-		},
-		mounted() {
-			this.init()
-		},
-		unmounted() {
-			clearInterval(this.timer)
-		},
-		methods: {
-			init() {
-				const refs = this.$refs[this.elId] as Element
-				let ctx = refs.getDrawableContext()!
-				this.circular(ctx)
-			},
-			circular(ctx : DrawableContext) {
-				let startAngle = 0;
-				let rotate = 0;
-				const ARC_LENGTH = 359;
-				const center = this.size / 2;
-				const lineWidth = this.size / 10;
-				const duration = 1200; // 动画持续时间
-				const interval = this.speed; // 定时器间隔（大约 60 帧每秒）
-
-
-				const ARC_MAX = 358
-				let startTime = 0;
-				let foreward_end = 0 // 正传
-				let reversal_end = ARC_MAX // 反转
-				function pogress_time() : number {
-					const currentTime = Date.now();
-					const elapsedTime = currentTime - startTime;
-					const progress = elapsedTime / duration;
-					const easedProgress = easeInOutCubic(progress);
-					return easedProgress
-				}
-				const draw = () => {
-
-					ctx.reset();
-					ctx.beginPath();
-
-					if (reversal_end == ARC_MAX) {
-						foreward_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH); // 限制 end 的最大值为 ARC_LENGTH
-						if (foreward_end >= ARC_MAX) {
-							reversal_end = 0
-							foreward_end = ARC_MAX
-							startTime = Date.now();
-						}
-					}
-
-					if (foreward_end == ARC_MAX) {
-						reversal_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH);
-						if (reversal_end >= ARC_MAX) {
-							reversal_end = ARC_MAX
-							foreward_end = 0
-							startTime = Date.now();
-						}
-					}
-
-					ctx.arc(
-						center,
-						center,
-						center - lineWidth,
-						startAngle + rotate + (reversal_end * Math.PI / 180),
-						startAngle + rotate + (foreward_end * Math.PI / 180)
-					);
-					ctx.lineWidth = lineWidth;
-					const fillColor = (this.color !== '' ? this.color : '#666').toString();
-					ctx.strokeStyle = fillColor;
-					ctx.stroke();
-					ctx.update();
-					rotate += 0.05; // 旋转速度
-				}
-
-				this.timer = setInterval(() => draw(), interval);
-			}
-
-		}
-	}
+  import { easeInOutCubic } from './util'
+  let elId = 0
+  export default {
+    name: "circle",
+    props: {
+      speed: {
+        type: Number,
+        default: 16,
+      },
+      size: {
+        type: Number,
+        default: 20,
+      },
+      color: {
+        type: String,
+        default: '#666',
+      }
+    },
+    data() {
+      // 防止多调用，随机元素id
+      elId += 1
+      const elID = `Uni_Load_Circle_${elId}`
+      return {
+        elId: elID,
+        timer: 0,
+      };
+    },
+    computed: {
+      iconsSize() : number {
+        console.log(this.size / 10);
+        return (this.size / 10) +1
+      }
+    },
+    mounted() {
+      // #ifdef APP
+      this.init()
+      // #endif
+    },
+    unmounted() {
+      // 组件卸载时，需要卸载定时器，优化性能，防止页面卡死
+      clearInterval(this.timer)
+    },
+    methods: {
+      /**
+       * 初始化圆环
+       */
+      init() {
+        const refs = this.$refs[this.elId] as Element
+        let ctx = refs.getDrawableContext()!
+        this.build_circular(ctx)
+      },
+
+      /**
+       * 构建圆环动画
+       */
+      build_circular(ctx : DrawableContext) {
+        let startAngle = 0;
+        let rotate = 0;
+        const ARC_LENGTH = 359;
+        const center = this.size / 2; // 圆心
+        const lineWidth = this.size / 10; // 圆环宽度
+        const duration = 1200; // 动画持续时间
+        const interval = this.speed; // 定时器间隔（大约 60 帧每秒）
+
+        // 使圆环过度更自然，不必运动到底
+        const ARC_MAX = 358
+        let startTime = 0;
+        let foreward_end = 0 // 正传
+        let reversal_end = ARC_MAX // 反转
+        function pogress_time() : number {
+          const currentTime = Date.now();
+          // 运动时间计算
+          const elapsedTime = currentTime - startTime;
+          const progress = elapsedTime / duration;
+          // 动画缓动
+          const easedProgress = easeInOutCubic(progress);
+          return easedProgress
+        }
+        const draw = () => {
+
+          ctx.reset();
+          ctx.beginPath();
+
+          if (reversal_end == ARC_MAX) {
+            foreward_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH); // 限制 end 的最大值为 ARC_LENGTH
+            if (foreward_end >= ARC_MAX) {
+              reversal_end = 0
+              foreward_end = ARC_MAX
+              startTime = Date.now();
+            }
+          }
+
+          if (foreward_end == ARC_MAX) {
+            reversal_end = Math.min(pogress_time() * ARC_LENGTH, ARC_LENGTH);
+            if (reversal_end >= ARC_MAX) {
+              reversal_end = ARC_MAX
+              foreward_end = 0
+              startTime = Date.now();
+            }
+          }
+
+          ctx.arc(
+            center,
+            center,
+            center - lineWidth,
+            startAngle + rotate + (reversal_end * Math.PI / 180),
+            startAngle + rotate + (foreward_end * Math.PI / 180)
+          );
+          ctx.lineWidth = lineWidth;
+          const fillColor = (this.color !== '' ? this.color : '#666').toString();
+          ctx.strokeStyle = fillColor;
+          ctx.stroke();
+          ctx.update();
+          rotate += 0.05; // 旋转速度
+        }
+
+        this.timer = setInterval(() => draw(), interval);
+      }
+
+    }
+  }
 </script>
 
 <style scoped>
-	.block {
-		width: 50px;
-		height: 50px;
-	}
+  .block {
+    width: 50px;
+    height: 50px;
+  }
+
+  /* #ifdef WEB */
+  .uni-load__img {
+    width: 24px;
+    height: 24px;
+  }
+
+  .uni-load__img--android-H5 {
+    animation: loading-android-H5-rotate 2s linear infinite;
+    transform-origin: center center;
+  }
+
+  .uni-load__img--android-H5 circle {
+    display: inline-block;
+    animation: loading-android-H5-dash 1.5s ease-in-out infinite;
+    stroke: currentColor;
+    stroke-linecap: round;
+  }
+
+  @keyframes loading-android-H5-rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes loading-android-H5-dash {
+    0% {
+      stroke-dasharray: 1, 200;
+      /* stroke-dashoffset: 0; */
+    }
+
+    50% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -20;
+    }
+
+    100% {
+      stroke-dasharray: 90, 150;
+      stroke-dashoffset: -120;
+    }
+  }
+
+  /* #endif */
 </style>

uni_modules/uni-loading/components/uni-loading/icon.uvue

 <template>
 	<uni-icons :id="elId" class='load-ani' :style="aniStyle" @transitionend="onEnd" :type="iconType" :size="size" :color="color"></uni-icons>
-	<!-- return h(UniIcons, {
-		id: this.elId,
-		class: 'load-ani',
-		style: this.aniStyle,
-		onTransitionend: this.onEnd,
-		id: this.elId,
-		type: this.iconType,
-		color: this.color,
-		// TODO +2 是为了大小与自绘元素保持大小一致
-		size: this.loadWidth + 2,
-	}) -->
 </template>
 
 <script>
 	export default {
+    name:'icon',
 		props: {
 			iconType: {
 				type: String,
@@ -77,4 +67,4 @@
 		transition-timing-function: linear;
 		transform: rotate(0deg);
 	}
-</style>
\ No newline at end of file
+</style>

uni_modules/uni-loading/components/uni-loading/uni-loading.uvue

@@ -21,7 +21,7 @@
 </template>
 <script>
 	import Circle from './circle.uvue'
-	// import Snow from './snow.uvue'
+  // TODO 性能问题，其他类型暂时不对外开放
 	// import Icon from './icon.uvue'
 	// import UniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.uvue'
 
@@ -161,4 +161,4 @@
 		transform: rotate(0deg);
 	}
 
-</style>
\ No newline at end of file
+</style>

uni_modules/uni-loading/package.json

 {
 	"id": "uni-loading",
 	"displayName": "uni-loading",
-	"version": "1.0.1",
+	"version": "1.0.4",
 	"description": "加载动画组件多用在页面内数据加载时，提供一个loading动画，列表的上拉加载，下拉刷新等都需要加载动画",
 	"keywords": [
         "loading",