提交 e1557994 编写于 作者: 雪洛's avatar 雪洛

Merge branch 'web' into dev

...@@ -81,4 +81,7 @@ ...@@ -81,4 +81,7 @@
<style> <style>
/*每个页面公共css */ /*每个页面公共css */
@import "./common/uni.css"; @import "./common/uni.css";
page {
background-color: #f8f8f8;
}
</style> </style>
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
<text class="uni-title-text"> {{title}} </text> <text class="uni-title-text"> {{title}} </text>
</view> </view>
</view> </view>
<view class="uni-input-wrapper input-wrapper"> <view class="input-wrapper">
<input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" /> <input class="uni-input" :type="inputType" :value="inputClearValue" :placeholder="title" @input="input" @blur="blur" @focus="focus" />
<image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"> <image class="input-wrapper_image" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image> </image>
...@@ -90,20 +90,15 @@ ...@@ -90,20 +90,15 @@
<style> <style>
.uni-input-wrapper {
padding: 8px 13px;
margin: 10rpx 0;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
}
.input-wrapper { .input-wrapper {
border: 1px solid rgba(0, 0, 0, .08); border: 1px solid rgba(0, 0, 0, .08);
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
padding: 0; padding: 0;
margin: 0 20rpx; margin: 0 20rpx;
flex-direction: row;
flex-wrap: nowrap;
background-color: #ffffff;
} }
.input-wrapper_image { .input-wrapper_image {
......
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
const boxNode = this.boxNode?.style!; const boxNode = this.boxNode?.style!;
const contentNode = this.contentNode?.style!; const contentNode = this.contentNode?.style!;
let hide = open ? 'flex' : 'none'; let hide = open ? 'flex' : 'none';
const opacity = open ? 1 : 0 const opacity = open ? "1" : "0"
let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)'; let ani_transform = open ? 'translateY(0)' : 'translateY(-100%)';
boxNode.setProperty('display', hide); boxNode.setProperty('display', hide);
this.$nextTick(() => { this.$nextTick(() => {
......
...@@ -50,6 +50,14 @@ ...@@ -50,6 +50,14 @@
"navigationBarTitleText": "button" "navigationBarTitleText": "button"
} }
}, },
// #ifdef WEB
{
"path": "pages/component/canvas/canvas",
"style": {
"navigationBarTitleText": "canvas"
}
},
// #endif
{ {
"path": "pages/component/radio/radio", "path": "pages/component/radio/radio",
"style": { "style": {
...@@ -246,6 +254,14 @@ ...@@ -246,6 +254,14 @@
"backgroundColor": "#F8F8F8" "backgroundColor": "#F8F8F8"
} }
}, },
// #ifdef WEB
{
"path": "pages/API/canvas/canvas",
"style": {
"navigationBarTitleText": "创建绘画"
}
},
// #endif
{ {
"path": "pages/API/get-app/get-app", "path": "pages/API/get-app/get-app",
"style": { "style": {
......
<template>
<view class="page">
<page-head :title="title"></page-head>
<canvas class="canvas-element" canvas-id="canvas" id="canvas"></canvas>
<scroll-view class="scroll-view" :scroll-y="true">
<view class="grid-view">
<view class="grid-item" v-for="(name, index) in names" :key="index">
<button class="canvas-drawing-button" @click="handleCanvasButton(name)">{{name}}</button>
</view>
</view>
<button class="btn-to-image" @click="toTempFilePath" type="primary">toTempFilePath</button>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'createContext',
names: ["rotate", "scale", "reset", "translate", "save", "restore", "drawImage", "fillText", "fill",
"stroke", "clearRect", "beginPath", "closePath", "moveTo", "lineTo", "rect", "arc",
"quadraticCurveTo", "bezierCurveTo", "setFillStyle", "setStrokeStyle", "setGlobalAlpha",
"setShadow", "setFontSize", "setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit"
],
// TODO 缺失 CanvasContext
canvasContext: null as any | null
}
},
onReady() {
// @ts-ignore
this.canvasContext = uni.createCanvasContext('canvas', this)
},
methods: {
toTempFilePath() {
// TODO 缺失
// uni.canvasToTempFilePath({
// canvasId: 'canvas',
// success: (res) => {
// console.log(res.tempFilePath)
// },
// fail: (err) => {
// console.error(JSON.stringify(err))
// }
// })
},
handleCanvasButton(name : string) {
switch (name) {
case "rotate":
this.rotate();
break;
case "scale":
this.scale();
break;
case "reset":
this.reset();
break;
case "translate":
this.translate();
break;
case "save":
this.save();
break;
case "restore":
this.restore();
break;
case "drawImage":
this.drawImage();
break;
case "fillText":
this.fillText();
break;
case "fill":
this.fill();
break;
case "stroke":
this.stroke();
break;
case "clearRect":
this.clearRect();
break;
case "beginPath":
this.beginPath();
break;
case "closePath":
this.closePath();
break;
case "moveTo":
this.moveTo();
break;
case "lineTo":
this.lineTo();
break;
case "rect":
this.rect();
break;
case "arc":
this.arc();
break;
case "quadraticCurveTo":
this.quadraticCurveTo();
break;
case "bezierCurveTo":
this.bezierCurveTo();
break;
case "setFillStyle":
this.setFillStyle();
break;
case "setStrokeStyle":
this.setStrokeStyle();
break;
case "setGlobalAlpha":
this.setGlobalAlpha();
break;
case "setShadow":
this.setShadow();
break;
case "setFontSize":
this.setFontSize();
break;
case "setLineCap":
this.setLineCap();
break;
case "setLineJoin":
this.setLineJoin();
break;
case "setLineWidth":
this.setLineWidth();
break;
case "setMiterLimit":
this.setMiterLimit();
break;
default:
break;
}
},
rotate() {
this.canvasContext!.beginPath()
this.canvasContext!.rotate(10 * Math.PI / 180)
this.canvasContext!.rect(225, 75, 20, 10)
this.canvasContext!.fill()
this.canvasContext!.draw()
},
scale() {
this.canvasContext!.beginPath()
this.canvasContext!.rect(25, 25, 50, 50)
this.canvasContext!.stroke()
this.canvasContext!.scale(2, 2)
this.canvasContext!.beginPath()
this.canvasContext!.rect(25, 25, 50, 50)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
reset() {
this.canvasContext!.beginPath()
this.canvasContext!.setFillStyle('#000000')
this.canvasContext!.setStrokeStyle('#000000')
this.canvasContext!.setFontSize(10)
this.canvasContext!.setGlobalAlpha(1)
this.canvasContext!.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
this.canvasContext!.setLineCap('butt')
this.canvasContext!.setLineJoin('miter')
this.canvasContext!.setLineWidth(1)
this.canvasContext!.setMiterLimit(10)
this.canvasContext!.draw()
},
translate() {
this.canvasContext!.beginPath()
this.canvasContext!.rect(10, 10, 100, 50)
this.canvasContext!.fill()
this.canvasContext!.translate(70, 70)
this.canvasContext!.beginPath()
this.canvasContext!.fill()
this.canvasContext!.draw()
},
save() {
this.canvasContext!.beginPath()
this.canvasContext!.setStrokeStyle('#00ff00')
this.canvasContext!.save()
this.canvasContext!.scale(2, 2)
this.canvasContext!.setStrokeStyle('#ff0000')
this.canvasContext!.rect(0, 0, 100, 100)
this.canvasContext!.stroke()
this.canvasContext!.restore()
this.canvasContext!.rect(0, 0, 50, 50)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
restore() {
[3, 2, 1].forEach((item) => {
this.canvasContext!.beginPath()
this.canvasContext!.save()
this.canvasContext!.scale(item, item)
this.canvasContext!.rect(10, 10, 100, 100)
this.canvasContext!.stroke()
this.canvasContext!.restore()
});
this.canvasContext!.draw()
},
drawImage() {
// #ifdef APP-PLUS
this.canvasContext!.drawImage('../../../static/app-plus/uni@2x.png', 0, 0)
// #endif
// #ifndef APP-PLUS
this.canvasContext!.drawImage('../../../static/uni.png', 0, 0)
// #endif
this.canvasContext!.draw()
},
fillText() {
this.canvasContext!.setStrokeStyle('#ff0000')
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(0, 10)
this.canvasContext!.lineTo(300, 10)
this.canvasContext!.stroke()
// this.canvasContext!.save()
// this.canvasContext!.scale(1.5, 1.5)
// this.canvasContext!.translate(20, 20)
this.canvasContext!.setFontSize(10)
this.canvasContext!.fillText('Hello World', 0, 30)
this.canvasContext!.setFontSize(20)
this.canvasContext!.fillText('Hello World', 100, 30)
// this.canvasContext!.restore()
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(0, 30)
this.canvasContext!.lineTo(300, 30)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
fill() {
this.canvasContext!.beginPath()
this.canvasContext!.rect(20, 20, 150, 100)
this.canvasContext!.setStrokeStyle('#00ff00')
this.canvasContext!.fill()
this.canvasContext!.draw()
},
stroke() {
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(20, 20)
this.canvasContext!.lineTo(20, 100)
this.canvasContext!.lineTo(70, 100)
this.canvasContext!.setStrokeStyle('#00ff00')
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
clearRect() {
this.canvasContext!.setFillStyle('#ff0000')
this.canvasContext!.beginPath()
this.canvasContext!.rect(0, 0, 300, 150)
this.canvasContext!.fill()
this.canvasContext!.clearRect(20, 20, 100, 50)
this.canvasContext!.draw()
},
beginPath() {
this.canvasContext!.beginPath()
this.canvasContext!.setLineWidth(5)
this.canvasContext!.setStrokeStyle('#ff0000')
this.canvasContext!.moveTo(0, 75)
this.canvasContext!.lineTo(250, 75)
this.canvasContext!.stroke()
this.canvasContext!.beginPath()
this.canvasContext!.setStrokeStyle('#0000ff')
this.canvasContext!.moveTo(50, 0)
this.canvasContext!.lineTo(150, 130)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
closePath() {
this.canvasContext!.beginPath()
this.canvasContext!.setLineWidth(1)
this.canvasContext!.moveTo(20, 20)
this.canvasContext!.lineTo(20, 100)
this.canvasContext!.lineTo(70, 100)
this.canvasContext!.closePath()
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
moveTo() {
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(0, 0)
this.canvasContext!.lineTo(300, 150)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
lineTo() {
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(20, 20)
this.canvasContext!.lineTo(20, 100)
this.canvasContext!.lineTo(70, 100)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
rect() {
this.canvasContext!.beginPath()
this.canvasContext!.rect(20, 20, 150, 100)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
arc() {
this.canvasContext!.beginPath()
this.canvasContext!.setLineWidth(2)
this.canvasContext!.arc(75, 75, 50, 0, Math.PI * 2, true)
this.canvasContext!.moveTo(110, 75)
this.canvasContext!.arc(75, 75, 35, 0, Math.PI, false)
this.canvasContext!.moveTo(65, 65)
this.canvasContext!.arc(60, 65, 5, 0, Math.PI * 2, true)
this.canvasContext!.moveTo(95, 65)
this.canvasContext!.arc(90, 65, 5, 0, Math.PI * 2, true)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
quadraticCurveTo() {
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(20, 20)
this.canvasContext!.quadraticCurveTo(20, 100, 200, 20)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
bezierCurveTo() {
this.canvasContext!.beginPath()
this.canvasContext!.moveTo(20, 20)
this.canvasContext!.bezierCurveTo(20, 100, 200, 100, 200, 20)
this.canvasContext!.stroke()
this.canvasContext!.draw()
},
setFillStyle() {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
this.canvasContext!.setFillStyle(item)
this.canvasContext!.beginPath()
this.canvasContext!.rect(0 + 75 * index, 0, 50, 50)
this.canvasContext!.fill()
})
this.canvasContext!.draw()
},
setStrokeStyle() {
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
this.canvasContext!.setStrokeStyle(item)
this.canvasContext!.beginPath()
this.canvasContext!.rect(0 + 75 * index, 0, 50, 50)
this.canvasContext!.stroke()
})
this.canvasContext!.draw()
},
setGlobalAlpha() {
this.canvasContext!.setFillStyle('#000000');
[1, 0.5, 0.1].forEach((item : number, index : number) => {
this.canvasContext!.setGlobalAlpha(item)
this.canvasContext!.beginPath()
this.canvasContext!.rect(0 + 75 * index, 0, 50, 50)
this.canvasContext!.fill()
})
this.canvasContext!.draw()
this.canvasContext!.setGlobalAlpha(1)
},
setShadow() {
this.canvasContext!.beginPath()
this.canvasContext!.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
this.canvasContext!.rect(10, 10, 100, 100)
this.canvasContext!.fill()
this.canvasContext!.draw()
},
setFontSize() {
[10, 20, 30, 40].forEach((item : number, index : number) => {
this.canvasContext!.setFontSize(item)
this.canvasContext!.fillText('Hello, world', 20, 20 + 40 * index)
})
this.canvasContext!.draw()
},
setLineCap() {
this.canvasContext!.setLineWidth(10);
['butt', 'round', 'square'].forEach((item : string, index : number) => {
this.canvasContext!.beginPath()
this.canvasContext!.setLineCap(item)
this.canvasContext!.moveTo(20, 20 + 20 * index)
this.canvasContext!.lineTo(100, 20 + 20 * index)
this.canvasContext!.stroke()
})
this.canvasContext!.draw()
},
setLineJoin() {
this.canvasContext!.setLineWidth(10);
['bevel', 'round', 'miter'].forEach((item : string, index : number) => {
this.canvasContext!.beginPath()
this.canvasContext!.setLineJoin(item)
this.canvasContext!.moveTo(20 + 80 * index, 20)
this.canvasContext!.lineTo(100 + 80 * index, 50)
this.canvasContext!.lineTo(20 + 80 * index, 100)
this.canvasContext!.stroke()
})
this.canvasContext!.draw()
},
setLineWidth() {
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
this.canvasContext!.beginPath()
this.canvasContext!.setLineWidth(item)
this.canvasContext!.moveTo(20, 20 + 20 * index)
this.canvasContext!.lineTo(100, 20 + 20 * index)
this.canvasContext!.stroke()
})
this.canvasContext!.draw()
},
setMiterLimit() {
this.canvasContext!.setLineWidth(4);
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
this.canvasContext!.beginPath()
this.canvasContext!.setMiterLimit(item)
this.canvasContext!.moveTo(20 + 80 * index, 20)
this.canvasContext!.lineTo(100 + 80 * index, 50)
this.canvasContext!.lineTo(20 + 80 * index, 100)
this.canvasContext!.stroke()
})
this.canvasContext!.draw()
}
}
}
</script>
<style>
.page {
flex: 1;
height: 100%;
overflow: hidden;
}
.scroll-view {
flex: 1;
padding-bottom: 50px;
}
.canvas-element {
width: 100%;
height: 500rpx;
background-color: #ffffff;
}
.grid-view {
padding: 10px;
flex-direction: row;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
padding: 5px;
}
.btn-to-image {
margin: 10px;
}
</style>
...@@ -6,11 +6,14 @@ describe('ExtApi-GetAppBaseInfo', () => { ...@@ -6,11 +6,14 @@ describe('ExtApi-GetAppBaseInfo', () => {
let res; let res;
const stringProperties = [ const stringProperties = [
'appId', 'appName', 'appVersion', 'appVersionCode', 'appLanguage', 'appId', 'appName', 'appVersion', 'appVersionCode', 'appLanguage',
'language', 'version', 'uniCompileVersion', 'uniPlatform', 'uniRuntimeVersion', 'language', 'uniCompileVersion', 'uniPlatform', 'uniRuntimeVersion',
] ]
const numberProperties = [ const numberProperties = [
'uniCompileVersionCode', 'uniRuntimeVersionCode' 'uniCompileVersionCode', 'uniRuntimeVersionCode'
] ]
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
stringProperties.push('version')
}
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(600); await page.waitFor(600);
......
...@@ -28,18 +28,18 @@ ...@@ -28,18 +28,18 @@
}, },
changePageHeadBackgroundColor() { changePageHeadBackgroundColor() {
const pageHead = uni.getElementById('page-head')! const pageHead = uni.getElementById('page-head')!
pageHead.style['backgroundColor'] = 'red' pageHead.style.setProperty('background-color', 'red')
}, },
changeTextColor() { changeTextColor() {
const text = uni.getElementById('text')! const text = uni.getElementById('text')!
text.style['color'] = 'red' text.style.setProperty('color', 'red')
}, },
changeViewStyle() { changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view') const view = uni.getElementById<UniViewElement>('view')
if (view !== null) { if (view !== null) {
view.style['width'] = '90%' view.style.setProperty('width', '90%')
view.style['height'] = '50px' view.style.setProperty('height', '50px')
view.style['backgroundColor'] = '#007AFF' view.style.setProperty('backgroundColor', '#007AFF')
} }
} }
} }
......
...@@ -35,18 +35,18 @@ ...@@ -35,18 +35,18 @@
}, },
changePageHeadBackgroundColor() { changePageHeadBackgroundColor() {
const pageHead = uni.getElementById('page-head')! const pageHead = uni.getElementById('page-head')!
pageHead.style['backgroundColor'] = 'red' pageHead.style.setProperty('background-color', 'red')
}, },
changeTextColor() { changeTextColor() {
const text = uni.getElementById('text')! const text = uni.getElementById('text')!
text.style['color'] = 'red' text.style.setProperty('color', 'red')
}, },
changeViewStyle() { changeViewStyle() {
const view = uni.getElementById<UniViewElement>('view') const view = uni.getElementById<UniViewElement>('view')
if (view !== null) { if (view !== null) {
view.style['width'] = '90%' view.style.setProperty('width', '90%')
view.style['height'] = '50px' view.style.setProperty('height', '50px')
view.style['backgroundColor'] = '#007AFF' view.style.setProperty('background-color', '#007AFF')
} }
}, },
goMultipleRootNode() { goMultipleRootNode() {
......
...@@ -7,7 +7,7 @@ describe('ExtApi-GetSystemInfo', () => { ...@@ -7,7 +7,7 @@ describe('ExtApi-GetSystemInfo', () => {
const stringProperties = [ const stringProperties = [
'appId', 'appLanguage', 'appName', 'appVersion', 'appVersionCode', 'appId', 'appLanguage', 'appName', 'appVersion', 'appVersionCode',
'brand', 'deviceId', 'deviceBrand', 'deviceModel', 'deviceType', 'language', 'brand', 'deviceId', 'deviceBrand', 'deviceModel', 'deviceType', 'language',
'model', 'version', 'osName', 'osVersion', 'osLanguage', 'platform', 'system', 'ua', 'uniCompileVersion', 'model', 'osName', 'osVersion', 'osLanguage', 'platform', 'system', 'ua', 'uniCompileVersion',
'uniPlatform', 'uniRuntimeVersion', 'romName', 'romVersion', 'uniPlatform', 'uniRuntimeVersion', 'romName', 'romVersion',
] ]
const numberProperties = [ const numberProperties = [
...@@ -17,6 +17,11 @@ describe('ExtApi-GetSystemInfo', () => { ...@@ -17,6 +17,11 @@ describe('ExtApi-GetSystemInfo', () => {
'uniCompileVersionCode', 'uniRuntimeVersionCode' 'uniCompileVersionCode', 'uniRuntimeVersionCode'
] ]
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
stringProperties.push('version')
}
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
await page.waitFor(600); await page.waitFor(600);
......
...@@ -56,10 +56,12 @@ export default { ...@@ -56,10 +56,12 @@ export default {
// #ifdef WEB // #ifdef WEB
onUnload() { onUnload() {
// web 端页面销毁前,关闭 modal 和 actionsheet // web 端页面销毁前,关闭 modal 和 actionsheet
// @ts-ignore
const modalBtn = document.querySelector('.uni-modal__btn') const modalBtn = document.querySelector('.uni-modal__btn')
if (modalBtn) { if (modalBtn) {
modalBtn.click() modalBtn.click()
} }
// @ts-ignore
const actionSheetBtn = document.querySelector('.uni-actionsheet__action .uni-actionsheet__cell') const actionSheetBtn = document.querySelector('.uni-actionsheet__action .uni-actionsheet__cell')
if (actionSheetBtn) { if (actionSheetBtn) {
actionSheetBtn.click() actionSheetBtn.click()
......
...@@ -70,13 +70,17 @@ describe('ExtApi-Request', () => { ...@@ -70,13 +70,17 @@ describe('ExtApi-Request', () => {
it('Check PATCH', async () => { it('Check PATCH', async () => {
await request(page, 'PATCH'); await request(page, 'PATCH');
}); });
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
it('Check OPTIONS', async () => { it('Check OPTIONS', async () => {
await request(page, 'OPTIONS'); await request(page, 'OPTIONS');
}); });
}
it('Check HEAD', async () => { it('Check HEAD', async () => {
await request(page, 'HEAD'); await request(page, 'HEAD');
}); });
if (process.env.uniTestPlatformInfo.indexOf('web') === -1) {
it('Check Set Cookie', async () => { it('Check Set Cookie', async () => {
res = await page.callMethod('jest_set_cookie') res = await page.callMethod('jest_set_cookie')
await page.waitFor(500); await page.waitFor(500);
...@@ -89,4 +93,5 @@ describe('ExtApi-Request', () => { ...@@ -89,4 +93,5 @@ describe('ExtApi-Request', () => {
res = await page.data('jest_result'); res = await page.data('jest_result');
expect(res).toBe(true) expect(res).toBe(true)
}); });
}
}); });
<template> <template>
<!-- #ifdef APP -->
<view class="page" style="flex:1"> <view class="page" style="flex:1">
<!-- #endif -->
<view class="head"> <view class="head">
<text class="tip">下面有一个灰色区域,display默认值为flex</text> <text class="tip">下面有一个灰色区域,display默认值为flex</text>
<text class="tip">当前display值:{{display}}</text> <text class="tip">当前display值:{{display}}</text>
...@@ -10,9 +8,7 @@ ...@@ -10,9 +8,7 @@
<text style="background-color: aquamarine;">展示display区域</text> <text style="background-color: aquamarine;">展示display区域</text>
</view> </view>
<button @tap="switchDisplay">切换display属性</button> <button @tap="switchDisplay">切换display属性</button>
<!-- #ifdef APP -->
</view> </view>
<!-- #endif -->
</template> </template>
<script> <script>
......
<template> <template>
<!-- #ifdef APP -->
<view class="page" style="flex:1"> <view class="page" style="flex:1">
<!-- #endif -->
<view class="head"> <view class="head">
<text class="tip">下面有一个灰色区域,display默认值为none</text> <text class="tip">下面有一个灰色区域,display默认值为none</text>
<text class="tip">当前display值:{{display}}</text> <text class="tip">当前display值:{{display}}</text>
...@@ -10,9 +8,7 @@ ...@@ -10,9 +8,7 @@
<text style="background-color: aquamarine;">展示display区域</text> <text style="background-color: aquamarine;">展示display区域</text>
</view> </view>
<button @tap="switchDisplay">切换display属性</button> <button @tap="switchDisplay">切换display属性</button>
<!-- #ifdef APP -->
</view> </view>
<!-- #endif -->
</template> </template>
<script> <script>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
<text>position: relative</text> <text>position: relative</text>
<scroll-view <scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray" style="width: 500rpx; height: 500rpx; background-color: gray"
scroll-y="true"
> >
<view <view
style="width: 100rpx; height: 100rpx; background-color: red" style="width: 100rpx; height: 100rpx; background-color: red"
...@@ -42,6 +43,7 @@ ...@@ -42,6 +43,7 @@
<text>position: absolute</text> <text>position: absolute</text>
<scroll-view <scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray" style="width: 500rpx; height: 500rpx; background-color: gray"
scroll-y="true"
> >
<view <view
style="width: 100rpx; height: 100rpx; background-color: red" style="width: 100rpx; height: 100rpx; background-color: red"
...@@ -77,6 +79,7 @@ ...@@ -77,6 +79,7 @@
<text>position: fixed</text> <text>position: fixed</text>
<scroll-view <scroll-view
style="width: 500rpx; height: 500rpx; background-color: gray" style="width: 500rpx; height: 500rpx; background-color: gray"
scroll-y="true"
> >
<view <view
style="width: 100rpx; height: 100rpx; background-color: red" style="width: 100rpx; height: 100rpx; background-color: red"
......
<template> <template>
<!-- #ifdef APP --> <scroll-view class="page" scroll-y="true">
<scroll-view class="page">
<!-- #endif -->
<view class="trace"> <view class="trace">
<view class="base reserve"> <view class="base reserve">
...@@ -39,9 +37,7 @@ ...@@ -39,9 +37,7 @@
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
......
<template> <template>
<!-- #ifdef APP --> <scroll-view class="page" scroll-y="true">
<scroll-view class="page">
<!-- #endif -->
<view class="trace"> <view class="trace">
<view class="base reserve"> <view class="base reserve">
<text class="reserve-text">scaleX(0.6)</text> <text class="reserve-text">scaleX(0.6)</text>
...@@ -30,10 +27,7 @@ ...@@ -30,10 +27,7 @@
<text>scale(1.2,1.2)</text> <text>scale(1.2,1.2)</text>
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
......
<template> <template>
<!-- #ifdef APP --> <scroll-view class="page" scroll-y="true">
<scroll-view class="page">
<!-- #endif -->
<view class="trace"> <view class="trace">
<view class="base reserve"> <view class="base reserve">
<text class="reserve-text">translateX(80%)</text> <text class="reserve-text">translateX(80%)</text>
...@@ -30,10 +27,7 @@ ...@@ -30,10 +27,7 @@
<text>translate(-50%,50%)</text> <text>translate(-50%,50%)</text>
<text>转变后位置</text> <text>转变后位置</text>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script lang="uts"> <script lang="uts">
......
...@@ -86,29 +86,29 @@ ...@@ -86,29 +86,29 @@
methods: { methods: {
changeWidthOrHeight() { changeWidthOrHeight() {
this.widthOrHeight?.style?.setProperty("width", this.isTranstionWidthOrHeight this.widthOrHeight?.style?.setProperty("width", this.isTranstionWidthOrHeight
? '400rpx' ? '60%'
: '600rpx') : '100%')
this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight this.isTranstionWidthOrHeight = !this.isTranstionWidthOrHeight
}, },
changeMargin() { changeMargin() {
this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin this.styleMargin?.style?.setProperty("margin-top", this.isTranstionChangeMargin
? '0rpx' ? '0px'
: '100rpx' : '50px'
) )
this.styleMargin?.style?.setProperty("margin-left", this.isTranstionChangeMargin this.styleMargin?.style?.setProperty("margin-left", this.isTranstionChangeMargin
? '0rpx' ? '0px'
: '100rpx' : '50px'
) )
this.isTranstionChangeMargin = !this.isTranstionChangeMargin this.isTranstionChangeMargin = !this.isTranstionChangeMargin
}, },
changePadding() { changePadding() {
this.stylePadding?.style?.setProperty("padding-top", this.isTransitionStylePadding this.stylePadding?.style?.setProperty("padding-top", this.isTransitionStylePadding
? '0rpx' ? '0px'
: '100rpx') : '50px')
this.stylePadding?.style?.setProperty("padding-left", this.isTransitionStylePadding this.stylePadding?.style?.setProperty("padding-left", this.isTransitionStylePadding
? '0rpx' ? '0px'
: '100rpx') : '50px')
this.isTransitionStylePadding = !this.isTransitionStylePadding this.isTransitionStylePadding = !this.isTransitionStylePadding
}, },
changeBackground() { changeBackground() {
...@@ -157,8 +157,8 @@ ...@@ -157,8 +157,8 @@
}, },
changestylePosition() { changestylePosition() {
this.stylePosition?.style?.setProperty("left", this.isTransitionstylePosition this.stylePosition?.style?.setProperty("left", this.isTransitionstylePosition
? '0rpx' ? '0px'
: '150rpx' : '100px'
) )
this.isTransitionstylePosition = !this.isTransitionstylePosition this.isTransitionstylePosition = !this.isTransitionstylePosition
}, },
......
<template>
<view>
<page-head :title="title"></page-head>
<view class="page-body">
<!-- #ifdef APP-PLUS || H5 -->
<canvas canvas-id="canvas" class="canvas" :start="startStatus" :change:start="animate.start"
:data-width="canvasWidth" :data-height="canvasWidth"></canvas>
<!-- #endif -->
<!-- #ifndef APP-PLUS || H5 -->
<canvas canvas-id="canvas" id="canvas" class="canvas"></canvas>
<!-- #endif -->
</view>
</view>
</template>
<script module="animate" lang="renderjs">
function Ball({
x,
y,
vx,
vy,
canvasWidth,
canvasHeight,
ctx
}) {
this.canvasWidth = canvasWidth
this.canvasHeight = canvasHeight
this.ctx = ctx
this.x = x
this.y = y
this.vx = vx
this.vy = vy
this.radius = 5
}
Ball.prototype.draw = function() {
this.ctx.beginPath()
this.ctx.fillStyle = '#007AFF'
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
}
Ball.prototype.move = function() {
this.x += this.vx
this.y += this.vy
// 回到中心
// if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
// getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
// this.x = this.canvasWidth / 2
// this.y = this.canvasHeight / 2
// }
// 边框反弹
if (this.x < this.radius) {
this.vx = Math.abs(this.vx)
return
}
if (this.x > this.canvasWidth - this.radius) {
this.vx = -Math.abs(this.vx)
}
if (this.y < this.radius) {
this.vy = Math.abs(this.vy)
return
}
if (this.y > this.canvasWidth - this.radius) {
this.vy = -Math.abs(this.vy)
}
}
function getDistance(x, y) {
return Math.pow(Math.pow(x, 2) + Math.pow(y, 2), 0.5)
}
export default {
methods: {
start(newVal, oldVal, owner, ins) {
let canvasWidth = ins.getDataset().width,
canvasHeight = ins.getDataset().height,
canvasEle = document.querySelectorAll('.canvas>canvas')[0],
ctx = canvasEle.getContext('2d'),
speed = 3,
ballList = [],
layer = 3,
ballInlayer = 20
for (let i = 0; i < layer; i++) {
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
for (let j = 0; j < ballInlayer; j++) {
let deg = j * 2 * Math.PI / ballInlayer,
sin = Math.sin(deg),
cos = Math.cos(deg),
x = radius * cos + canvasWidth / 2,
y = radius * sin + canvasHeight / 2,
vx = speed * cos,
vy = speed * sin;
ballList.push(new Ball({x, y, vx, vy, canvasWidth, canvasHeight, ctx, radius: 5}))
}
}
function animate(ballList) {
ctx.clearRect(0, 0, canvasEle.width, canvasEle.height)
ballList.forEach(function(item) {
item.move()
item.draw()
})
requestAnimationFrame(function() {
animate(ballList)
})
}
animate(ballList)
}
}
}
</script>
<script>
// #ifndef APP-PLUS || H5
let ctx = null,
interval = null;
function Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx) {
this.canvasWidth = canvasWidth
this.canvasHeight = canvasHeight
this.ctx = ctx
this.x = x
this.y = y
this.vx = vx
this.vy = vy
this.radius = 5
}
Ball.prototype.draw = function () {
this.ctx.setFillStyle('#007AFF')
this.ctx.beginPath()
this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI)
this.ctx.closePath()
this.ctx.fill()
}
Ball.prototype.move = function () {
this.x += this.vx
this.y += this.vy
// 回到中心
if (getDistance(this.x - this.canvasWidth / 2, this.y - this.canvasHeight / 2) >
getDistance(this.canvasWidth / 2, this.canvasHeight / 2) + this.radius) {
this.x = this.canvasWidth / 2
this.y = this.canvasHeight / 2
}
// 边框反弹
if (this.x < this.radius) {
this.vx = Math.abs(this.vx)
return
}
if (this.x > this.canvasWidth - this.radius) {
this.vx = -Math.abs(this.vx)
}
if (this.y < this.radius) {
this.vy = Math.abs(this.vy)
return
}
if (this.y > this.canvasWidth - this.radius) {
this.vy = -Math.abs(this.vy)
}
}
function getDistance(x, y) {
return 1
}
// #endif
export default {
data() {
return {
title: 'canvas',
canvasWidth: 0,
startStatus: false,
ballList: []
}
},
onReady: function () {
this.$nextTick(() => {
uni.createSelectorQuery().select(".canvas").boundingClientRect(data => {
this.canvasWidth = data.width
// #ifdef APP-PLUS || H5
this.startStatus = true
// #endif
// #ifndef APP-PLUS || H5
ctx = uni.createCanvasContext('canvas')
this.drawBall()
// #endif
}).exec()
})
},
// #ifndef APP-PLUS || H5
onUnload: function () {
clearInterval(interval);
},
methods: {
drawBall: function () {
let canvasWidth = this.canvasWidth,
canvasHeight = this.canvasWidth,
speed = 3,
ballList = [],
layer = 3,
ballInlayer = 20
for (let i = 0; i < layer; i++) {
let radius = getDistance(canvasWidth / 2, canvasHeight / 2) / layer * i
for (let j = 0; j < ballInlayer; j++) {
let deg = j * 2 * Math.PI / ballInlayer,
sin = Math.sin(deg),
cos = Math.cos(deg),
x = radius * cos + canvasWidth / 2,
y = radius * sin + canvasHeight / 2,
vx = speed * cos,
vy = speed * sin
ballList.push(new Ball(x, y, vx, vy, canvasWidth, canvasHeight, ctx))
}
}
function animate(ballList) {
ctx.clearRect(0, 0, canvasWidth, canvasHeight)
ballList.forEach(function (item) {
item.move()
item.draw()
})
ctx.draw()
}
interval = setInterval(function () {
animate(ballList)
}, 17)
}
}
// #endif
}
</script>
<style>
.canvas {
width: 610rpx;
height: 610rpx;
background-color: #fff;
margin-left: auto;
margin-right: auto;
}
</style>
...@@ -50,18 +50,18 @@ describe('Checkbox.uvue', () => { ...@@ -50,18 +50,18 @@ describe('Checkbox.uvue', () => {
}) })
it('color', async () => { it('color', async () => {
const cb = await page.$('.cb') const cb = await page.$('.cb')
expect(await cb.property('color')).toBe('#007aff') expect(await cb.attribute('color')).toBe('#007aff')
await page.setData({ await page.setData({
color: '#63acfc', color: '#63acfc',
}) })
expect(await cb.property('color')).toBe('#63acfc') expect(await cb.attribute('color')).toBe('#63acfc')
}) })
it('disabled', async () => { it('disabled', async () => {
const cb = await page.$('.cb2') const cb = await page.$('.cb2')
expect(await cb.property('disabled')).toBe(true) expect(await cb.attribute('disabled')).toBe(true + '')
await page.setData({ await page.setData({
disabled: false, disabled: false,
}) })
expect(await cb.property('disabled')).toBe(false) expect(await cb.attribute('disabled')).toBe(false + '')
}) })
}) })
<template> <template>
<!-- #ifdef APP -->
<scroll-view class="page"> <scroll-view class="page">
<!-- #endif -->
<form @submit="onFormSubmit" @reset="onFormReset"> <form @submit="onFormSubmit" @reset="onFormReset">
<view class="uni-form-item"> <view class="uni-form-item">
<view class="title">姓名</view> <view class="title">姓名</view>
...@@ -11,10 +9,10 @@ ...@@ -11,10 +9,10 @@
<view class="title">性别</view> <view class="title">性别</view>
<radio-group name="gender" class="flex-row"> <radio-group name="gender" class="flex-row">
<view class="group-item"> <view class="group-item">
<radio :value="0" :checked="gender=='0'" /><text>男</text> <radio value="0" :checked="gender=='0'" /><text>男</text>
</view> </view>
<view class="group-item"> <view class="group-item">
<radio :value="1" :checked="gender=='1'" /><text>女</text> <radio value="1" :checked="gender=='1'" /><text>女</text>
</view> </view>
</radio-group> </radio-group>
</view> </view>
...@@ -46,9 +44,7 @@ ...@@ -46,9 +44,7 @@
</form> </form>
<view class="result">提交的表单数据</view> <view class="result">提交的表单数据</view>
<textarea class="textarea" :value="formDataText"></textarea> <textarea class="textarea" :value="formDataText"></textarea>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script> <script>
......
...@@ -44,6 +44,7 @@ ...@@ -44,6 +44,7 @@
} }
}, },
onTouchMove(e: TouchEvent) { onTouchMove(e: TouchEvent) {
e.preventDefault()
this.touchEvent = e this.touchEvent = e
let p = e.touches[0] let p = e.touches[0]
if(p.screenX == this.lastX && p.screenY == this.lastY){ if(p.screenX == this.lastX && p.screenY == this.lastY){
......
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/ // uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('transition event', () => { describe('transition event', () => {
if (process.env.uniTestPlatformInfo.indexOf('web') > -1) {
it('dummyTest', () => {
expect(1).toBe(1)
})
return
}
let page; let page;
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/component/general-event/transition-event') page = await program.reLaunch('/pages/component/general-event/transition-event')
......
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
this.times = 0 this.times = 0
this.buttonValue = "开启图片旋转" this.buttonValue = "开启图片旋转"
this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)') this.element!.style.setProperty('transform', 'rotate(' + this.times * 360 + 'deg)')
this.element!.style.setProperty('transition-duration', '0s') this.element!.style.setProperty('transition-duration', '0ms')
} }
}, },
onEnd() { onEnd() {
......
...@@ -17,24 +17,24 @@ describe('component-native-input', () => { ...@@ -17,24 +17,24 @@ describe('component-native-input', () => {
// 测试焦点及键盘弹起 // 测试焦点及键盘弹起
it('focus', async () => { it('focus', async () => {
const input = await page.$('#uni-input-focus'); const input = await page.$('#uni-input-focus');
expect(await input.property('focus')).toBe("true") expect(await input.attribute('focus')).toBe(true)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true) // expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true)
await page.setData({ await page.setData({
focus: false, focus: false,
}) })
expect(await input.property('focus')).toBe("false") expect(await input.attribute('focus')).toBe(false)
// await page.waitFor(1000) // await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false) // expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false)
// await page.setData({ // await page.setData({
// focus: true, // focus: true,
// }) // })
// expect(await input.property('focus')).toBe(true) // expect(await input.attribute('focus')).toBe(true)
// await page.waitFor(1000) // await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true) // expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(true)
// await page.setData({ // await page.setData({
// focus: false, // focus: false,
// }) // })
// expect(await input.property('focus')).toBe(false) // expect(await input.attribute('focus')).toBe(false)
// await page.waitFor(1000) // await page.waitFor(1000)
// expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false) // expect(await page.data("inputFocusKeyBoardChangeValue")).toBe(false)
// await page.waitFor(1000) // await page.waitFor(1000)
...@@ -52,21 +52,21 @@ describe('component-native-input', () => { ...@@ -52,21 +52,21 @@ describe('component-native-input', () => {
const number = await page.$('#uni-input-type-number'); const number = await page.$('#uni-input-type-number');
const digit = await page.$('#uni-input-type-digit'); const digit = await page.$('#uni-input-type-digit');
const tel = await page.$('#uni-input-type-tel'); const tel = await page.$('#uni-input-type-tel');
expect(await text.property('type')).toEqual("text") expect(await text.attribute('type')).toEqual("text")
expect(await number.property('type')).toEqual("number") expect(await number.attribute('type')).toEqual("number")
expect(await digit.property('type')).toEqual("digit") expect(await digit.attribute('type')).toEqual("digit")
expect(await tel.property('type')).toEqual("tel") expect(await tel.attribute('type')).toEqual("tel")
}) })
// 测试密码属性 // 测试密码属性
// it("password", async () => { // it("password", async () => {
// const input = await page.$('.uni-input-password'); // const input = await page.$('.uni-input-password');
// expect(await input.property('password')).toBe(true) // expect(await input.attribute('password')).toBe(true)
// await page.setData({ // await page.setData({
// inputPassword: false, // inputPassword: false,
// inputPasswordValue: "inputPasswordValue" // inputPasswordValue: "inputPasswordValue"
// }) // })
// expect(await input.property('password')).toBe(false) // expect(await input.attribute('password')).toBe(false)
// await page.waitFor(500) // await page.waitFor(500)
// await page.setData({ // await page.setData({
// inputPassword: true // inputPassword: true
...@@ -75,21 +75,21 @@ describe('component-native-input', () => { ...@@ -75,21 +75,21 @@ describe('component-native-input', () => {
// 测试placeholder // 测试placeholder
// it("placeholder", async () => { // it("placeholder", async () => {
// const placeholder1 = await page.$('.uni-input-placeholder1'); // const placeholder1 = await page.$('.uni-input-placeholder1');
// expect(await placeholder1.property("placeholder-style")).toMatchObject({ // expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "red" // "color": "red"
// }) // })
// expect(await placeholder1.property("placeholder")).toEqual("占位符文字颜色为红色") // expect(await placeholder1.attribute("placeholder")).toEqual("占位符文字颜色为红色")
// await page.setData({ // await page.setData({
// inputPlaceHolderStyle: "color:#CC00CC", // inputPlaceHolderStyle: "color:#CC00CC",
// }) // })
// expect(await placeholder1.property("placeholder-style")).toMatchObject({ // expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "#CC00CC" // "color": "#CC00CC"
// }) // })
// await page.setData({ // await page.setData({
// inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0", // inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0",
// }) // })
// expect(await placeholder1.property("placeholder-style")).toMatchObject({ // expect(await placeholder1.attribute("placeholder-style")).toMatchObject({
// "color": "#CC19CC", // "color": "#CC19CC",
// "backgroundColor": "#00b1c0" // "backgroundColor": "#00b1c0"
// }) // })
...@@ -97,7 +97,7 @@ describe('component-native-input', () => { ...@@ -97,7 +97,7 @@ describe('component-native-input', () => {
// await page.setData({ // await page.setData({
// inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0;text-align:center;font-size:44px;font-weight:900", // inputPlaceHolderStyle: "color:#CC19CC;background-color:#00b1c0;text-align:center;font-size:44px;font-weight:900",
// }) // })
// expect(await placeholder1.property("placeholder-style")).toEqual({ // expect(await placeholder1.attribute("placeholder-style")).toEqual({
// "backgroundColor": "#00b1c0", // "backgroundColor": "#00b1c0",
// "color": "#CC19CC", // "color": "#CC19CC",
// "fontSize": "44px", // "fontSize": "44px",
...@@ -106,29 +106,29 @@ describe('component-native-input', () => { ...@@ -106,29 +106,29 @@ describe('component-native-input', () => {
// }) // })
// const placeholder2 = await page.$('.uni-input-placeholder2'); // const placeholder2 = await page.$('.uni-input-placeholder2');
// expect(await placeholder2.property("placeholder-class")).toMatchObject({ // expect(await placeholder2.attribute("placeholder-class")).toMatchObject({
// "backgroundColor": "#008000" // "backgroundColor": "#008000"
// }) // })
// await page.setData({ // await page.setData({
// inputPlaceHolderClass: "uni-input-placeholder-class-ts", // inputPlaceHolderClass: "uni-input-placeholder-class-ts",
// }) // })
// expect(await placeholder2.property("placeholder-class")).toMatchObject({ // expect(await placeholder2.attribute("placeholder-class")).toMatchObject({
// "backgroundColor": "#FFA500" // "backgroundColor": "#FFA500"
// }) // })
// expect(await placeholder2.property("placeholder")).toEqual("占位符背景色为绿色") // expect(await placeholder2.attribute("placeholder")).toEqual("占位符背景色为绿色")
// }) // })
it("disable", async () => { it("disable", async () => {
const input = await page.$('#uni-input-disable'); const input = await page.$('#uni-input-disable');
expect(await input.property("disabled")).toBe("true") expect(await input.attribute("disabled")).toBe("true")
}) })
it("confirm-type", async () => { it("confirm-type", async () => {
expect(await (await page.$('#uni-input-confirm-send')).property("confirmType")).toEqual("send") expect(await (await page.$('#uni-input-confirm-send')).attribute("confirmType")).toEqual("send")
expect(await (await page.$('#uni-input-confirm-search')).property("confirmType")).toEqual("search") expect(await (await page.$('#uni-input-confirm-search')).attribute("confirmType")).toEqual("search")
expect(await (await page.$('#uni-input-confirm-next')).property("confirmType")).toEqual("next") expect(await (await page.$('#uni-input-confirm-next')).attribute("confirmType")).toEqual("next")
expect(await (await page.$('#uni-input-confirm-go')).property("confirmType")).toEqual("go") expect(await (await page.$('#uni-input-confirm-go')).attribute("confirmType")).toEqual("go")
expect(await (await page.$('#uni-input-confirm-done')).property("confirmType")).toEqual("done") expect(await (await page.$('#uni-input-confirm-done')).attribute("confirmType")).toEqual("done")
}) })
// it("maxlength", async () => { // it("maxlength", async () => {
...@@ -144,7 +144,7 @@ describe('component-native-input', () => { ...@@ -144,7 +144,7 @@ describe('component-native-input', () => {
cursor_color: "transparent", cursor_color: "transparent",
}) })
await page.waitFor(500) await page.waitFor(500)
expect(await (await page.$('#uni-input-cursor-color')).property("cursor-color")).toBe("transparent") expect(await (await page.$('#uni-input-cursor-color')).attribute("cursor-color")).toBe("transparent")
}) })
it("afterAllTestScreenshot", async () => { it("afterAllTestScreenshot", async () => {
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">设置输入框的初始内容</text> <text class="uni-title-text">设置输入框的初始内容</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-default" class="uni-input" value="hello uni-app x" /> <input id="uni-input-default" class="uni-input" value="hello uni-app x" />
</view> </view>
</view> </view>
...@@ -17,16 +17,16 @@ ...@@ -17,16 +17,16 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">type取值(不同输入法表现可能不一致)</text> <text class="uni-title-text">type取值(不同输入法表现可能不一致)</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" /> <input id="uni-input-type-text" class="uni-input" type="text" placeholder="文本输入键盘" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" /> <input id="uni-input-type-number" class="uni-input" type="number" placeholder="数字输入键盘" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" /> <input id="uni-input-type-digit" class="uni-input" type="digit" placeholder="带小数点的数字输入键盘" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" /> <input id="uni-input-type-tel" class="uni-input" :type="inputTypeTel" placeholder="电话输入键盘" />
</view> </view>
</view> </view>
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">密码输入框</text> <text class="uni-title-text">密码输入框</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" /> <input id="uni-input-password" class="uni-input" :password="inputPassword" :value="inputPasswordValue" />
</view> </view>
</view> </view>
...@@ -44,10 +44,10 @@ ...@@ -44,10 +44,10 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">占位符样式</text> <text class="uni-title-text">占位符样式</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle" placeholder="占位符文字颜色为红色" /> <input id="uni-input-placeholder1" class="uni-input" :placeholder-style="inputPlaceHolderStyle" placeholder="占位符文字颜色为红色" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass" placeholder="占位符背景色为绿色" /> <input id="uni-input-placeholder2" class="uni-input" :placeholder-class="inputPlaceHolderClass" placeholder="占位符背景色为绿色" />
</view> </view>
</view> </view>
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">设置禁用输入框</text> <text class="uni-title-text">设置禁用输入框</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-disable" class="uni-input" :disabled="true" /> <input id="uni-input-disable" class="uni-input" :disabled="true" />
</view> </view>
</view> </view>
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">设置最大输入长度</text> <text class="uni-title-text">设置最大输入长度</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10" :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" /> <input id="uni-input-maxlength" class="uni-input" :maxlength="10" placeholder="最大输入长度为10" :value="inputMaxLengthValue" @input="onMaxLengthInput" :focus="inputMaxLengthFocus" />
</view> </view>
</view> </view>
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">设置光标与键盘的距离</text> <text class="uni-title-text">设置光标与键盘的距离</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" /> <input class="uni-input" :cursor-spacing="1000" placeholder="光标与键盘的距离为1000px" />
</view> </view>
</view> </view>
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">自动获取焦点</text> <text class="uni-title-text">自动获取焦点</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-focus" class="uni-input" :focus="focus" @keyboardheightchange="inputFocusKeyBoardChange"/> <input id="uni-input-focus" class="uni-input" :focus="focus" @keyboardheightchange="inputFocusKeyBoardChange"/>
</view> </view>
</view> </view>
...@@ -92,19 +92,19 @@ ...@@ -92,19 +92,19 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">confirm-type取值(不同输入法表现可能不一致)</text> <text class="uni-title-text">confirm-type取值(不同输入法表现可能不一致)</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" /> <input id="uni-input-confirm-send" class="uni-input" confirmType="send" placeholder="键盘右下角按钮显示为发送" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" /> <input id="uni-input-confirm-search" class="uni-input" confirmType="search" placeholder="键盘右下角按钮显示为搜索" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" /> <input id="uni-input-confirm-next" class="uni-input" confirmType="next" placeholder="键盘右下角按钮显示为下一个" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" /> <input id="uni-input-confirm-go" class="uni-input" confirmType="go" placeholder="键盘右下角按钮显示为前往" />
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" /> <input id="uni-input-confirm-done" class="uni-input" confirmType="done" placeholder="键盘右下角按钮显示为完成" />
</view> </view>
</view> </view>
...@@ -113,7 +113,7 @@ ...@@ -113,7 +113,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text> <text class="uni-title-text">点击键盘右下角按钮时保持键盘不收起</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" :confirm-hold="true" /> <input class="uni-input" :confirm-hold="true" />
</view> </view>
</view> </view>
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
<view class="uni-title" @click="setCursor(4)"> <view class="uni-title" @click="setCursor(4)">
<text class="uni-title-text">设置输入框聚焦时光标的位置(点击生效)</text> <text class="uni-title-text">设置输入框聚焦时光标的位置(点击生效)</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input ref="input" class="uni-input" value="0123456789" :cursor="cursor" /> <input ref="input" class="uni-input" value="0123456789" :cursor="cursor" />
</view> </view>
</view> </view>
...@@ -131,7 +131,7 @@ ...@@ -131,7 +131,7 @@
<view class="uni-title" @click="setSelection(0, 4)"> <view class="uni-title" @click="setSelection(0, 4)">
<text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置(点击生效)</text> <text class="uni-title-text">设置输入框聚焦时光标的起始位置和结束位置(点击生效)</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart" :selection-end="selectionEnd" /> <input ref="input2" class="uni-input" value="0123456789" :selection-start="selectionStart" :selection-end="selectionEnd" />
</view> </view>
</view> </view>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<view class="uni-title" @click="changeCursorColor"> <view class="uni-title" @click="changeCursorColor">
<text class="uni-title-text">设置光标颜色为透明(点击本行文字生效,再点复位)</text> <text class="uni-title-text">设置光标颜色为透明(点击本行文字生效,再点复位)</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" /> <input id="uni-input-cursor-color" class="uni-input" :cursor-color="cursor_color" value="光标颜色" />
</view> </view>
</view> </view>
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">键盘弹起时,自动上推页面</text> <text class="uni-title-text">键盘弹起时,自动上推页面</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" :adjust-position="true" /> <input class="uni-input" :adjust-position="true" />
</view> </view>
</view> </view>
...@@ -159,7 +159,7 @@ ...@@ -159,7 +159,7 @@
<text class="uni-title-text">input事件</text> <text class="uni-title-text">input事件</text>
<text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text> <text class="uni-subtitle-text" v-if="inputEventDetail">{{inputEventDetail}}</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" @input="onInput" /> <input class="uni-input" @input="onInput" />
</view> </view>
</view> </view>
...@@ -169,7 +169,7 @@ ...@@ -169,7 +169,7 @@
<text class="uni-title-text">focus事件和blur事件</text> <text class="uni-title-text">focus事件和blur事件</text>
<text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text> <text class="uni-subtitle-text" v-if="focusAndBlurEventDetail">{{focusAndBlurEventDetail}}</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" @focus="onFocus" @blur="onBlur" /> <input class="uni-input" @focus="onFocus" @blur="onBlur" />
</view> </view>
</view> </view>
...@@ -179,7 +179,7 @@ ...@@ -179,7 +179,7 @@
<text class="uni-title-text">confirm事件</text> <text class="uni-title-text">confirm事件</text>
<text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text> <text class="uni-subtitle-text" v-if="confirmEventDetail">{{confirmEventDetail}}</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" @confirm="onConfirm" /> <input class="uni-input" @confirm="onConfirm" />
</view> </view>
</view> </view>
...@@ -189,7 +189,7 @@ ...@@ -189,7 +189,7 @@
<text class="uni-title-text">keyboardheightchange事件</text> <text class="uni-title-text">keyboardheightchange事件</text>
<text class="uni-subtitle-text" v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text> <text class="uni-subtitle-text" v-if="keyboardHeightChangeEventDetail">{{keyboardHeightChangeEventDetail}}</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" /> <input class="uni-input" @keyboardheightchange="onKeyborardHeightChange" />
</view> </view>
</view> </view>
...@@ -198,7 +198,7 @@ ...@@ -198,7 +198,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">带清除按钮的输入框</text> <text class="uni-title-text">带清除按钮的输入框</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" /> <input class="uni-input" placeholder="带清除按钮的输入框" :value="inputClearValue" @input="clearInput" />
<image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon"> <image class="uni-icon" src="/static/icons/clear.png" v-if="showClearIcon" @click="clearIcon">
</image> </image>
...@@ -209,7 +209,7 @@ ...@@ -209,7 +209,7 @@
<view class="uni-title"> <view class="uni-title">
<text class="uni-title-text">可查看密码的输入框</text> <text class="uni-title-text">可查看密码的输入框</text>
</view> </view>
<view class="uni-input-wrapper"> <view class="input-wrapper">
<input class="uni-input" placeholder="请输入密码" :password="showPassword" /> <input class="uni-input" placeholder="请输入密码" :password="showPassword" />
<image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'" @click="changePassword"></image> <image class="uni-icon" :src="!showPassword ? '/static/icons/eye-active.png' : '/static/icons/eye.png'" @click="changePassword"></image>
</view> </view>
...@@ -313,7 +313,7 @@ ...@@ -313,7 +313,7 @@
</script> </script>
<style scoped> <style scoped>
.uni-input-wrapper { .input-wrapper {
display: flex; display: flex;
padding: 8px 13px; padding: 8px 13px;
margin: 10rpx 0; margin: 10rpx 0;
......
const PAGE_PATH = '/pages/component/mixin-datacom/mixin-datacom' const PAGE_PATH = '/pages/component/mixin-datacom/mixin-datacom'
describe('mixin-datacom', () => { describe('mixin-datacom', () => {
if (process.env.uniTestPlatformInfo.startsWith('web')) {
it('dummyTest', async () => {
expect(1).toBe(1)
})
return
}
let page let page
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH) page = await program.reLaunch(PAGE_PATH)
......
...@@ -41,20 +41,20 @@ describe('PickerView.uvue', () => { ...@@ -41,20 +41,20 @@ describe('PickerView.uvue', () => {
indicatorStyle: 'height: 100px;', indicatorStyle: 'height: 100px;',
}) })
await page.waitFor(500) await page.waitFor(500)
expect(await el.property('indicatorStyle')).toBe('height: 100px;') expect(await el.attribute('indicatorStyle')).toBe('height: 100px;')
}) })
it('mask-top-style', async () => { it('mask-top-style', async () => {
const el = await page.$('.picker-view') const el = await page.$('.picker-view')
await page.setData({ await page.setData({
maskTopStyle: 'background: #ffffff;', maskTopStyle: 'background: #ffffff;',
}) })
expect(await el.property('mask-top-style')).toBe('background: #ffffff;') expect(await el.attribute('mask-top-style')).toBe('background: #ffffff;')
}) })
it('mask-bottom-style', async () => { it('mask-bottom-style', async () => {
const el = await page.$('.picker-view') const el = await page.$('.picker-view')
await page.setData({ await page.setData({
maskBottomStyle: 'background: #ffffff;', maskBottomStyle: 'background: #ffffff;',
}) })
expect(await el.property('mask-bottom-style')).toBe('background: #ffffff;') expect(await el.attribute('mask-bottom-style')).toBe('background: #ffffff;')
}) })
}) })
...@@ -16,22 +16,22 @@ describe('Progress.uvue', () => { ...@@ -16,22 +16,22 @@ describe('Progress.uvue', () => {
await page.callMethod('setProgress') await page.callMethod('setProgress')
await page.waitFor(1000); await page.waitFor(1000);
const p = await page.$('.p') const p = await page.$('.p')
expect(await p.property('percent')).toEqual(20) expect(await p.attribute('percent')).toEqual(20 + '')
const p1 = await page.$('.p1') const p1 = await page.$('.p1')
expect(await p1.property('percent')).toEqual(40) expect(await p1.attribute('percent')).toEqual(40 + '')
const p2 = await page.$('.p2') const p2 = await page.$('.p2')
expect(await p2.property('percent')).toEqual(60) expect(await p2.attribute('percent')).toEqual(60 + '')
const p3 = await page.$('.p3') const p3 = await page.$('.p3')
expect(await p3.property('percent')).toEqual(80) expect(await p3.attribute('percent')).toEqual(80 + '')
if (process.env.UNI_PLATFORM === 'app-android') { if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('curPercent')).toEqual(20) expect(await getData('curPercent')).toEqual(20)
} }
await page.callMethod('clearProgress') await page.callMethod('clearProgress')
await page.waitFor(1000) await page.waitFor(1000)
expect(await p.property('percent')).toEqual(0) expect(await p.attribute('percent')).toEqual(0 + '')
expect(await p1.property('percent')).toEqual(0) expect(await p1.attribute('percent')).toEqual(0 + '')
expect(await p2.property('percent')).toEqual(0) expect(await p2.attribute('percent')).toEqual(0 + '')
expect(await p3.property('percent')).toEqual(0) expect(await p3.attribute('percent')).toEqual(0 + '')
if (process.env.UNI_PLATFORM === 'app-android') { if (process.env.UNI_PLATFORM === 'app-android') {
expect(await getData('curPercent')).toEqual(0) expect(await getData('curPercent')).toEqual(0)
} }
...@@ -42,42 +42,42 @@ describe('Progress.uvue', () => { ...@@ -42,42 +42,42 @@ describe('Progress.uvue', () => {
}) })
it('show-info', async () => { it('show-info', async () => {
const el = await page.$('.p') const el = await page.$('.p')
expect(await el.property('show-info')).toEqual(true) expect(await el.attribute('show-info')).toEqual(true + '')
await page.setData({ await page.setData({
showInfo: false showInfo: false
}) })
expect(await el.property('show-info')).toEqual(false) expect(await el.attribute('show-info')).toEqual(false + '')
}) })
it('border-radius', async () => { it('border-radius', async () => {
const el = await page.$('.p') const el = await page.$('.p')
expect(await el.property('border-radius')).toEqual(0) expect(await el.attribute('border-radius')).toEqual(0 + '')
await page.setData({ await page.setData({
borderRadius: 5 borderRadius: 5
}) })
expect(await el.property('border-radius')).toEqual(5) expect(await el.attribute('border-radius')).toEqual(5 + '')
}) })
it('font-size', async () => { it('font-size', async () => {
const el = await page.$('.p') const el = await page.$('.p')
expect(await el.property('font-size')).toEqual(16) expect(await el.attribute('font-size')).toEqual(16 + '')
await page.setData({ await page.setData({
fontSize: 18 fontSize: 18
}) })
expect(await el.property('font-size')).toEqual(18) expect(await el.attribute('font-size')).toEqual(18 + '')
}) })
it('stroke-width', async () => { it('stroke-width', async () => {
const el = await page.$('.p') const el = await page.$('.p')
expect(await el.property('stroke-width')).toEqual(3) expect(await el.attribute('stroke-width')).toEqual(3 + '')
await page.setData({ await page.setData({
strokeWidth: 6 strokeWidth: 6
}) })
expect(await el.property('stroke-width')).toEqual(6) expect(await el.attribute('stroke-width')).toEqual(6 + '')
}) })
it('backgroundColor', async () => { it('backgroundColor', async () => {
const el = await page.$('.p') const el = await page.$('.p')
expect(await el.property('background-color')).toEqual('#EBEBEB') expect(await el.attribute('background-color')).toEqual('#EBEBEB')
await page.setData({ await page.setData({
backgroundColor: "#007aff" backgroundColor: "#007aff"
}) })
expect(await el.property('background-color')).toEqual('#007aff') expect(await el.attribute('background-color')).toEqual('#007aff')
}) })
}) })
...@@ -48,18 +48,18 @@ describe('Radio.uvue', () => { ...@@ -48,18 +48,18 @@ describe('Radio.uvue', () => {
}) })
it('color', async () => { it('color', async () => {
const radio = await page.$('.r') const radio = await page.$('.r')
expect(await radio.property('color')).toBe('#007aff') expect(await radio.attribute('color')).toBe('#007aff')
await page.setData({ await page.setData({
color: '#63acfc', color: '#63acfc',
}) })
expect(await radio.property('color')).toBe('#63acfc') expect(await radio.attribute('color')).toBe('#63acfc')
}) })
it('disabled', async () => { it('disabled', async () => {
const radio = await page.$('.r2') const radio = await page.$('.r2')
expect(await radio.property('disabled')).toBe(true) expect(await radio.attribute('disabled')).toBe(true + '')
await page.setData({ await page.setData({
disabled: false, disabled: false,
}) })
expect(await radio.property('disabled')).toBe(false) expect(await radio.attribute('disabled')).toBe(false + '')
}) })
}) })
...@@ -25,7 +25,7 @@ describe('component-native-scroll-view', () => { ...@@ -25,7 +25,7 @@ describe('component-native-scroll-view', () => {
}) })
await page.waitFor(600) await page.waitFor(600)
const element = await page.$('#scrollViewY') const element = await page.$('#scrollViewY')
const scrollTop = await element.attribute("scrollTop") const scrollTop = await element.property("scrollTop")
console.log("check_scroll_top---"+scrollTop) console.log("check_scroll_top---"+scrollTop)
expect(scrollTop-600).toBeGreaterThanOrEqual(0) expect(scrollTop-600).toBeGreaterThanOrEqual(0)
}) })
...@@ -37,7 +37,7 @@ describe('component-native-scroll-view', () => { ...@@ -37,7 +37,7 @@ describe('component-native-scroll-view', () => {
}) })
await page.waitFor(600) await page.waitFor(600)
const element = await page.$('#scrollViewY') const element = await page.$('#scrollViewY')
const scrollTop = await element.attribute("scrollTop") const scrollTop = await element.property("scrollTop")
console.log("check_scroll_into_view_top--"+scrollTop) console.log("check_scroll_into_view_top--"+scrollTop)
await page.setData({ await page.setData({
scrollIntoView: "" scrollIntoView: ""
...@@ -62,7 +62,7 @@ describe('component-native-scroll-view', () => { ...@@ -62,7 +62,7 @@ describe('component-native-scroll-view', () => {
}) })
await page.waitFor(600) await page.waitFor(600)
const element = await page.$('#scrollViewX') const element = await page.$('#scrollViewX')
const scrollLeft = await element.attribute("scrollLeft") const scrollLeft = await element.property("scrollLeft")
console.log("check_scroll_left---"+scrollLeft) console.log("check_scroll_left---"+scrollLeft)
expect(scrollLeft-600).toBeGreaterThanOrEqual(0) expect(scrollLeft-600).toBeGreaterThanOrEqual(0)
}) })
...@@ -74,7 +74,7 @@ describe('component-native-scroll-view', () => { ...@@ -74,7 +74,7 @@ describe('component-native-scroll-view', () => {
}) })
await page.waitFor(600) await page.waitFor(600)
const element = await page.$('#scrollViewX') const element = await page.$('#scrollViewX')
const scrollLeft = await element.attribute("scrollLeft") const scrollLeft = await element.property("scrollLeft")
console.log("check_scroll_into_view_left--"+scrollLeft) console.log("check_scroll_into_view_left--"+scrollLeft)
await page.setData({ await page.setData({
scrollIntoView: "" scrollIntoView: ""
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
<!-- 暂时分成两个方向不同的滚动视图,原因为:scroll-x或scroll-y属性一经设置不能动态改变。 --> <!-- 暂时分成两个方向不同的滚动视图,原因为:scroll-x或scroll-y属性一经设置不能动态改变。 -->
<scroll-view v-if="scrollX" :scroll-x="true" :scroll-y="false" :scroll-top="scrollTop" :scroll-left="scrollLeft" <scroll-view v-if="scrollX" :scroll-x="true" :scroll-y="false" :scroll-top="scrollTop" :scroll-left="scrollLeft"
:upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView" :upper-threshold="upperThreshold" :lower-threshold="lowerThreshold" :scroll-into-view="scrollIntoView"
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;" :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" style="flex-direction: row;width: 100%;height: 100%;"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper" :show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX"> @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewX" id="scrollViewX">
<view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items"> <view class="item" :id="'horizontal_'+item.id" v-for="(item,_) in items">
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
:enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation" :enable-back-to-top="enableBackToTop" :scroll-with-animation="scrollWithAnimation"
:show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper" :show-scrollbar="showScrollbar" :rebound="rebound" @scrolltoupper="scrolltoupper"
@touchmove="onTouchMove" @touchmove="onTouchMove"
@scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY"> @scrolltolower="scrolltolower" @scroll="scroll" @scrollend="scrollend" ref="scrollViewY" id="scrollViewY" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items"> <view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text> <text class="uni-text">{{item.label}}</text>
</view> </view>
......
...@@ -2,11 +2,11 @@ ...@@ -2,11 +2,11 @@
<view style="flex:1;"> <view style="flex:1;">
<page-head title="下拉刷新的scroll-view属性示例"></page-head> <page-head title="下拉刷新的scroll-view属性示例"></page-head>
<view class="uni-margin-wrap"> <view class="uni-margin-wrap">
<scroll-view :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold" <scroll-view scroll-y="true" :refresher-enabled="refresherEnabled" :refresher-threshold="refresherThreshold"
:refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground" :refresher-default-style="refresherDefaultStyle" :refresher-background="refresherBackground"
:refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling" :refresher-triggered="refresherTriggered" @refresherpulling="refresherpulling"
@refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore" @refresherrefresh="refresherrefresh" @refresherrestore="refresherrestore"
@refresherabort="refresherabort"> @refresherabort="refresherabort" style="width: 100%;height: 100%;">
<view class="item" :id="item.id" v-for="(item,_) in items"> <view class="item" :id="item.id" v-for="(item,_) in items">
<text class="uni-text">{{item.label}}</text> <text class="uni-text">{{item.label}}</text>
</view> </view>
......
<template> <template>
<!-- #ifdef APP -->
<scroll-view class="page"> <scroll-view class="page">
<!-- #endif -->
<page-head :title="title"></page-head> <page-head :title="title"></page-head>
<view class="flex-row"> <view class="flex-row">
<view class="flex-fill"> <view class="flex-fill">
...@@ -21,9 +19,7 @@ ...@@ -21,9 +19,7 @@
@change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" /> @change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
</view> </view>
</view> </view>
<!-- #ifdef APP -->
</scroll-view> </scroll-view>
<!-- #endif -->
</template> </template>
<script> <script>
......
...@@ -19,9 +19,9 @@ describe('slider', () => { ...@@ -19,9 +19,9 @@ describe('slider', () => {
}) })
it('color', async () => { it('color', async () => {
const slider = await page.$('.slider-custom-color-and-size') const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('backgroundColor')).toBe('#000000') expect(await slider.attribute('backgroundColor')).toBe('#000000')
expect(await slider.property('activeColor')).toBe('#FFCC33') expect(await slider.attribute('activeColor')).toBe('#FFCC33')
expect(await slider.property('blockColor')).toBe('#8A6DE9') expect(await slider.attribute('blockColor')).toBe('#8A6DE9')
const backgroundColor = '#008000' const backgroundColor = '#008000'
const activeColor = '#00FF00' const activeColor = '#00FF00'
...@@ -33,19 +33,19 @@ describe('slider', () => { ...@@ -33,19 +33,19 @@ describe('slider', () => {
sliderBlockColor: blockColor, sliderBlockColor: blockColor,
}) })
await page.waitFor(100) await page.waitFor(100)
expect(await slider.property('backgroundColor')).toBe(backgroundColor) expect(await slider.attribute('backgroundColor')).toBe(backgroundColor)
expect(await slider.property('activeColor')).toBe(activeColor) expect(await slider.attribute('activeColor')).toBe(activeColor)
expect(await slider.property('blockColor')).toBe(blockColor) expect(await slider.attribute('blockColor')).toBe(blockColor)
}) })
it('block-size', async () => { it('block-size', async () => {
const slider = await page.$('.slider-custom-color-and-size') const slider = await page.$('.slider-custom-color-and-size')
expect(await slider.property('blockSize')).toBe(20) expect(await slider.attribute('blockSize')).toBe(20 + '')
const blockSize = 18 const blockSize = 18
await page.setData({ await page.setData({
sliderBlockSize: blockSize, sliderBlockSize: blockSize,
}) })
await page.waitFor(100) await page.waitFor(100)
expect(await slider.property('blockSize')).toBe(blockSize) expect(await slider.attribute('blockSize')).toBe(blockSize + '')
}) })
}) })
...@@ -39,7 +39,7 @@ describe('test swiper', () => { ...@@ -39,7 +39,7 @@ describe('test swiper', () => {
expect(await getData('currentValChange')).toEqual(1) expect(await getData('currentValChange')).toEqual(1)
await page.waitFor(5000) await page.waitFor(5000)
expect(await getData('currentValChange')).toEqual(2) expect(await getData('currentValChange')).toEqual(2)
await page.waitFor(300)
await page.setData({ await page.setData({
circularSelect: true circularSelect: true
}) })
...@@ -50,6 +50,7 @@ describe('test swiper', () => { ...@@ -50,6 +50,7 @@ describe('test swiper', () => {
circularSelect: false, circularSelect: false,
autoplaySelect: false autoplaySelect: false
}) })
await page.waitFor(300)
}); });
......
...@@ -198,7 +198,6 @@ ...@@ -198,7 +198,6 @@
.uni-margin-wrap { .uni-margin-wrap {
width: 690rpx; width: 690rpx;
width: 100%; width: 100%;
;
} }
.swiper { .swiper {
......
...@@ -39,7 +39,7 @@ describe('switch', () => { ...@@ -39,7 +39,7 @@ describe('switch', () => {
}) })
it('color', async () => { it('color', async () => {
const switch_element = await page.$('.switch-color') const switch_element = await page.$('.switch-color')
expect(await switch_element.property('color')).toBe('#FFCC33') expect(await switch_element.attribute('color')).toBe('#FFCC33')
const color = '#00ff00' const color = '#00ff00'
...@@ -47,6 +47,6 @@ describe('switch', () => { ...@@ -47,6 +47,6 @@ describe('switch', () => {
color: color color: color
}) })
await page.waitFor(100) await page.waitFor(100)
expect(await switch_element.property('color')).toBe(color) expect(await switch_element.attribute('color')).toBe(color)
}) })
}) })
...@@ -12,12 +12,12 @@ describe('component-native-textarea', () => { ...@@ -12,12 +12,12 @@ describe('component-native-textarea', () => {
}); });
it('focus', async () => { it('focus', async () => {
expect(await textarea.property("focus")).toBe("false") expect(await textarea.attribute("focus")).toBe("false")
await page.setData({ await page.setData({
focus_boolean: true, focus_boolean: true,
}) })
await page.waitFor(500) await page.waitFor(500)
expect(await textarea.property("focus")).toBe("true") expect(await textarea.attribute("focus")).toBe("true")
}); });
/* it("auto-height", async () => { /* it("auto-height", async () => {
await page.setData({ await page.setData({
...@@ -66,7 +66,7 @@ describe('component-native-textarea', () => { ...@@ -66,7 +66,7 @@ describe('component-native-textarea', () => {
cursor_color: "transparent", cursor_color: "transparent",
}) })
await page.waitFor(500) await page.waitFor(500)
expect(await textarea.property("cursor-color")).toBe("transparent") expect(await textarea.attribute("cursor-color")).toBe("transparent")
}) })
it("inputmode", async () => { it("inputmode", async () => {
...@@ -76,7 +76,7 @@ describe('component-native-textarea', () => { ...@@ -76,7 +76,7 @@ describe('component-native-textarea', () => {
console.log(x['value'], x['name']) console.log(x['value'], x['name'])
await page.callMethod("radio_change_inputmode_enum", x['value']); await page.callMethod("radio_change_inputmode_enum", x['value']);
await page.waitFor(500) await page.waitFor(500)
expect(await textarea.property("inputmode")).toEqual(x['name']) expect(await textarea.attribute("inputmode")).toEqual(x['name'])
await page.waitFor(500) await page.waitFor(500)
} }
}) })
......
...@@ -27,6 +27,7 @@ ...@@ -27,6 +27,7 @@
return { return {
title: 'video-format', title: 'video-format',
supportFormats: [ supportFormats: [
// TODO web本地运行时本地服务返回的content-type不对,导致本地视频无法播放。此外web端原生video不支持flv、m3u8、avi格式,但是和app端相比多了ogg格式的支持
{ {
format: 'mp4', format: 'mp4',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4' src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4'
...@@ -47,6 +48,7 @@ ...@@ -47,6 +48,7 @@
format: '3gp', format: '3gp',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.3gp' src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.3gp'
}, },
// #ifndef WEB
{ {
format: 'flv', format: 'flv',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.flv' src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.flv'
...@@ -59,16 +61,19 @@ ...@@ -59,16 +61,19 @@
format: '本地m3u8', format: '本地m3u8',
src: '/static/test-video/2minute-demo.m3u8' src: '/static/test-video/2minute-demo.m3u8'
}, },
// #endif
{ {
format: '错误路径', format: '错误路径',
src: 'https://www.dcloud.net.cn/errorpath.mp4' src: 'https://www.dcloud.net.cn/errorpath.mp4'
}, },
] as Array<VideoFormat>, ] as Array<VideoFormat>,
notSupportFormats: [ notSupportFormats: [
// #ifndef WEB
{ {
format: 'ogg', format: 'ogg',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg' src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.ogg'
}, },
// #endif
{ {
format: 'avi', format: 'avi',
src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi' src: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.avi'
...@@ -79,7 +84,7 @@ ...@@ -79,7 +84,7 @@
}, },
methods: { methods: {
onError: function (format: string, e : VideoErrorEvent) { onError: function (format: string, e : VideoErrorEvent) {
console.log(format + ":" + e.detail); console.log(format + ":" + JSON.stringify(e));
if (format != "错误路径") { if (format != "错误路径") {
this.isError = true; this.isError = true;
} }
......
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/ // uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
jest.setTimeout(10000); jest.setTimeout(20000);
describe('component-native-video', () => { describe('component-native-video', () => {
let page; let page;
beforeAll(async () => { beforeAll(async () => {
page = await program.reLaunch('/pages/component/video/video'); page = await program.reLaunch('/pages/component/video/video');
await page.waitFor('video'); await page.waitFor('video');
await page.waitFor(300)
}); });
it('test API', async () => { it('test API', async () => {
......
...@@ -220,6 +220,11 @@ ...@@ -220,6 +220,11 @@
isFullScreen: false isFullScreen: false
} }
}, },
onLoad() {
// #ifdef WEB
this.muted = true // web端非静音视频不可自动播放
// #endif
},
methods: { methods: {
// API // API
play: function () { play: function () {
...@@ -228,7 +233,7 @@ ...@@ -228,7 +233,7 @@
}, },
pause: function () { pause: function () {
console.log("pause"); console.log("pause");
(uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃 (uni.getElementById("video") as unknown as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
// this.videoContext?.pause(); // this.videoContext?.pause();
}, },
seek: function (pos : number) { seek: function (pos : number) {
......
...@@ -37,7 +37,10 @@ ...@@ -37,7 +37,10 @@
} }
}, },
onReady() { onReady() {
// #ifdef APP
// TODO web 实现createWebviewContext
this.webviewContext = uni.createWebviewContext('web-view', this) this.webviewContext = uni.createWebviewContext('web-view', this)
// #endif
}, },
methods: { methods: {
back() { back() {
......
...@@ -66,6 +66,10 @@ ...@@ -66,6 +66,10 @@
{ {
name: 'getCurrentPages', name: 'getCurrentPages',
url: 'get-current-pages', url: 'get-current-pages',
},
{
name: 'globalProperties',
url: 'globalProperties',
} }
] as Page[], ] as Page[],
}, },
...@@ -131,21 +135,23 @@ ...@@ -131,21 +135,23 @@
id: 'ui', id: 'ui',
name: '界面', name: '界面',
pages: [ pages: [
/* { // {
name: "创建动画", // name: "创建动画",
url: "animation", // url: "animation",
enable: false // enable: false
}, // },
// #ifdef WEB
{ {
name: "创建绘画", name: "创建绘画",
url: "canvas", url: "canvas",
enable: false enable: true
}, },
{ // #endif
name: "节点布局交互状态", // {
url: "intersection-observer", // name: "节点布局交互状态",
enable: false // url: "intersection-observer",
}, */ // enable: false
// },
{ {
name: 'element元素', name: 'element元素',
url: 'get-element-by-id', url: 'get-element-by-id',
......
...@@ -93,9 +93,12 @@ export default { ...@@ -93,9 +93,12 @@ export default {
enable: false enable: false
}, },
*/ */
// #ifdef APP
// TODO web 实现list-view
{ {
name: 'list-view', name: 'list-view',
}, },
// #endif
{ {
name: 'sticky-header', name: 'sticky-header',
}, },
...@@ -205,6 +208,8 @@ export default { ...@@ -205,6 +208,8 @@ export default {
} }
] as Page[] ] as Page[]
}, },
*/
// #ifdef WEB
{ {
id: 'canvas', id: 'canvas',
name: '画布', name: '画布',
...@@ -214,7 +219,7 @@ export default { ...@@ -214,7 +219,7 @@ export default {
} }
] as Page[] ] as Page[]
}, },
*/ // #endif
{ {
id: 'web-view', id: 'web-view',
name: '网页', name: '网页',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册