添加WXS示例

pages.json

@@ -2304,6 +2304,13 @@
 					"vant-loading": "/wxcomponents/vant/loading/index"
 				}
 			}
+		},
+		{
+		  "path" : "pages/template/WXS/WXS",
+		  "style" :
+		  {
+		    "navigationBarTitleText" : "WXS"
+		  }
 		}
 		// #endif
 	],
@@ -3306,4 +3313,4 @@
 			]
 		}
 	]
-}
\ No newline at end of file
+}

pages/tabBar/template.uvue

@@ -222,6 +222,13 @@
             open: false,
             pages: [] as Page[],
           },
+          {
+            id: 'WXS',
+            url: 'WXS',
+            name: 'WXS',
+            open: false,
+            pages: [] as Page[],
+          },
           // #endif
         ] as ListItem[],
         arrowUpIcon: '/static/icons/arrow-up.png',

pages/template/WXS/WXS.test.js

+jest.setTimeout(30000);
+describe('test WXS', () => {
+  let page,movable;
+  if (!process.env.uniTestPlatformInfo.startsWith('mp')) {
+    it('not support', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/template/WXS/WXS')
+    await page.waitFor(3000);
+    movable = await page.$('.movable');
+  });
+
+  it('setColor', async () => {
+    const setColor = await page.$('.setColor')
+    await setColor.tap()
+    expect(await setColor.style('color')).toEqual('rgb(255, 0, 0)');
+  });
+
+  it('check title', async () => {
+    const titleText = await movable.text();
+    expect(titleText).toEqual('Hello');
+  });
+
+  it('touchstart-touchmove', async () => {
+    const offsetBefore = await movable.offset()
+    await movable.touchstart({
+      touches: [{
+        identifier: 0,
+        pageX: 92,
+        pageY: 93,
+        clientX: 92,
+        clientY: 93
+      }],
+      changedTouches: [{
+        identifier: 0,
+        pageX: 92,
+        pageY: 93,
+        clientX: 92,
+        clientY: 93
+      }]
+    })
+    await page.waitFor(100)
+    await movable.touchmove({
+      touches: [{
+        identifier: 0,
+        pageX: 207,
+        pageY: 385,
+        clientX: 207,
+        clientY: 385
+      }],
+      changedTouches: [{
+        identifier: 0,
+        pageX: 207,
+        pageY: 385,
+        clientX: 207,
+        clientY: 385
+      }]
+    })
+    await page.waitFor(100)
+    const offsetAfter = await movable.offset()
+    expect(offsetAfter.left).toBeGreaterThan(offsetBefore.left);
+    expect(offsetAfter.top).toBeGreaterThan(offsetBefore.top);
+  });
+});

pages/template/WXS/WXS.uvue

+<template>
+  <view class="area">
+    <view @click="test.setColor" class="setColor">点击变成红色: {{test.msg}}</view>
+    <view @touchstart="test.touchstart" @touchmove="test.touchmove" class="movable">{{test.msg}}</view>
+  </view>
+</template>
+<script module="test" lang="wxs">
+  var startX = 0
+  var startY = 0
+  var lastLeft = 50;
+  var lastTop = 50
+
+  function touchstart(event, ins) {
+    console.log("touchstart")
+    var touch = event.touches[0] || event.changedTouches[0]
+    startX = touch.pageX
+    startY = touch.pageY
+  }
+
+  function touchmove(event, ins) {
+    console.log("touchmove")
+    var touch = event.touches[0] || event.changedTouches[0]
+    var pageX = touch.pageX
+    var pageY = touch.pageY
+    var left = pageX - startX + lastLeft
+    var top = pageY - startY + lastTop
+    startX = pageX
+    startY = pageY
+    lastLeft = left
+    lastTop = top
+    ins.selectComponent('.movable').setStyle({
+      left: left + 'px',
+      top: top + 'px'
+    })
+    return false
+  }
+
+  module.exports = {
+    msg: 'Hello',
+    touchstart: touchstart,
+    touchmove: touchmove,
+    setColor: function(event,ins) {
+      ins.setStyle({
+        color: "red"
+      })
+    }
+  }
+</script>
+<script>
+  export default {
+    data() {
+      return {}
+    },
+    methods: {}
+  }
+</script>
+<style>
+  .area {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .movable {
+    position: absolute;
+    width: 100px;
+    height: 100px;
+    left: 50px;
+    top: 50px;
+    color: #fff000;
+    text-align: center;
+    line-height: 100px;
+    background-color: #ff5500;
+  }
+</style>