fix(web): 优化 web 端不兼容 api 及 代码示例

App.uvue

-<script lang="uts">
-import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'
-
-let firstBackTime = 0
-export default {
-  onLaunch: function (options) {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 1000)
-    setAppLaunchPath(options.path)
-    console.log('App Launch')
-
-    const performance = uni.getPerformance()
-    const observer: PerformanceObserver = performance.createObserver((entryList: PerformanceObserverEntryList) => {
-      console.log('observer:entryList.getEntries()')
-      console.log(entryList.getEntries())
-    })
-    observer.observe({
-      entryTypes: ['render', 'navigation'],
-    } as PerformanceObserverOptions)
-  },
-  onShow: function (options) {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum + 100)
-    setAppShowPath(options.path)
-    console.log('App Show')
-  },
-  onHide: function () {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 100)
-    console.log('App Hide')
-  },
-  onLastPageBackPress: function () {
-    // 自动化测试
-    setLifeCycleNum(state.lifeCycleNum - 1000)
-    console.log('App LastPageBackPress')
-    if (firstBackTime == 0) {
-      uni.showToast({
-        title: '再按一次退出应用',
-        position: 'bottom',
-      })
-      firstBackTime = Date.now()
-      setTimeout(() => {
-        firstBackTime = 0
-      }, 2000)
-    } else if (Date.now() - firstBackTime < 2000) {
-      firstBackTime = Date.now()
-      uni.exit()
-    }
-  },
-  onExit() {
-    console.log('App Exit')
-  },
-  methods: {
-    checkLaunchPath(): boolean{
-      const HOME_PATH = '/pages/index'
-      if(state.appLaunchPath != HOME_PATH){
-        return false
-      }
-      if(state.appShowPath != HOME_PATH){
-        return false
-      }
-      return true
-    }
-  }
-}
-</script>
-
-<style>
-/* @font-face {
-    font-family: uniicons;
-    font-weight: normal;
-    font-style: normal;
-    src: url('./static/fonts/uni.ttf') format('truetype');
-  } */
-
-.page {
-  padding: 15px;
-}
-
-.uni-panel {
-  margin-bottom: 12px;
-}
-
-.uni-panel-h {
-  background-color: #ffffff;
-  flex-direction: row;
-  align-items: center;
-  padding: 12px;
-}
-
-.uni-panel-h-on {
-  background-color: #f0f0f0;
-}
-
-.uni-panel-text {
-  color: #000000;
-  font-size: 14px;
-  font-weight: normal;
-}
-
-.uni-panel-icon-on {
-  transform: rotate(180deg);
-}
-
-.uni-navigate-item {
-  flex-direction: row;
-  align-items: center;
-  background-color: #ffffff;
-  border-top-style: solid;
-  border-top-color: #f0f0f0;
-  border-top-width: 1px;
-  padding: 12px;
-  justify-content: space-between;
-}
-
-.uni-navigate-item:active {
-  background-color: #f8f8f8;
-}
-
-.uni-navigate-text {
-  color: #000000;
-  font-size: 12px;
-  opacity: 0.8;
-}
-
-.uni-navigate-icon {
-  margin-left: 15px;
-  color: #999999;
-  font-size: 14px;
-  font-weight: normal;
-}
-
-.text-disabled {
-  color: #a0a0a0;
-}
-
-.list-item-text {
-  line-height: 36px;
-}
-
-.split-title {
-  margin: 20px 0 5px;
-  padding: 5px 0;
-  border-bottom: 1px solid #dfdfdf;
-}
-
-.btn-view {
-  margin: 10px 0;
-  padding: 10px;
-  border: 1px solid #dfdfdf;
-  border-radius: 3px;
-}
-</style>
+<script lang="uts">
+	import { state, setLifeCycleNum, setAppLaunchPath, setAppShowPath } from './store/index.uts'
+
+	let firstBackTime = 0
+	export default {
+		onLaunch: function (options) {
+			// 自动化测试
+			setLifeCycleNum(state.lifeCycleNum + 1000)
+			setAppLaunchPath(options.path)
+			console.log('App Launch')
+			// #ifdef UNI-APP-X && APP-ANDROID
+			const performance = uni.getPerformance()
+			const observer : PerformanceObserver = performance.createObserver((entryList : PerformanceObserverEntryList) => {
+				console.log('observer:entryList.getEntries()')
+				console.log(entryList.getEntries())
+			})
+			observer.observe({
+				entryTypes: ['render', 'navigation'],
+			} as PerformanceObserverOptions)
+			// #endif
+		},
+		onShow: function (options) {
+			// 自动化测试
+			setLifeCycleNum(state.lifeCycleNum + 100)
+			setAppShowPath(options.path)
+			console.log('App Show')
+		},
+		onHide: function () {
+			// 自动化测试
+			setLifeCycleNum(state.lifeCycleNum - 100)
+			console.log('App Hide')
+		},
+		onLastPageBackPress: function () {
+			// 自动化测试
+			setLifeCycleNum(state.lifeCycleNum - 1000)
+			console.log('App LastPageBackPress')
+			if (firstBackTime == 0) {
+				uni.showToast({
+					title: '再按一次退出应用',
+					position: 'bottom',
+				})
+				firstBackTime = Date.now()
+				setTimeout(() => {
+					firstBackTime = 0
+				}, 2000)
+			} else if (Date.now() - firstBackTime < 2000) {
+				firstBackTime = Date.now()
+				uni.exit()
+			}
+		},
+		onExit() {
+			console.log('App Exit')
+		},
+		methods: {
+			checkLaunchPath() : boolean {
+				const HOME_PATH = '/pages/index'
+				if (state.appLaunchPath != HOME_PATH) {
+					return false
+				}
+				if (state.appShowPath != HOME_PATH) {
+					return false
+				}
+				return true
+			}
+		}
+	}
+</script>
+
+<style>
+	/* @font-face {
+    font-family: uniicons;
+    font-weight: normal;
+    font-style: normal;
+    src: url('./static/fonts/uni.ttf') format('truetype');
+  } */
+
+	.page {
+		padding: 15px;
+	}
+
+	.uni-panel {
+		margin-bottom: 12px;
+	}
+
+	.uni-panel-h {
+		background-color: #ffffff;
+		flex-direction: row;
+		align-items: center;
+		padding: 12px;
+	}
+
+	.uni-panel-h-on {
+		background-color: #f0f0f0;
+	}
+
+	.uni-panel-text {
+		color: #000000;
+		font-size: 14px;
+		font-weight: normal;
+	}
+
+	.uni-panel-icon-on {
+		transform: rotate(180deg);
+	}
+
+	.uni-navigate-item {
+		flex-direction: row;
+		align-items: center;
+		background-color: #ffffff;
+		border-top-style: solid;
+		border-top-color: #f0f0f0;
+		border-top-width: 1px;
+		padding: 12px;
+		justify-content: space-between;
+	}
+
+	.uni-navigate-item:active {
+		background-color: #f8f8f8;
+	}
+
+	.uni-navigate-text {
+		color: #000000;
+		font-size: 12px;
+		opacity: 0.8;
+	}
+
+	.uni-navigate-icon {
+		margin-left: 15px;
+		color: #999999;
+		font-size: 14px;
+		font-weight: normal;
+	}
+
+	.text-disabled {
+		color: #a0a0a0;
+	}
+
+	.list-item-text {
+		line-height: 36px;
+	}
+
+	.split-title {
+		margin: 20px 0 5px;
+		padding: 5px 0;
+		border-bottom: 1px solid #dfdfdf;
+	}
+
+	.btn-view {
+		margin: 10px 0;
+		padding: 10px;
+		border: 1px solid #dfdfdf;
+		border-radius: 3px;
+	}
+</style>
\ No newline at end of file

