feat: 调整代码支持web端

components/uni-collapse-item/uni-collapse-item.vue

@@ -35,8 +35,8 @@
 			return {
 				height: 0,
 				is_open: this.open as boolean,
-				boxNode: null as Element | null,
-				contentNode: null as Element | null,
+				boxNode: null as UniElement | null,
+				contentNode: null as UniElement | null,
 			};
 		},
 		watch: {
@@ -51,8 +51,8 @@
 			$dispatch(this, 'UniCollapse', 'init', this)
 		},
 		mounted() {
-			this.boxNode = this.$refs['boxRef'] as Element;
-			this.contentNode = this.$refs['contentRef'] as Element;
+			this.boxNode = this.$refs['boxRef'] as UniElement;
+			this.contentNode = this.$refs['contentRef'] as UniElement;
 			// this.openCollapse(this.open)
 		},
 		methods: {
@@ -67,12 +67,12 @@
 			openOrClose(open: boolean) {
 				const boxNode = this.boxNode?.style!;
 				const contentNode = this.contentNode?.style!;
-				let hide = open ? 'flex' : 'none';
+				let hide = open ? 'flex' : 'none';
 				const opacity = open ? 1 : 0
 				let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
 				boxNode.setProperty('display', hide);
 				this.$nextTick(() => {
-					contentNode.setProperty('transform', ani_transform);
+					contentNode.setProperty('transform', ani_transform);
 					contentNode.setProperty('opacity', opacity);
 				})
 			}
@@ -80,9 +80,9 @@
 	}
 </script>
 
-<style scoped>
-	.uni-collapse-item {
-		background-color: #fff;
+<style scoped>
+	.uni-collapse-item {
+		background-color: #fff;
 	}
 	.uni-collapse-item__title {
 		flex-direction: row;
@@ -90,7 +90,7 @@
 		padding: 12px;
 		background-color: #fff;
 	}
-
+
 	.down_arrow {
 		width: 8px;
 		height: 8px;
@@ -113,11 +113,11 @@
 		font-size: 14px;
 		font-weight: 400;
 	}
-
-	.open--active {
-		/* background-color: #f0f0f0; */
-		color: #bbb;
-	}
+
+	.open--active {
+		/* background-color: #f0f0f0; */
+		color: #bbb;
+	}
 
 	.is-disabled {
 		color: #999;
@@ -132,7 +132,7 @@
 		width: 100%;
 /* 		transition-property: transform , opacity;
 		transition-duration: 0.2s; */
-		transform: translateY(-100%);
+		transform: translateY(-100%);
 		opacity: 0;
 	}
-</style>
+</style>

pages.json

@@ -331,6 +331,7 @@
         "navigationBarTitleText": "render function"
       }
     },
+    // #ifdef APP
     {
       "path": "pages/composition/mixins/mixins",
       "style": {
@@ -343,6 +344,7 @@
         "navigationBarTitleText": "mixins-page-2"
       }
     },
+    // #endif
     {
       "path": "pages/composition/provide/provide",
       "style": {
@@ -493,12 +495,14 @@
         "navigationBarTitleText": "toRef"
       }
     },
+    // #ifdef APP
     {
       "path": "pages/composition-api/reactivity/to-value/to-value",
       "style": {
         "navigationBarTitleText": "toValue"
       }
     },
+    // #endif
     {
       "path": "pages/composition-api/reactivity/to-refs/to-refs",
       "style": {
@@ -584,7 +588,6 @@
       }
     }
   ],
-  // #ifdef APP
   "tabBar": {
     "color": "#7A7E83",
     "selectedColor": "#007AFF",
@@ -601,7 +604,6 @@
       }
     ]
   },
-  // #endif
   "globalStyle": {
     "pageOrientation": "portrait",
     "navigationBarTitleText": "Hello UVUE",

pages/component-instance/methods/call-method-uni-element.uvue

@@ -12,7 +12,7 @@
       }
     },
     onReady() {
-      // 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)Element
+      // 通过组件 ref 属性获取组件实例, Uni组件名(驼峰)UniElement
       this.$slider1 = this.$refs['slider1'] as UniSliderElement;
     },
     methods: {

pages/component-instance/options/options.uvue

@@ -20,7 +20,7 @@ export default {
     }
   },
   mounted () {
-    this.name = this.$options.name
+    this.name = this.$options.name!
   },
   methods: {
     // getCustomKey (): string {

pages/composition-api/reactivity/readonly/readonly.uvue

@@ -34,9 +34,11 @@
     data.arr.push('d')
   }
 
+  // #ifdef APP
   const updateReadonlyData = () => {
     readonlyData.str = 'new readonly str'
     readonlyData.num++
     readonlyData.arr.push('e')
   }
+  // #endif
 </script>
\ No newline at end of file

pages/composition-api/reactivity/shallow-readonly/shallow-readonly.uvue

@@ -29,6 +29,7 @@
     } as StateNested
   } as State)
 
+  // #ifdef APP
   const incrementStateCount = () => {
     state.count++
   }
@@ -36,6 +37,7 @@
   const incrementStateNestedCount = () => {
     state.nested.count++
   }
+  // #endif
 
   const updatePageRender = () => {
     pageKey.value = Date.now()

pages/composition-api/reactivity/watch-effect/watch-effect.uvue

@@ -43,16 +43,16 @@
     arr : number[]
   }
 
