refactor: 确立独立子工程架构 (backend, admin, mpuniapp) 并同步更新 AGENTS.md 规范
这个提交包含在：
wikiboss
@@ -0,0 +1,82 @@
|
||||
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
|
||||
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
|
||||
const isIOS = platformInfo.startsWith('ios')
|
||||
const isAndroid = platformInfo.startsWith('android')
|
||||
const isHarmony = platformInfo.startsWith('harmony')
|
||||
const isApp = isIOS || isAndroid || isHarmony
|
||||
const isMP = platformInfo.startsWith('mp')
|
||||
const isDom2 = process.env.UNI_APP_X_DOM2 === "true"
|
||||
|
||||
describe('test title', () => {
|
||||
if (!(isApp || isMP)) {
|
||||
it('not supported skip', async () => {
|
||||
expect(1).toBe(1)
|
||||
})
|
||||
return
|
||||
}
|
||||
let page;
|
||||
beforeAll(async () => {
|
||||
page = await program.reLaunch('/pages/API/animate/animate');
|
||||
await page.waitFor('view');
|
||||
});
|
||||
|
||||
if (isApp) {
|
||||
it('run animate and take Snapshot', async () => {
|
||||
var renameFile = await page.$('#widthProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#height1')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#marginProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#paddingProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#borderProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#transformProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#positionProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#backgroundAndWidthProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#oneProperty1')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#oneProperty2')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#backgroundAndMarginLeftProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#backgroundAndTransformProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#backgroundProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#opacityProperty')
|
||||
await renameFile.tap()
|
||||
renameFile = await page.$('#borderColorMarginLeftProperty')
|
||||
await renameFile.tap()
|
||||
await page.waitFor(3000);
|
||||
const image = await program.screenshot({
|
||||
fullPage: true
|
||||
})
|
||||
expect(image).toSaveImageSnapshot();
|
||||
});
|
||||
}
|
||||
|
||||
if (isApp && !(isHarmony && !isDom2)) {
|
||||
it('finish event', async () => {
|
||||
await page.callMethod('startAnimate');
|
||||
await page.waitFor(5100);
|
||||
var testTriggerFinishEvent = await page.data('data.testTriggerFinishEvent')
|
||||
expect(testTriggerFinishEvent).toEqual(true)
|
||||
});
|
||||
}
|
||||
|
||||
if (!(isHarmony && !isDom2) || isMP) {
|
||||
it('cancel event', async () => {
|
||||
await page.callMethod('startAnimate');
|
||||
await page.waitFor(1100);
|
||||
await page.callMethod('cancelAnimate');
|
||||
await page.waitFor(300);
|
||||
var testTriggerCancelEvent = await page.data('data.testTriggerCancelEvent')
|
||||
expect(testTriggerCancelEvent).toEqual(true)
|
||||
});
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,401 @@
|
||||
<template>
|
||||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||||
<scroll-view style="flex:1">
|
||||
<!-- #endif -->
|
||||
<page-intro content="本页演示 uni.createAnimation 与 uni.createAnimateContext：点击开始/暂停/恢复/取消动画，可点击各 view 修改宽度、高度、margin、padding 等属性动画。"></page-intro>
|
||||
<view id="main" style="width: 100px;height: 100px; background-color: brown; transform: scale(1);"></view>
|
||||
|
||||
<button @click="startAnimate">开始动画</button>
|
||||
<!-- #ifndef !VUE3-VAPOR && APP-HARMONY -->
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<button @click="pauseAnimate">暂停动画</button>
|
||||
<!-- #endif -->
|
||||
<button @click="resumeAnimate">恢复动画</button>
|
||||
<button @click="cancelAnimate">取消动画</button>
|
||||
<!-- #endif -->
|
||||
|
||||
<image src="/static/test-image/logo.png" id="roll" style="width: 100px; height: 100px;margin: 10px;"></image>
|
||||
|
||||
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改宽度</text>
|
||||
<view id="widthProperty" style="width: 100px;height: 100px;background-color: brown;" @click="widthProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改高度</text>
|
||||
<view id="height1" style="width: 100px;height: 100px;background-color: brown;" @click="heightProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改margin</text>
|
||||
<view id="marginProperty" style="width: 100px;height: 100px;background-color: brown;" @click="marginProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改padding</text>
|
||||
<view id="paddingProperty" style="width: 100px;height: 100px;background-color: brown;" @click="paddingProperty">
|
||||
<view style="width: 50px;height: 50px;background-color: black;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改border颜色</text>
|
||||
<view id="borderProperty"
|
||||
style="width: 100px;height: 100px;background-color: brown;border-width: 10px;border-color: black;border-style: solid;"
|
||||
@click="borderProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改transform</text>
|
||||
<view id="transformProperty" style="width: 100px;height: 100px;background-color: brown;" @click="transformProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改position</text>
|
||||
<view id="positionProperty" style="width: 100px;height: 100px;background-color: brown;" @click="positionProperty"></view>
|
||||
</view>
|
||||
<!-- #ifndef MP-WEIXIN -->
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改背景色和宽度</text>
|
||||
<view id="backgroundAndWidthProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndWidthProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">执行的动画只有一个值1</text>
|
||||
<view id="oneProperty1" style="width: 100px;height: 100px;background-color: brown;" @click="oneProperty1"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">执行的动画只有一个值2</text>
|
||||
<view id="oneProperty2" style="width: 100px;height: 100px;background-color: brown;" @click="oneProperty2"></view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改背景色和margin-left(关键帧)</text>
|
||||
<view id="backgroundAndMarginLeftProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndMarginLeftProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改背景色和transform(关键帧)</text>
|
||||
<view id="backgroundAndTransformProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundAndTransformProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改背景色(关键帧)</text>
|
||||
<view id="backgroundProperty" style="width: 100px;height: 100px;background-color: brown;" @click="backgroundProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改opacity(关键帧)</text>
|
||||
<view id="opacityProperty" style="width: 100px;height: 100px;background-color: brown;" @click="opacityProperty"></view>
|
||||
</view>
|
||||
<view
|
||||
style="border-radius: 5px;margin: 4px;padding: 4px;border-style: solid;background-color: #eee;border-color: #eee;">
|
||||
<text style="margin-bottom: 4px;">修改border-color和margin-left(关键帧)</text>
|
||||
<view id="borderColorMarginLeftProperty" style="width: 100px;height: 100px;background-color: brown;border-width: 5px;border-style: solid;"
|
||||
@click="borderColorMarginLeftProperty"></view>
|
||||
</view>
|
||||
<!-- #ifdef APP && !VUE3-VAPOR -->
|
||||
</scroll-view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
let mainView : UniElement | null = null
|
||||
let animation : UniAnimation | null = null
|
||||
|
||||
type Data = {
|
||||
testTriggerFinishEvent : boolean,
|
||||
testTriggerCancelEvent : boolean
|
||||
}
|
||||
|
||||
const data = {
|
||||
testTriggerFinishEvent: false,
|
||||
testTriggerCancelEvent: false
|
||||
} as Data
|
||||
|
||||
function startAnimate() {
|
||||
animation = mainView!.animate([
|
||||
{
|
||||
transform: "scale(1)",
|
||||
transformOrigin: "0px 0px"
|
||||
},
|
||||
{
|
||||
transform: "scale(0)",
|
||||
transformOrigin: "50px 50px"
|
||||
},
|
||||
{
|
||||
transform: "scale(1)",
|
||||
transformOrigin: "100px 100px"
|
||||
}
|
||||
], {
|
||||
duration: 5000,
|
||||
|
||||
})
|
||||
if (animation != null) {
|
||||
animation!.oncancel = (_ : UniAnimationPlaybackEvent) => {
|
||||
data.testTriggerCancelEvent = true
|
||||
uni.showToast({
|
||||
title: "动画被取消了"
|
||||
})
|
||||
}
|
||||
animation!.onfinish = (_ : UniAnimationPlaybackEvent) => {
|
||||
data.testTriggerFinishEvent = true
|
||||
uni.showToast({
|
||||
title: "动画播放完成"
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function pauseAnimate() {
|
||||
animation?.pause()
|
||||
}
|
||||
|
||||
function resumeAnimate() {
|
||||
animation?.play()
|
||||
}
|
||||
|
||||
function cancelAnimate() {
|
||||
animation?.cancel()
|
||||
}
|
||||
|
||||
function widthProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
width: ["100px", "200px", "150px"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function heightProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
height: ["100px", "200px"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function marginProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
margin: ["8px", "16px", "32px"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function paddingProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
padding: ["0px", "16px", "32px", "16px"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function backgroundProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
offset: 0.3,
|
||||
backgroundColor: "yellow"
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
backgroundColor: "red"
|
||||
},
|
||||
{
|
||||
backgroundColor: "blue"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function borderProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
offset: 0.3,
|
||||
borderColor: "yellow"
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
borderColor: "pink"
|
||||
},
|
||||
{
|
||||
borderColor: "blue"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function transformProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
transform: "translateX(0px) scale(1) rotate(0deg)"
|
||||
},
|
||||
{
|
||||
transform: "translateX(100px)"
|
||||
},
|
||||
{
|
||||
transform: "scale(0.8) rotate(180deg)"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function positionProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
left: ["0px", "16px", "32px", "16px"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function backgroundAndWidthProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
width: ["100px", "200px"],
|
||||
backgroundColor: ["red", "yellow", "blue"]
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function backgroundAndMarginLeftProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
offset: 0.2,
|
||||
backgroundColor: "red"
|
||||
}, {
|
||||
marginLeft: "10px"
|
||||
}, {
|
||||
marginLeft: "20px"
|
||||
}, {
|
||||
marginLeft: "30px",
|
||||
backgroundColor: "pink"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function backgroundAndTransformProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
offset: 0.2,
|
||||
backgroundColor: "red"
|
||||
}, {
|
||||
transform: "translate(30px,0px)"
|
||||
}, {
|
||||
transform: "translate(50px,0px)"
|
||||
}, {
|
||||
transform: "translate(100px,0px)",
|
||||
backgroundColor: "pink"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function oneProperty1(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate({
|
||||
backgroundColor: "green"
|
||||
}, {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function oneProperty2(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([{
|
||||
backgroundColor: "blue"
|
||||
}], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function borderColorMarginLeftProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
borderColor: "red",
|
||||
marginLeft: "0px",
|
||||
offset: 0
|
||||
},
|
||||
{
|
||||
marginLeft: "20px",
|
||||
offset: 0.5
|
||||
},
|
||||
{
|
||||
marginLeft: "60px",
|
||||
borderColor: "yellow",
|
||||
offset: 1
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
function opacityProperty(e : UniPointerEvent) {
|
||||
e.currentTarget?.animate([
|
||||
{
|
||||
offset: 0.3,
|
||||
opacity: "1"
|
||||
},
|
||||
{
|
||||
offset: 0.6,
|
||||
opacity: "0.1"
|
||||
},
|
||||
{
|
||||
opacity: "0.5"
|
||||
}
|
||||
], {
|
||||
duration: 1000,
|
||||
fill: "forwards"
|
||||
})
|
||||
}
|
||||
|
||||
onReady(() => {
|
||||
mainView = uni.getElementById("main")
|
||||
var roll = uni.getElementById("roll")
|
||||
roll!.animate([
|
||||
{ transform: "translateX(0) rotate(0)" },
|
||||
{ transform: "translateX(200px) rotate(540deg)" },
|
||||
],
|
||||
{
|
||||
duration: 2000,
|
||||
direction: "alternate",
|
||||
easing: "ease-in-out",
|
||||
iterations: Infinity,
|
||||
},
|
||||
)
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
data,
|
||||
startAnimate,
|
||||
cancelAnimate
|
||||
})
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.view-margin {
|
||||
margin: 8px;
|
||||
}
|
||||
</style>
|
||||
在新工单中引用
屏蔽一个用户