pages/component-instance/attrs/child.uvue

@@ -15,7 +15,7 @@
   </view>
 </template>
 
-<script>
+<script lang='uts'>
 export default {
   emits: ['result'],
   props: {
@@ -25,14 +25,30 @@ export default {
     }
   },
   computed: {
-    hasPropsAttrs (): boolean {
+    hasPropsAttrs(): boolean {
+      // #ifdef UNI-APP-X && APP-ANDROID
       return this.$attrs.has('val')
+      // #endif
+      // #ifdef UNI-APP-X && WEB
+      return !!this.$attrs['val']
+      // #endif
+
     },
     hasEmitsAttr (): boolean {
+      // #ifdef UNI-APP-X && APP-ANDROID
       return this.$attrs.has('result')
+      // #endif
+      // #ifdef UNI-APP-X && WEB
+      return !!this.$attrs['result']
+      // #endif
     },
     hasAttrs (): boolean {
+      // #ifdef UNI-APP-X && APP-ANDROID
       return this.$attrs.has('class')
+      // #endif
+      // #ifdef UNI-APP-X && WEB
+      return !!this.$attrs['class']
+      // #endif
     }
   }
 }

pages/component-instance/parent/child.uvue

@@ -19,7 +19,11 @@ export default {
   },
   methods: {
     testFunction () {
+			// #ifdef UNI-APP-X && APP-ANDROID
       this.callbackValue = this.$parent!.$callMethod('testFunction') as string
+			// #endif
+			// TODO: 非 app-android 简单绕过, web 无法通过 this.$parent.functionName 调用父组件 methods 中的方法
+			this.callbackValue = 'parentFunctionResult'
     }
   }
 }

