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>
+  <!-- #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'
+  let elId = 0
   export default {
-		name: "uni-loading",
+    name: "circle",
     props: {
-
       speed: {
         type: Number,
         default: 16,
@@ -17,46 +24,66 @@
       },
       color: {
         type: String,
-				default: '',
+        default: '#666',
       }
     },
     data() {
-			const elId = `Uni_${(Math.random() * 10e5).toInt().toString(36)}`
+      // 防止多调用，随机元素id
+      elId += 1
+      const elID = `Uni_Load_Circle_${elId}`
       return {
-				elId: elId,
+        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.circular(ctx)
+        this.build_circular(ctx)
       },
-			circular(ctx : DrawableContext) {
+
+      /**
+       * 构建圆环动画
+       */
+      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 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
         }
@@ -110,4 +137,51 @@
     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,

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'
 

uni_modules/uni-loading/package.json

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