feat(components): 通用属性 通用事件

pages.json

@@ -14,6 +14,18 @@
         "navigationBarTitleText": "view"
       }
     },
+    {
+      "path": "pages/component/view/general-attribute",
+      "style": {
+        "navigationBarTitleText": "general-attribute"
+      }
+    },
+    {
+      "path": "pages/component/view/general-event",
+      "style": {
+        "navigationBarTitleText": "general-event"
+      }
+    },
     {
       "path": "pages/component/scroll-view/scroll-view",
       "style": {
@@ -164,12 +176,6 @@
         "navigationBarTitleText": "redirectPage"
       }
     },
-		{
-			"path": "pages/component/general-event/general-event",
-			"style": {
-				"navigationBarTitleText": "general-event"
-			}
-		},
     {
       "path": "pages/tabBar/API",
       "style": {
@@ -781,27 +787,27 @@
         "navigationBarTitleText": "list-view-autotest",
         "enablePullDownRefresh": false
       }
-		}, {
+    },
+    {
       "path": "pages/component/scroll-view/scroll-view-props",
       "style": {
         "navigationBarTitleText": "非下拉刷新的scroll-view属性示例",
         "enablePullDownRefresh": false
       }
-		}, {
+    },
+    {
       "path": "pages/component/scroll-view/scroll-view-refresher-props",
       "style": {
         "navigationBarTitleText": "下拉刷新的scroll-view属性示例",
         "enablePullDownRefresh": false
       }
-		}
-	    ,{
-            "path" : "pages/component/scroll-view/scroll-view-custom-refresher-props",
-            "style" :                                                                                    
+    },
     {
+      "path": "pages/component/scroll-view/scroll-view-custom-refresher-props",
+      "style": {
         "navigationBarTitleText": "自定义下拉刷新的scroll-view属性示例",
         "enablePullDownRefresh": false
       }
-            
     }
   ],
   "globalStyle": {
@@ -818,7 +824,8 @@
     "selectedColor": "#007AFF",
     "borderStyle": "black",
     "backgroundColor": "#F8F8F8",
-		"list": [{
+    "list": [
+      {
         "pagePath": "pages/tabBar/component",
         "iconPath": "static/component.png",
         "selectedIconPath": "static/componentHL.png",
@@ -847,10 +854,12 @@
   "condition": {
     //模式配置，仅开发期间生效
     "current": 0, //当前激活的模式(list 的索引项)
-		"list": [{
+    "list": [
+      {
         "name": "", //模式名称
         "path": "", //启动页面，必选
         "query": "" //启动参数，在页面的onLoad函数里面得到
-		}]
+      }
+    ]
   }
 }
\ No newline at end of file

pages/component/view/general-attribute.test.js

+const PAGE_PATH = '/pages/component/view/general-attribute'
+
+describe('general attribute', () => {
+  let page
+
+  beforeAll(async () => {
+    page = await program.navigateTo(PAGE_PATH)
+    await page.waitFor(1000)
+  })
+  it('screenshot', async () => {
+    const image = await program.screenshot()
+    expect(image).toMatchImageSnapshot()
+  })
+  it('validateGeneralAttributes', async () => {
+    const button = await page.$('.btn')
+    await button.tap()
+    expect(await button.text()).toBe('基础属性验证成功')
+  })
+})

pages/component/view/general-attribute.uvue

+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+    <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt container">
+        <view :id="generalId" :class="generalClass" :name="generalName" :title="generalTitle" :data-test="generalData" style="background-color: aqua" ref="general-target"> </view>
+        <button class="btn uni-common-mt" @click="validateGeneralAttributes">{{ validateGeneralAttrText }}</button>
+        <view class="view-class" :hover-class="hoverClass" ref="view-target">
+          <text>按下 50 ms 后背景变红</text>
+          <text>抬起 400 ms 后背景恢复</text>
+        </view>
+        <view class="view-class" :hover-class="hoverClass" :hover-start-time="1000" :hover-stay-time="1000" ref="view-target">
+          <text>按下 1000 ms 后背景变红</text>
+          <text>抬起 1000 ms 后背景恢复</text>
+        </view>
+      </view>
+    </view>
+    <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+export default {
+  data() {
+    return {
+      title: 'general-attribute',
+      generalId: 'general-id',
+      generalClass: 'general-class',
+      generalName: 'general-name',
+      generalTitle: 'general-title',
+      generalData: 'general-data',
+      validateGeneralAttrText: '验证基础属性',
+      hoverClass: 'hover-class',
+      validateViewAttrText: '验证 view 属性',
+    }
+  },
+  methods: {
+    validateGeneralAttributes() {
+      const generalTarget = this.$refs.get('general-target') as INode
+      const generalId = generalTarget.getAttribute('id')
+      if (generalId != this.generalId) {
+        this.validateGeneralAttrText = '基础属性 id 验证失败'
+        return
+      }
+      const classList = generalTarget.ext['classList'] as string[]
+      if (!classList.includes('general-class')) {
+        this.validateGeneralAttrText = '基础属性 class 验证失败'
+        return
+      }
+      const generalName = generalTarget.getAttribute('name')
+      if (generalName != this.generalName) {
+        this.validateGeneralAttrText = '基础属性 name 验证失败'
+        return
+      }
+      const generalTitle = generalTarget.getAttribute('title')
+      if (generalTitle != this.generalTitle) {
+        this.validateGeneralAttrText = '基础属性 title 验证失败'
+        return
+      }
+      const generalData = generalTarget.getAttribute('data-test')
+      if (generalData != this.generalData) {
+        this.validateGeneralAttrText = '基础属性 data-test 验证失败'
+        return
+      }
+      this.validateGeneralAttrText = '基础属性验证成功'
+    },
+  },
+}
+</script>
+
+<style>
+.general-class {
+  margin: 20px 0 0 50px;
+  width: 240px;
+  height: 100px;
+  background-color: antiquewhite;
+}
+.view-class {
+  margin: 20px 0 0 50px;
+  padding: 10px;
+  width: 240px;
+  height: 100px;
+  background-color: antiquewhite;
+}
+.view-class text {
+  text-align: center;
+}
+.hover-class {
+  background-color: red;
+}
+</style>

pages/component/view/general-event.test.js

+const PAGE_PATH = '/pages/component/view/general-event'
+
+describe('event trigger sequence', () => {
+  let page
+  let el
+  beforeAll(async () => {
+    page = await program.navigateTo(PAGE_PATH)
+    await page.waitFor(1000)
+    el = await page.$('.target')
+  })
+	
+  it('touch', async () => {
+    await el.touchstart({
+      touches: [
+        {
+          identifier: 1,
+          pageX: 100,
+          pageY: 100,
+        },
+      ],
+      changedTouches: [
+        {
+          identifier: 1,
+          pageX: 100,
+          pageY: 100,
+        },
+      ],
+    })
+    await el.touchmove({
+      touches: [
+        {
+          identifier: 1,
+          pageX: 100,
+          pageY: 100,
+        },
+      ],
+      changedTouches: [
+        {
+          identifier: 1,
+          pageX: 101,
+          pageY: 101,
+        },
+      ],
+    })
+    await el.touchend({
+      touches: [],
+      changedTouches: [
+        {
+          identifier: 1,
+          pageX: 101,
+          pageY: 101,
+        },
+      ],
+    })
+    const data = await page.data()
+    expect(data.onTouchStartTime).toBeLessThan(data.onTouchMoveTime)
+    expect(data.onTouchMoveTime).toBeLessThan(data.onTouchEndTime)
+  })
+
+  it('click', async () => {
+    await el.tap()
+    const data = await page.data()
+    expect(data.onTapTime).toBeLessThan(data.onClickTime)
+  })
+
+  it('longPress', async () => {
+    const now = Date.now()
+    await el.longpress()
+    const data = await page.data()
+    expect(now).toBeLessThan(data.onLongPressTime)
+  })
+})

pages/component/general-event/general-event.uvue → pages/component/view/general-event.uvue

@@ -5,111 +5,66 @@
     <view>
       <page-head :title="title"></page-head>
       <view class="uni-padding-wrap uni-common-mt container">
-        <view
-          class="target"
-          @click="onClick"
-          @touchstart="onTouchStart"
-          @touchmove="onTouchMove"
-          @touchend="onTouchEnd"
-          ></view>
-        <view v-if="clickEvent !== null">
-          <text class="title1">click Event: </text>
-          <text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
-        </view>
+        <view class="target" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @tap="onTap" @click="onClick" @longpress="onLongPress"></view>
         <view v-if="touchStartEvent !== null">
           <text class="title1">touchStart Event: </text>
           <text class="title2">touches: </text>
-          <template
-            v-for="(touch, index) in touchStartEvent!.touches"
-            :key="index"
-          >
+          <template v-for="(touch, index) in touchStartEvent!.touches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
           <text class="title2 uni-common-mt">changedTouches: </text>
-          <template
-            v-for="(touch, index) in touchStartEvent!.changedTouches"
-            :key="index"
-          >
+          <template v-for="(touch, index) in touchStartEvent!.changedTouches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
         </view>
         <view v-if="touchMoveEvent !== null">
           <text class="title1">touchMove Event: </text>
           <text class="title2">touches: </text>
-          <template
-            v-for="(touch, index) in touchMoveEvent!.touches"
-            :key="index"
-          >
+          <template v-for="(touch, index) in touchMoveEvent!.touches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
           <text class="title2 uni-common-mt">changedTouches: </text>
-          <template
-            v-for="(touch, index) in touchMoveEvent!.changedTouches"
-            :key="index"
-          >
+          <template v-for="(touch, index) in touchMoveEvent!.changedTouches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
         </view>
         <view v-if="touchEndEvent !== null">
           <text class="title1">touchEnd Event: </text>
           <text class="title2">touches: </text>
-          <template
-            v-if="touchEndEvent!.touches.length > 0"
-            v-for="(touch, index) in touchEndEvent!.touches"
-            :key="index"
-          >
+          <template v-if="touchEndEvent!.touches.length > 0" v-for="(touch, index) in touchEndEvent!.touches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
           <text class="title2 uni-common-mt">changedTouches: </text>
-          <template
-            v-for="(touch, index) in touchEndEvent!.changedTouches"
-            :key="index"
-          >
+          <template v-for="(touch, index) in touchEndEvent!.changedTouches" :key="index">
             <text class="title3">touch[{{ index }}]:</text>
             <text>pageX: {{ touch.pageX }}, pageY: {{ touch.pageY }}</text>
-            <text
-              >clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text
-            >
-            <text
-              >screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text
-            >
+            <text>clientX: {{ touch.clientX }}, clientY: {{ touch.clientY }}</text>
+            <text>screenX: {{ touch.screenX }}, screenY: {{ touch.screenY }}</text>
           </template>
         </view>
+        <view v-if="tapEvent !== null">
+          <text class="title1">tap Event: </text>
+          <text>x: {{ tapEvent!.x }}, y: {{ tapEvent!.y }}</text>
+        </view>
+        <view v-if="clickEvent !== null">
+          <text class="title1">click Event: </text>
+          <text>x: {{ clickEvent!.x }}, y: {{ clickEvent!.y }}</text>
+        </view>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -121,25 +76,49 @@ export default {
   data() {
     return {
       title: 'general-event',
-      clickEvent: null as MouseEvent | null,
+      onTouchStartTime: 0,
       touchStartEvent: null as TouchEvent | null,
+      onTouchMoveTime: 0,
       touchMoveEvent: null as TouchEvent | null,
+      onTouchEndTime: 0,
       touchEndEvent: null as TouchEvent | null,
+      onTapTime: 0,
+      tapEvent: null as MouseEvent | null,
+      onClickTime: 0,
+      clickEvent: null as MouseEvent | null,
+      onLongPressTime: 0,
     }
   },
   methods: {
-    onClick(e: MouseEvent){
-      this.clickEvent = e
-    },
     onTouchStart(e: TouchEvent){
       this.touchStartEvent = e
+      this.onTouchStartTime = Date.now()
+      console.warn('onTouchStart', this.onTouchStartTime)
     },
     onTouchMove(e: TouchEvent){
       this.touchMoveEvent = e
+      this.onTouchMoveTime = Date.now()
+      console.warn('onTouchMove', this.onTouchMoveTime)
     },
     onTouchEnd(e: TouchEvent){
       this.touchEndEvent = e
-    }
+      this.onTouchEndTime = Date.now()
+      console.warn('onTouchEnd', this.onTouchEndTime)
+    },
+    onTap(e: MouseEvent){
+      this.tapEvent = e
+      this.onTapTime = Date.now()
+      console.warn('onTap', this.onTapTime)
+    },
+    onClick(e: MouseEvent){
+      this.clickEvent = e
+      this.onClickTime = Date.now()
+      console.warn('onClick', this.onClickTime)
+    },
+    onLongPress(){
+      this.onLongPressTime = Date.now()
+      console.warn('onLongPress', this.onLongPressTime)
+    },
   },
 }
 </script>

pages/component/view/view.uvue

@@ -4,7 +4,7 @@
     <!-- #endif -->
     <view>
       <page-head title="view"></page-head>
-      <view class="uni-padding-wrap uni-common-mt">
+      <view class="uni-padding-wrap uni-common-mt uni-common-mb">
         <view>
           <text class="uni-hello-text">
             Flex是Flexible
@@ -232,6 +232,8 @@
             </view>
           </view>
         </view>
+        <button class="uni-common-mt" @click="goGeneralAttribute">更多属性测试</button>
+        <button class="uni-common-mt" @click="goGeneralEvent">更多事件测试</button>
       </view>
     </view>
     <!-- #ifdef APP -->
@@ -240,9 +242,18 @@
 </template>
 <script>
 export default {
-  data() {
-    return {}
+  methods: {
+    goGeneralAttribute(){
+      uni.navigateTo({
+        url: '/pages/component/view/general-attribute'
+      })
     },
+    goGeneralEvent(){
+      uni.navigateTo({
+        url: '/pages/component/view/general-event'
+      })
+    },
+  }
 }
 </script>
 

pages/tabBar/component.uvue

@@ -263,23 +263,6 @@ export default {
             pages: [] as Page[]
           }
           */
-        {
-          id: 'general-attr-event',
-          name: '通用属性和事件',
-          open: false,
-          pages: [
-            {
-              name: '通用属性',
-              url: 'general-attr',
-              enable: false,
-            },
-            {
-              name: '通用事件',
-              url: '/pages/component/general-event/general-event',
-              enable: true,
-            },
-          ] as Page[],
-        },
       ] as ListItem[],
       arrowUpIcon: '/static/icons/arrow-up.png',
       arrowDownIcon: '/static/icons/arrow-down.png',