pages/component-instance/refs/refs.uvue

@@ -5,7 +5,7 @@
   </view>
 </template>
 
-<script>
+<script lang='uts'>
 // import child from './child.uvue'
 
 export default {
@@ -18,7 +18,7 @@ export default {
     }
   },
   mounted () {
-    const nodeRef = this.$refs.get('node')
+    const nodeRef = this.$refs['node']
 
     this.existRef = nodeRef !== null
 

pages/component-instance/slots/slot.uvue

@@ -5,15 +5,15 @@
   </view>
 </template>
 
-<script>
+<script lang='uts'>
 export default {
   mounted () {
     console.log(this.hasSlots())
   },
   methods: {
     hasSlots (): boolean {
-      const header = this.$slots.get('header')
-      const footer = this.$slots.get('footer')
+      const header = this.$slots['header']
+      const footer = this.$slots['footer']
 
       return header !== null && footer !== null
     }

pages/lifecycle/component/component.test.js

@@ -28,6 +28,7 @@ describe('component-lifecycle', () => {
   })
   it('beforeUpdate updated', async () => {
 		const component = await page.$('.component-lifecycle')
+		console.log('component', component)
 		await component.setData({
 			title: 'component for lifecycle test new title'
 		})

pages/lifecycle/page/page.test.js

@@ -4,80 +4,81 @@ let page
 let lifeCycleNum
 
 describe('app-lifecycle', () => {
-  it('onLaunch onShow', async () => {
-    page = await program.reLaunch(HOME_PATH)
-    await page.waitFor(700)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(1100)
-  })
-  it('onLastPageBackPress', async () => {
-    page = await program.navigateBack()
-    await page.waitFor(700)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(100)
-
-    await page.callMethod('setLifeCycleNum', 0)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(0)
-  })
+	it('onLaunch onShow', async () => {
+		page = await program.reLaunch(HOME_PATH)
+		await page.waitFor(700)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(1100)
+	})
+	it('onLastPageBackPress', async () => {
+		if (process.env.uniTestPlatformInfo.startsWith('android')) {
+			page = await program.navigateBack()
+			await page.waitFor(700)
+			lifeCycleNum = await page.callMethod('getLifeCycleNum')
+			expect(lifeCycleNum).toBe(100)
+		}
+		await page.callMethod('setLifeCycleNum', 0)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(0)
+	})
 })
 
 describe('page-lifecycle', () => {
-  afterAll(async () => {
-    const resetLifecycleNum = 1100
-    await page.callMethod('setLifeCycleNum', resetLifecycleNum)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(resetLifecycleNum)
-  })
+	afterAll(async () => {
+		const resetLifecycleNum = 1100
+		await page.callMethod('setLifeCycleNum', resetLifecycleNum)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(resetLifecycleNum)
+	})
 
-  it('onLoad onShow onReady', async () => {
-    page = await program.reLaunch(PAGE_PATH)
-    await page.waitFor(700)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(120)
-    await page.callMethod('setLifeCycleNum', 0)
-  })
-  it('onPullDownRefresh', async () => {
-    await page.callMethod('pullDownRefresh')
-    await page.waitFor(1500)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(10)
-    await page.callMethod('setLifeCycleNum', 0)
-  })
-  it('onPageScroll onReachBottom', async () => {
-    await program.pageScrollTo(2000)
-    const data = await page.data()
-    expect(data.isScrolled).toBe(true)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(10)
-    await page.callMethod('setLifeCycleNum', 0)
-  })
-  it('onHide', async () => {
-    page = await program.navigateTo(HOME_PATH)
-    await page.waitFor('view')
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(-10)
-    page = await program.navigateBack()
-    await page.waitFor('view')
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(0)
-  })
-  it('onUnload', async () => {
-    page = await program.redirectTo(HOME_PATH)
-    await page.waitFor(700)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(-100)
-    await page.callMethod('setLifeCycleNum', 0)
-  })
-  it('onBackPress', async () => {
-    page = await program.navigateTo(PAGE_PATH)
-    await page.waitFor(700)
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(120)
-    page = await program.navigateBack()
-    await page.waitFor('view')
-    lifeCycleNum = await page.callMethod('getLifeCycleNum')
-    expect(lifeCycleNum).toBe(10)
-    await page.callMethod('setLifeCycleNum', 0)
-  })
+	it('onLoad onShow onReady', async () => {
+		page = await program.reLaunch(PAGE_PATH)
+		await page.waitFor(700)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(120)
+		await page.callMethod('setLifeCycleNum', 0)
+	})
+	it('onPullDownRefresh', async () => {
+		await page.callMethod('pullDownRefresh')
+		await page.waitFor(1500)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(10)
+		await page.callMethod('setLifeCycleNum', 0)
+	})
+	it('onPageScroll onReachBottom', async () => {
+		await program.pageScrollTo(2000)
+		const data = await page.data()
+		expect(data.isScrolled).toBe(true)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(10)
+		await page.callMethod('setLifeCycleNum', 0)
+	})
+	it('onHide', async () => {
+		page = await program.navigateTo(HOME_PATH)
+		await page.waitFor('view')
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(-10)
+		page = await program.navigateBack()
+		await page.waitFor('view')
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(0)
+	})
+	it('onUnload', async () => {
+		page = await program.redirectTo(HOME_PATH)
+		await page.waitFor(700)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(-100)
+		await page.callMethod('setLifeCycleNum', 0)
+	})
+	it('onBackPress', async () => {
+		page = await program.navigateTo(PAGE_PATH)
+		await page.waitFor(700)
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(120)
+		page = await program.navigateBack()
+		await page.waitFor('view')
+		lifeCycleNum = await page.callMethod('getLifeCycleNum')
+		expect(lifeCycleNum).toBe(10)
+		await page.callMethod('setLifeCycleNum', 0)
+	})
 })
\ No newline at end of file

pages/state/data/data.uvue

@@ -35,7 +35,7 @@
   </view>
 </template>
 
-<script>
+<script lang='uts'>
   type myObj = { name : string, age : number };
 
   // 理论上支持但不支持的写法
@@ -53,7 +53,7 @@
     onLoad() {
       console.log('获取所有 data 中的变量',this.$data);
       console.log('获取data中的变量num',this.num);
-      console.log('获取data中的变量num',this.$data.get('num'));
+      console.log('获取data中的变量num',this.$data['num']);
     }
   }
 </script>
@@ -73,4 +73,4 @@
 .column{
   flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>

pages/state/methods/methods.uvue

@@ -12,7 +12,7 @@
   </view>
 </template>
 
-<script>
+<script lang='uts'>
   export default {
     data() {
       return {
@@ -25,7 +25,7 @@
         this.num ++
       },
       getMultiply100Num() : number{
-        return num * 100
+        return this.num * 100
       }
     }
   }