-  const countRef = ref(null)
+  const countRef = ref<UniElement | null>(null)
   const count = ref(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
   const watchCountTriggerNum = ref(0)
 
-  const stopWatchCount = watchEffect((onCleanup : OnCleanup) => {
+  const stopWatchCount = watchEffect((onCleanup: OnCleanup) => {
     if (countRef.value !== null) {
-      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value as Element).getAttribute('value')}`
+      watchCountRes.value = `count: ${count.value}, count ref text (flush sync): ${(countRef.value as UniElement).getAttribute('value')}`
     } else {
       watchCountRes.value = `count: ${count.value}, count ref text (flush sync): `
     }
@@ -95,11 +95,11 @@
     watchObjRes.value = `obj: ${JSON.stringify(obj)}`
   })
 
-  const objStrRef = ref(null)
+  const objStrRef = ref<UniElement | null>(null)
   const watchObjStrRes = ref('')
   watchEffect(() => {
     if (objStrRef.value !== null) {
-      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value as Element).getAttribute('value')}`
+      watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): ${(objStrRef.value as UniElement).getAttribute('value')}`
     } else {
       watchObjStrRes.value = `str: ${obj.str}, obj.str ref text (flush pre): `
     }
@@ -108,11 +108,11 @@
     flush: 'pre',
   })
 
-  const objBoolRef = ref(null)
+  const objBoolRef = ref<UniElement | null>(null)
   const watchObjBoolRes = ref('')
   watchEffect(() => {
     if (objBoolRef.value !== null) {
-      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value as Element).getAttribute('value')}`
+      watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): ${(objBoolRef.value as UniElement).getAttribute('value')}`
     } else {
       watchObjBoolRes.value = `bool: ${obj.bool}, obj.bool ref text (flush post): `
     }

pages/composition-api/reactivity/watch/watch.uvue

@@ -43,28 +43,28 @@
     arr : number[]
   }
 
-  const countRef = ref(null)
+  const countRef = ref<UniElement | null>(null)
   const count = ref(0)
   const watchCountRes = ref('')
   const watchCountCleanupRes = ref('')
   const watchCountTrackNum = ref(0)
   const watchCountTriggerNum = ref(0)
 
-  const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup : OnCleanup) => {
-    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value as Element).getAttribute('value')}`
+  const stopWatchCount = watch(count, (count : number, prevCount : number, onCleanup: OnCleanup) => {
+    watchCountRes.value = `count: ${count}, prevCount: ${prevCount}, count ref text (flush sync): ${(countRef.value as UniElement).getAttribute('value')}`
     const cancel = () => {
       watchCountCleanupRes.value = `watch count cleanup: ${count}`
     }
     onCleanup(cancel)
-  }, {
+  }, {
     // 侦听器在响应式依赖改变时立即触发
-    flush: 'sync',
+    flush: 'sync',
     // 响应属性或引用作为依赖项被跟踪时调用
     onTrack(event : DebuggerEvent) {
       if (event.type === 'get') {
         watchCountTrackNum.value++
       }
-    },
+    },
     // 侦听器回调被依赖项的变更触发时调用
     onTrigger(event : DebuggerEvent) {
       if (event.type === 'set') {
@@ -88,24 +88,24 @@
 
   // immediate: true 第一次触发, 旧值应该是 undefined, 现在 app 是初始值
   const watchObjRes = ref('')
-  watch(obj, (obj : Obj, prevObj : Obj) => {
+  watch(obj, (obj : Obj, prevObj ?: Obj) => {
     watchObjRes.value = `obj: ${JSON.stringify(obj)}, prevObj: ${JSON.stringify(prevObj)}`
   }, { immediate: true })
 
-  const objStrRef = ref(null)
+  const objStrRef = ref<UniElement | null>(null)
   const watchObjStrRes = ref('')
   watch(() : string => obj.str, (str : string, prevStr : string) => {
-    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value as Element).getAttribute('value')}`
-  }, {
+    watchObjStrRes.value = `str: ${str}, prevStr: ${prevStr}, obj.str ref text (flush pre): ${(objStrRef.value as UniElement).getAttribute('value')}`
+  }, {
     // 侦听器在组件渲染之前触发
     flush: 'pre',
   })
 
-  const objBoolRef = ref(null)
+  const objBoolRef = ref<UniElement | null>(null)
   const watchObjBoolRes = ref('')
   watch(() : boolean => obj.bool, (bool : boolean, prevBool : boolean) => {
-    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value as Element).getAttribute('value')}`
-  }, {
+    watchObjBoolRes.value = `bool: ${bool}, prevBool: ${prevBool}, obj.bool ref text (flush post): ${(objBoolRef.value as UniElement).getAttribute('value')}`
+  }, {
     // 侦听器延迟到组件渲染之后触发
     flush: 'post'
   })

pages/composition/mixins/components/Comp1.uvue

@@ -47,7 +47,7 @@ export default {
     }
   },
   mounted(){
-    const rootElement = this.$refs['mixin-comp-root'] as Element
+    const rootElement = this.$refs['mixin-comp-root'] as UniElement
     this.rootElementTitle = rootElement.getAttribute('title')
   },
   methods: {

pages/composition/mixins/components/Comp2.uvue

@@ -48,7 +48,7 @@ export default {
     }
   },
   mounted(){
-    const rootElement = this.$refs['mixin-comp-root'] as Element
+    const rootElement = this.$refs['mixin-comp-root'] as UniElement
     this.rootElementTitle = rootElement.getAttribute('title')
   },
   watch: {

pages/tab-bar/composition-api.uvue

@@ -146,7 +146,11 @@
           {
             name: 'toValue',
             url: 'to-value',
+            // #ifdef APP
             enable: true,
+            // #else
+            enable: false,
+            // #endif
           },
           {
             name: 'toRefs',