Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 b66282b5 编写于 作者: dcloud_wdl's avatar dcloud_wdl
浏览文件
操作

[转正] git merge origin/alpha

上级 85ac42b6 e3af20e5
隐藏空白更改
内联 并排
Showing with 5670 addition and 2507 deletion
.gitignore
浏览文件 @ b66282b5
node_modules/
.project
/unpackage/*
!/unpackage/icon1024.png
unpackage/
.DS_Store
.hbuilderx/
__image_snapshots__/
......
changelog.md
浏览文件 @ b66282b5
## 1.0.27
* update 4.23.2024070309-alpha
## 1.0.25
* update 4.22.2024062415-alpha
## 1.0.24
* update 4.21.2024061818-alpha
......
components/api-set-tabbar/api-set-tabbar.vue
浏览文件 @ b66282b5
......@@ -112,14 +112,16 @@
color: '#7A7E83',
selectedColor: '#007AFF',
backgroundColor: '#F8F8F8',
borderStyle: 'black'
borderStyle: 'black',
// 新增 borderColor，优先级高于 borderStyle
// borderColor:'red'
})
} else {
uni.setTabBarStyle({
color: '#FFF',
selectedColor: '#007AFF',
backgroundColor: '#000000',
borderStyle: 'black'
borderStyle: 'black',
})
}
this.hasCustomedStyle = !this.hasCustomedStyle
......
hybrid/html/local.html
浏览文件 @ b66282b5
......@@ -48,6 +48,8 @@
<input type="file" accept="image/*" multiple />
<p style="font-size: 14px;">普通input</p>
<input placeholder="底部输入框"/>
<br/>
<a href="https://web-ext-storage.dcloud.net.cn/uni-app-x/pkg/hello-uniappx.apk" download>hello uni-app x apk下载（自动化测试使用）</a>
</div>
<!-- uni 的 SDK -->
<script type="text/javascript" src="uni.webview.1.5.5.js"></script>
......
jest.config.js
浏览文件 @ b66282b5
// 自动化测试
// 备注：
//
// 1. testPathIgnorePatterns 忽略/pages/API的几条用例，是因为在ios设备上，运行会导致app崩溃。后期完成后，再去除。
// 2. testPathIgnorePatterns 忽略webview相关用例, 是因为采用app-webview方式后，不需要这两个用例。请勿修改和提交到Git。
//
const path = require('path')
module.exports = {
testTimeout: 30000,
......@@ -15,8 +9,7 @@ module.exports = {
testMatch: ["<rootDir>/pages/**/*test.[jt]s?(x)"],
testPathIgnorePatterns: [
'/node_modules/',
'<rootDir>/pages/webview-screenshot-comparison/webview-screenshot-comparison.test.js',
'<rootDir>/pages/webview-screenshot/webview-screenshot.test.js'
],
setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
testSequencer: path.join(__dirname, "testSequencer.js")
}
manifest.json
浏览文件 @ b66282b5
......@@ -47,7 +47,11 @@
},
"icons" : {
"ios" : {
"appstore" : "unpackage/icon1024.png"
"appstore" : "package/icon1024.png"
},
"android" : {
"xxhdpi" : "package/icon144.png",
"xxxhdpi" : "package/icon192.png"
}
}
}
......
package.json
浏览文件 @ b66282b5
......@@ -2,10 +2,10 @@
"id": "hello-uniapp-x-alpha",
"name": "hello-uniapp-x-alpha",
"displayName": "hello-uniapp-x-alpha",
"version": "1.0.24",
"version": "1.0.27",
"description": "演示 uni-app x 框架的组件、接口、模板",
"scripts": {
"check-commit": "node ./git-hooks/check-commit.cjs"
"check-commit": "node ./git-hooks/check-commit.cjs"
},
"repository": "https://gitcode.net/dcloud/hello-uni-app-x",
"keywords": [
......@@ -88,4 +88,4 @@
}
}
}
}
}
\ No newline at end of file
pages.json
浏览文件 @ b66282b5
......@@ -56,6 +56,13 @@
"navigationBarTitleText": "list-view"
}
},
{
"path": "pages/component/list-view/list-view-refresh",
"style": {
"navigationBarTitleText": "list-view-refresh",
"enablePullDownRefresh": false
}
},
{
"path": "pages/component/list-view/list-view-multiplex",
"style": {
......@@ -330,6 +337,107 @@
"navigationBarTitleText": "touch-event"
}
},
{
"path": "pages/component/nested-scroll-header/nested-scroll-header",
"style": {
"navigationBarTitleText": "nested-scroll-header"
}
},
{
"path": "pages/component/nested-scroll-body/nested-scroll-body",
"style": {
"navigationBarTitleText": "nested-scroll-body"
}
},
{
"path" : "pages/component/swiper/swiper-list-view",
"style" :
{
"navigationBarTitleText" : "swiper嵌套list-view",
"enablePullDownRefresh" : false
}
},
// #ifdef WEB
{
"path" : "pages/component/movable-view/movable-view",
"style" :
{
"navigationBarTitleText" : "movable-view"
}
},
{
"path" : "pages/component/label/label",
"style" :
{
"navigationBarTitleText" : "label"
}
},
{
"path" : "pages/component/picker/picker",
"style" :
{
"navigationBarTitleText" : "picker"
}
},
{
"path" : "pages/component/map/map",
"style" :
{
"navigationBarTitleText" : "map"
}
},
{
"path" : "pages/component/cover-view/cover-view",
"style" :
{
"navigationBarTitleText" : "cover-view"
}
},
{
"path" : "pages/component/editor/editor",
"style" :
{
"navigationBarTitleText" : "editor"
}
},
{
"path" : "pages/API/open-location/open-location",
"style" :
{
"navigationBarTitleText" : "open-location"
}
},
{
"path" : "pages/API/choose-location/choose-location",
"style" :
{
"navigationBarTitleText" : "choose-location"
}
},
// #endif
{
"path": "pages/component/list-view/issue-2199",
"style": {
"navigationBarTitleText": "issue-2199",
"enablePullDownRefresh": false
}
},
// #ifdef WEB
{
"path" : "pages/component/canvas/canvas",
"style" :
{
"navigationBarTitleText" : "canvas"
}
},
{
"path" : "pages/component/canvas/ball",
"style" :
{
"navigationBarTitleText" : "ball"
}
},
// #endif
{
"path": "pages/tabBar/API",
"style": {
......@@ -747,6 +855,20 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/rewarded-video-ad/rewarded-video-ad",
"style": {
"navigationBarTitleText": "激励视频广告",
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/request-payment/request-payment",
"style": {
"navigationBarTitleText": "支付",
"enablePullDownRefresh": false
}
},
// #endif
{
"path": "pages/API/rpx2px/rpx2px",
......@@ -755,6 +877,82 @@
"enablePullDownRefresh": false
}
},
// #ifdef APP || WEB
{
"path": "pages/API/request-payment-uni-pay/request-payment-uni-pay",
"style": {
"navigationBarTitleText": "uni-pay示例",
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/request-payment-uni-pay/order-detail",
"style": {
"navigationBarTitleText": "订单详情示例",
"enablePullDownRefresh": false
}
},
// #endif
{
"path" : "pages/API/resize-observer/resize-observer",
"style" :
{
"navigationBarTitleText" : "resize observer"
}
},
// #ifdef WEB
{
"path" : "pages/API/make-phone-call/make-phone-call",
"style" :
{
"navigationBarTitleText" : "make-phone-call"
}
},
{
"path" : "pages/API/inner-audio/inner-audio",
"style" :
{
"navigationBarTitleText" : "inner-audio"
}
},
{
"path" : "pages/API/inner-audio/inner-audio-format",
"style" :
{
"navigationBarTitleText" : "inner-audio-format"
}
},
{
"path" : "pages/API/inner-audio/inner-audio-path",
"style" :
{
"navigationBarTitleText" : "inner-audio-path"
}
},
{
"path" : "pages/API/clipboard/clipboard",
"style" :
{
"navigationBarTitleText" : "clipboard"
}
},
{
"path" : "pages/API/on-compass-change/on-compass-change",
"style" :
{
"navigationBarTitleText" : "on-compass-change"
}
},
// #endif
// #ifdef APP
{
"path": "pages/API/theme-change/theme-change",
"style": {
"navigationBarTitleText": "主题切换",
"enablePullDownRefresh": false
}
},
// #endif
{
"path": "pages/tabBar/CSS",
"style": {
......@@ -1128,6 +1326,13 @@
"navigationBarTitleText": "css 变量"
}
},
{
"path" : "pages/CSS/overflow/overflow-visible-event",
"style" :
{
"navigationBarTitleText" : "overflow-visible-event"
}
},
{
"path": "pages/tabBar/template",
"style": {
......@@ -1167,7 +1372,8 @@
{
"path": "pages/template/swiper-vertical-video/swiper-vertical-video",
"style": {
"navigationStyle": "custom"
"navigationStyle": "custom",
"backgroundColorContent": "#000000"
}
},
// #ifdef APP
......@@ -1239,86 +1445,9 @@
},
// #ifdef WEB
{
"path": "pages/template/browser-canvas/browser-canvas",
"path": "pages/template/browser-element/browser-element",
"style": {
"navigationBarTitleText": "如何使用浏览器 canvas"
}
},
{
"path" : "pages/component/movable-view/movable-view",
"style" :
{
"navigationBarTitleText" : "movable-view"
}
},
{
"path" : "pages/component/label/label",
"style" :
{
"navigationBarTitleText" : "label"
}
},
{
"path" : "pages/component/picker/picker",
"style" :
{
"navigationBarTitleText" : "picker"
}
},
{
"path" : "pages/component/map/map",
"style" :
{
"navigationBarTitleText" : "map"
}
},
{
"path" : "pages/component/cover-view/cover-view",
"style" :
{
"navigationBarTitleText" : "cover-view"
}
},
{
"path" : "pages/component/editor/editor",
"style" :
{
"navigationBarTitleText" : "editor"
}
},
{
"path" : "pages/API/map/map",
"style" :
{
"navigationBarTitleText" : "map"
}
},
{
"path" : "pages/API/make-phone-call/make-phone-call",
"style" :
{
"navigationBarTitleText" : "make-phone-call"
}
},
{
"path" : "pages/API/inner-audio/inner-audio",
"style" :
{
"navigationBarTitleText" : "inner-audio"
}
},
{
"path" : "pages/API/inner-audio/inner-audio-format",
"style" :
{
"navigationBarTitleText" : "inner-audio-format"
}
},
{
"path" : "pages/API/inner-audio/inner-audio-path",
"style" :
{
"navigationBarTitleText" : "inner-audio-path"
"navigationBarTitleText": "如何使用浏览器 element"
}
},
// #endif
......@@ -1329,13 +1458,6 @@
"navigationBarTitleText": "日历"
}
},
{
"path": "pages/API/theme-change/theme-change",
"style": {
"navigationBarTitleText": "主题切换",
"enablePullDownRefresh": false
}
},
// #endif
{
"path": "pages/template/schema/schema",
......@@ -1351,13 +1473,6 @@
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/rewarded-video-ad/rewarded-video-ad",
"style": {
"navigationBarTitleText": "激励视频广告",
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/create-request-permission-listener/create-request-permission-listener",
"style": {
......@@ -1366,56 +1481,7 @@
}
},
// #endif
{
"path": "pages/component/list-view/list-view-refresh",
"style": {
"navigationBarTitleText": "list-view-refresh",
"enablePullDownRefresh": false
}
},
{
"path": "pages/component/nested-scroll-header/nested-scroll-header",
"style": {
"navigationBarTitleText": "nested-scroll-header"
}
},
{
"path": "pages/component/nested-scroll-body/nested-scroll-body",
"style": {
"navigationBarTitleText": "nested-scroll-body"
}
},
{
"path": "pages/component/list-view/issue-2199",
"style": {
"navigationBarTitleText": "issue-2199",
"enablePullDownRefresh": false
}
},
// #ifdef APP
{
"path": "pages/API/request-payment/request-payment",
"style": {
"navigationBarTitleText": "支付",
"enablePullDownRefresh": false
}
},
// #endif
// #ifdef APP || WEB
{
"path": "pages/API/request-payment-uni-pay/request-payment-uni-pay",
"style": {
"navigationBarTitleText": "uni-pay示例",
"enablePullDownRefresh": false
}
},
{
"path": "pages/API/request-payment-uni-pay/order-detail",
"style": {
"navigationBarTitleText": "订单详情示例",
"enablePullDownRefresh": false
}
},
{
"path": "uni_modules/uni-pay-x/pages/success/success",
"style": {
......@@ -1447,14 +1513,6 @@
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/component/swiper/swiper-list-view",
"style" :
{
"navigationBarTitleText" : "swiper嵌套list-view",
"enablePullDownRefresh" : false
}
},
{
"path" : "pages/template/test-background-color-content/test-background-color-content",
"style" :
......@@ -1462,20 +1520,6 @@
"navigationBarTitleText" : "",
"backgroundColorContent": "#fffae8"
}
},
{
"path" : "pages/API/resize-observer/resize-observer",
"style" :
{
"navigationBarTitleText" : "resize observer"
}
},
{
"path" : "pages/CSS/overflow/overflow-visible-event",
"style" :
{
"navigationBarTitleText" : "overflow-visible-event"
}
}
],
"globalStyle": {
......
pages/API/choose-location/choose-location.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view style="background:#FFFFFF; padding:40rpx;">
<view class="uni-hello-text uni-center">当前位置信息</view>
<block v-if="hasLocation === false">
<view class="uni-h2 uni-center uni-common-mt">未选择位置</view>
</block>
<block v-if="hasLocation === true">
<view class="uni-hello-text uni-center" style="margin-top:10px;">
{{locationAddress}}
</view>
<view class="uni-h2 uni-center uni-common-mt">
<text>E: {{location.longitude[0]}}°{{location.longitude[1]}}′</text>
<text>\nN: {{location.latitude[0]}}°{{location.latitude[1]}}′</text>
</view>
</block>
</view>
<view class="uni-btn-v">
<button type="primary" @tap="chooseLocation">选择位置</button>
<button @tap="clear">清空</button>
</view>
</view>
</view>
</template>
<script lang="uts">
function formatLocation(longitude, latitude) {
if (typeof longitude === 'string' && typeof latitude === 'string') {
longitude = parseFloat(longitude)
latitude = parseFloat(latitude)
}
longitude = longitude.toFixed(2)
latitude = latitude.toFixed(2)
return {
longitude: longitude.toString().split('.'),
latitude: latitude.toString().split('.')
}
}
export default {
data() {
return {
title: 'chooseLocation',
hasLocation: false,
location: {},
locationAddress: ''
}
},
methods: {
chooseLocation: function () {
uni.chooseLocation({
success: (res) => {
console.log(res,123)
this.hasLocation = true,
this.location = formatLocation(res.longitude, res.latitude),
this.locationAddress = res.address
}
})
},
clear: function () {
this.hasLocation = false
}
}
}
</script>
<style>
.page-body-info {
padding-bottom: 0;
height: 440rpx;
}
</style>
pages/API/clipboard/clipboard.test.js 0 → 100644
浏览文件 @ b66282b5
let page;
describe('web-clipboard', () => {
console.log("uniTestPlatformInfo", process.env.uniTestPlatformInfo)
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/API/clipboard/clipboard')
await page.waitFor('view');
await page.setData({data:'123456'})
});
it('setClipboardData', async () => {
await page.callMethod('setClipboard')
await page.waitFor(500);
console.log(await page.data('setClipboardTest'),'setClipboardTest')
// bug：自动化测试时设置成功也进入了fail
// expect(await page.data('setClipboardTest')).toBeTruthy()
});
it('getClipboardData', async () => {
await page.callMethod('getClipboard')
expect(await page.data('getDataTest')).toBe('123456')
});
});
pages/API/clipboard/clipboard.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title">请输入剪贴板内容</view>
<view class="uni-list">
<view class="uni-list-cell">
<input class="uni-input" type="text" placeholder="请输入剪贴板内容" :value="data" @input="dataChange"/>
</view>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setClipboard">存储数据</button>
<button @tap="getClipboard">读取数据</button>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'get/setClipboardData',
data: '',
// 自动化测试
getDataTest:'',
setClipboardTest: false
}
},
methods: {
dataChange: function (e) {
this.data = e.detail.value
},
getClipboard: function () {
uni.getClipboardData({
success: (res) => {
console.log(res.data);
this.getDataTest = res.data;
const content = res.data ? '剪贴板内容为:' + res.data : '剪贴板暂无内容';
uni.showModal({
content,
title: '读取剪贴板',
showCancel: false
})
},
fail: () => {
uni.showModal({
content: '读取剪贴板失败!',
showCancel: false
})
}
});
},
setClipboard: function () {
if (this.data.length === 0) {
uni.showModal({
title: '设置剪贴板失败',
content: '内容不能为空',
showCancel: false
})
} else {
uni.setClipboardData({
data: this.data,
success: () => {
this.setClipboardTest = true
// 成功处理
uni.showToast({
title: '设置剪贴板成功',
icon: "success",
mask: !1
})
},
fail: () => {
// bug：自动化测试时设置成功也进入了fail
this.setClipboardTest = false
// 失败处理
uni.showToast({
title: '储存数据失败!',
icon: "none",
mask: !1
})
}
});
}
}
}
}
</script>
<style>
</style>
pages/API/compress-image/compress-image.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-compressImage', () => {
if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/compress-image/compress-image');
await page.waitFor(500);
});
it('test compressImage', async () => {
await page.callMethod('testCompressImage');
await page.waitFor(1000);
expect(await page.data('imageInfoForTest')).toEqual({
width: 100,
height: 100,
isSizeReduce: true
});
});
});
pages/API/compress-image/compress-image.uvue
浏览文件 @ b66282b5
......@@ -52,7 +52,10 @@
compressedHeight: null as number | null,
width: "auto",
height: "auto",
rotate: 0
rotate: 0,
// 自动化测试
imageInfoForTest: null,
imageSrcForTest: '/static/test-image/logo.png'
}
},
methods: {
......@@ -103,7 +106,7 @@
complete: (_) => {
uni.hideLoading();
}
})
});
},
chooseImage() {
uni.chooseImage({
......@@ -142,6 +145,34 @@
},
onRotateConfirm(value : number) {
this.rotate = value;
},
testCompressImage() {
uni.compressImage({
src: this.imageSrcForTest,
quality: 50,
compressedWidth: 100,
compressedHeight: 100,
success: (res) => {
uni.getImageInfo({
src: res.tempFilePath,
success: (_res) => {
let beforeCompressSize: number, afterComoressSize: number;
// #ifdef APP-ANDROID
beforeCompressSize = new FileInputStream(UTSAndroid.convert2AbsFullPath(this.imageSrcForTest)).available();
afterComoressSize = new FileInputStream(res.tempFilePath.substring("file://".length)).available();
// #endif
this.imageInfoForTest = {
"width": _res.width,
"height": _res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
},
fail: (_) => {
this.imageInfoForTest = null;
}
});
}
}
}
......
pages/API/compress-video/compress-video.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-compressVideo', () => {
if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/compress-video/compress-video');
await page.waitFor(500);
});
it('test compressVideo', async () => {
await page.callMethod('testCompressVideo');
await page.waitFor(5000);
if (process.env.uniTestPlatformInfo.startsWith('android')) {
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (version == 5 || version == 7 || version == 10) return; // android5.1、android7、android10存在兼容问题，待修复
expect(await page.data('videoInfoForTest')).toEqual({
width: 640,
height: 360,
// isSizeReduce: true
isSizeReduce: false // android平台对测试视频进行压缩后存在视频变大的问题，待修复
});
return;
}
expect(await page.data('videoInfoForTest')).toEqual({
width: 640,
height: 360,
isSizeReduce: true
});
});
});
pages/API/compress-video/compress-video.uvue
浏览文件 @ b66282b5
......@@ -46,7 +46,10 @@
fps: null as number | null,
resolution: null as number | null,
qualityItemTypes: [{ "value": 0, "name": "low(低)" }, { "value": 1, "name": "medium(中)" }, { "value": 2, "name": "high(高)" }] as ItemType[],
qualityItems: ["low", "medium", "high"]
qualityItems: ["low", "medium", "high"],
// 自动化测试
videoInfoForTest: null,
videoSrcForTest: '/static/test-video/10second-demo.mp4'
}
},
methods: {
......@@ -111,6 +114,35 @@
},
onResolutionChange(event : UniSliderChangeEvent) {
this.resolution = event.detail.value;
},
testCompressVideo() {
let beforeCompressSize: number, afterComoressSize: number;
uni.compressVideo({
src: this.videoSrcForTest,
quality: 'medium',
success: (res) => {
uni.getVideoInfo({
src: this.videoSrcForTest,
success: (_res) => {
beforeCompressSize = _res.size.toInt();
uni.getVideoInfo({
src: res.tempFilePath,
success: (__res) => {
afterComoressSize = __res.size.toInt();
this.videoInfoForTest = {
"width": __res.width,
"height": __res.height,
"isSizeReduce": afterComoressSize < beforeCompressSize
};
}
});
}
});
},
fail: (_) => {
this.videoInfoForTest = null;
}
});
}
}
}
......
pages/API/get-current-pages/get-current-pages.test.js
浏览文件 @ b66282b5
const HOME_PAGE_PATH = '/pages/tabBar/component'
const PAGE_PATH = '/pages/API/get-current-pages/get-current-pages'
describe('getCurrentPages', () => {
let page
it('getCurrentPages', async () => {
// web 端等待应用首页加载完成
if (process.env.uniTestPlatformInfo.startsWith('web')) {
const waitTime = process.env.uniTestPlatformInfo.includes('safari') ?
5000 :
3000
await new Promise((resolve) => {
setTimeout(() => {
resolve()
}, waitTime)
})
}
page = await program.switchTab(HOME_PAGE_PATH)
await page.waitFor(1000)
page = await program.navigateTo(PAGE_PATH)
await page.waitFor(1000)
await page.callMethod('_getCurrentPages')
await page.waitFor(200)
const data = await page.data()
expect(data.checked).toBe(true)
const HOME_PAGE_PATH = '/pages/tabBar/component'
const PAGE_PATH = '/pages/API/get-current-pages/get-current-pages'
describe('getCurrentPages', () => {
let page
it('getCurrentPages', async () => {
// web 端等待应用首页加载完成
if (process.env.uniTestPlatformInfo.startsWith('web')) {
const waitTime = process.env.uniTestPlatformInfo.includes('safari') ?
5000 :
3000
await new Promise((resolve) => {
setTimeout(() => {
resolve()
}, waitTime)
})
}
page = await program.switchTab(HOME_PAGE_PATH)
await page.waitFor(1000)
page = await program.navigateTo(PAGE_PATH)
await page.waitFor(1000)
await page.callMethod('_getCurrentPages')
await page.waitFor(200)
const data = await page.data()
expect(data.checked).toBe(true)
})
it('page-style', async () => {
page = await program.navigateTo(PAGE_PATH)
......@@ -47,7 +47,9 @@ describe('getCurrentPages', () => {
await page.callMethod('startPullDownRefresh')
await page.waitFor(500)
const image2 = await program.screenshot({fullPage: true});
expect(image2).toSaveImageSnapshot();
expect(image2).toSaveImageSnapshot({customSnapshotIdentifier() {
return 'get-current-pages-test-js-get-current-pages-page-style-before-set-page-style'
}});
await page.waitFor(3500)
await page.callMethod('setPageStyle', {
......@@ -57,6 +59,8 @@ describe('getCurrentPages', () => {
await page.callMethod('startPullDownRefresh')
await page.waitFor(500)
const image3 = await program.screenshot({fullPage: true});
expect(image3).toSaveImageSnapshot();
})
expect(image3).toSaveImageSnapshot({customSnapshotIdentifier() {
return 'get-current-pages-test-js-get-current-pages-page-style-after-set-page-style'
}});
})
})
pages/API/get-current-pages/set-page-style-disable-pull-down-refresh.test.js
浏览文件 @ b66282b5
......@@ -27,7 +27,9 @@ describe('getCurrentPages', () => {
const image3 = await program.screenshot({
fullPage: true
});
expect(image3).toSaveImageSnapshot();
expect(image3).toSaveImageSnapshot({customSnapshotIdentifier() {
return 'set-page-style-disable-pull-down-refresh-test-js-get-current-pages-page-style-before-set-page-style'
}});
await page.waitFor(3500)
......@@ -39,7 +41,9 @@ describe('getCurrentPages', () => {
const image2 = await program.screenshot({
fullPage: true
});
expect(image2).toSaveImageSnapshot();
expect(image2).toSaveImageSnapshot({customSnapshotIdentifier() {
return 'set-page-style-disable-pull-down-refresh-test-js-get-current-pages-page-style-after-set-page-style'
}});
})
})
pages/API/get-device-info/get-device-info.uvue
浏览文件 @ b66282b5
......@@ -14,7 +14,9 @@
}}</view>
</view>
<view class="uni-list-cell-db">
<text style="width: 100%;">{{ item.value == '' ? '未获取' : item.value }}</text>
<text style="width: 100%">{{
item.value == "" ? "未获取" : item.value
}}</text>
</view>
</view>
</view>
......@@ -50,25 +52,25 @@
getDeviceInfo: function () {
const res = uni.getDeviceInfo();
// 获取像素比, 供截图对比使用
setDevicePixelRatio(res.devicePixelRatio !== null ? parseFloat(res.devicePixelRatio!) : 1)
this.items = [] as Item[];
const res_str = JSON.stringify(res);
const res_obj = JSON.parseObject(res_str);
const res_map = res_obj!.toMap();
let keys = [] as string[]
res_map.forEach((_, key) => {
keys.push(key);
});
keys.sort().forEach( key => {
const value = res[key];
if(value != null){
const item = {
label: key,
value: "" + ((typeof value == "object")? JSON.stringify(value) : value)
} as Item;
this.items.push(item);
}
setDevicePixelRatio(res.devicePixelRatio !== null ? res.devicePixelRatio! : 1)
this.items = [] as Item[];
const res_str = JSON.stringify(res);
const res_obj = JSON.parseObject(res_str);
const res_map = res_obj!.toMap();
let keys = [] as string[]
res_map.forEach((_, key) => {
keys.push(key);
});
keys.sort().forEach(key => {
const value = res[key];
if (value != null) {
const item = {
label: key,
value: "" + ((typeof value == "object") ? JSON.stringify(value) : value)
} as Item;
this.items.push(item);
}
});
}
}
......
pages/API/get-image-info/get-image-info.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-getImageInfo', () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/get-image-info/get-image-info');
await page.waitFor(500);
});
it('test getImageInfo', async () => {
await page.waitFor(500);
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await page.data('imageInfoForTest')).toEqual({
width: 192,
height: 192,
path: '/static/test-image/logo.png'
});
return;
}
expect(await page.data('imageInfoForTest')).toEqual({
width: 192,
height: 192,
path: '/static/test-image/logo.png',
orientation: 'up',
type: 'png'
});
});
});
pages/API/get-image-info/get-image-info.uvue
浏览文件 @ b66282b5
......@@ -39,6 +39,8 @@
absoluteImageInfo: "",
remoteImagePath: "https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/img/building.jpg",
remoteImageInfo: "",
// 自动化测试
imageInfoForTest: null as UTSJSONObject | null,
}
},
methods: {
......@@ -71,6 +73,13 @@
success: (res) => {
console.log("getImageInfo success", JSON.stringify(res));
this.absoluteImageInfo = `图片宽度: ${res.width}\n图片高度: ${res.height}\n图片路径: ${res.path}\n图片方向: ${res.orientation}\n图片格式: ${res.type}`;
this.imageInfoForTest = {
"width": res.width,
"height": res.height,
"path": res.path.slice(res.path.indexOf('/static')),
"orientation": res.orientation,
"type": res.type
};
},
fail: (err) => {
uni.showModal({
......@@ -78,6 +87,7 @@
content: JSON.stringify(err),
showCancel: false
});
this.imageInfoForTest = null;
}
});
uni.getImageInfo({
......
pages/API/get-univerify-manager/get-univerify-manager.uvue
浏览文件 @ b66282b5
......@@ -29,10 +29,8 @@
},
fail: (err : PreLoginFail) => {
console.error("pre login fail => " + JSON.stringify(err));
uni.showModal({
title: '预登录失败',
content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
showCancel: false
uni.showToast({
title: '预登录失败'
});
}
} as PreLoginOptions);
......@@ -53,10 +51,8 @@
},
fail: (err : PreLoginFail) => {
console.error("pre login fail => " + JSON.stringify(err));
uni.showModal({
title: '预登录失败',
content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
showCancel: false
uni.showToast({
title: '预登录失败'
});
}
} as PreLoginOptions);
......@@ -105,10 +101,8 @@
},
fail: (err : LoginFail) => {
console.error("login fail => " + err);
uni.showModal({
title: '登录失败',
content: JSON.parseObject(err.cause?.cause?.message ?? "")?.getString("errorDesc") ?? err.errMsg,
showCancel: false
uni.showToast({
title: '登录失败'
});
}
} as LoginOptions);
......
pages/API/get-video-info/get-video-info.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-getVideoInfo', () => {
if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
// web平台在自动化测试场景下API调用失败
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/get-video-info/get-video-info');
await page.waitFor(500);
});
it('test getVideoInfo', async () => {
await page.callMethod('testGetVideoInfo');
await page.waitFor(1000);
if (process.env.uniTestPlatformInfo.startsWith('web')) {
expect(await page.data('videoInfoForTest')).toEqual({
duration: 10,
size: 211,
width: 1280,
height: 720
});
return;
}
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (process.env.uniTestPlatformInfo.startsWith('android') && version > 5) {
expect(await page.data('videoInfoForTest')).toEqual({
orientation: 'up',
type: 'video/mp4',
duration: 10,
size: 211,
width: 1280,
height: 720,
fps: 30,
bitrate: 172
});
}
});
});
pages/API/get-video-info/get-video-info.uvue
浏览文件 @ b66282b5
......@@ -25,6 +25,8 @@
title: "getVideoInfo",
absoluteVideoPath: "",
absoluteVideoInfo: "",
// 自动化测试
videoInfoForTest: null as UTSJSONObject | null
}
},
methods: {
......@@ -49,6 +51,26 @@
});
}
});
},
testGetVideoInfo() {
uni.getVideoInfo({
src: '/static/test-video/10second-demo.mp4',
success: (res) => {
this.videoInfoForTest = {
"orientation": res.orientation,
"type": res.type,
"duration": res.duration.toInt(),
"size": res.size,
"width": res.width,
"height": res.height,
"fps": res.fps,
"bitrate": res.bitrate
};
},
fail: (_) => {
this.videoInfoForTest = null;
}
});
}
}
}
......
pages/API/inner-audio/inner-audio-format.uvue
浏览文件 @ b66282b5
......@@ -8,6 +8,14 @@
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
<view class="uni-title">
<text class="uni-title-text">不支持的音频格式</text>
</view>
<view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
<text class="uni-subtitle-text">{{item.format}}</text>
<image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
</view>
</view>
</template>
......@@ -53,18 +61,24 @@
format: 'wav',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
},
// {
// format: 'wma',
// src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
// },
// {
// format: 'aiff',
// src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
// },
// {
// format: 'caf',
// src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
// },
] as Array<AudioFormat>,
notSupportFormats:[
{
format: 'wma',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
},
{
format: 'aiff',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
},
{
format: 'caf',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
},
{
format: '错误格式',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
},
] as Array<AudioFormat>
}
},
......
pages/API/inner-audio/inner-audio-path.uvue
浏览文件 @ b66282b5
......@@ -2,7 +2,7 @@
<page-head :title="title"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title">
<text class="uni-title-text">支持的音频路径示例</text>
<text class="uni-title-text">音频路径示例</text>
</view>
<view class="formats" v-for="(item,index) in supportPaths" :key="index">
<text class="uni-subtitle-text">{{item.description}}</text>
......@@ -36,6 +36,14 @@
description: '网络路径',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
},
{
description: '不存在的音频',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
},
{
description: '错误路径',
src: '../static/test-audio/ForElise.mp3'
},
] as Array<AudioPath>
}
},
......
pages/API/inner-audio/inner-audio.test.js 0 → 100644
浏览文件 @ b66282b5
describe('inner-audio', () => {
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/API/inner-audio/inner-audio')
await page.waitFor('view');
});
function getData(key = '') {
return new Promise(async (resolve, reject) => {
const data = await page.data()
resolve(key ? data[key] : data)
})
}
it('onCanplay',async()=>{
await page.waitFor(1000)
await page.waitFor(async()=>{
return await getData('isCanplay')
})
expect(await getData('buffered')).toBeGreaterThan(0)
})
it('play-onPlay-onTimeUpdate', async () => {
await page.callMethod('play')
await page.waitFor(3000);
expect(await getData('isPlaying')).toBeTruthy()
console.log("duration：",await getData('duration'),"currentTime：",await getData('currentTime'))
expect(await getData('duration')).toBeCloseTo(175.109, 0);
// console.log("isPaused",await getData('isPaused'))
// expect(await getData('currentTime')).toBeGreaterThan(0);
// expect(await getData('isPaused')).toBeFalsy();
});
it('seek-onSeeking-onSeeked', async () => {
await page.callMethod('onchange',20)
await page.waitFor(500);
expect(await getData('onSeekingTest')).toBeTruthy();
// expect(await getData('onWaitingTest')).toBeTruthy();
expect(await getData('onSeekedTest')).toBeTruthy();
});
it('pause-onPause', async () => {
await page.callMethod('pause')
await page.waitFor(500);
expect(await getData('isPlaying')).toBeFalsy()
// expect(await getData('isPaused')).toBeTruthy();
});
it('stop-onStop', async () => {
await page.callMethod('play')
await page.waitFor(2000);
// 第一次点停止时，不触发onStop事件
await page.callMethod('stop')
await page.callMethod('stop')
await page.waitFor(1000);
expect(await getData('isPlaying')).toBeFalsy()
// expect(await getData('isPaused')).toBeTruthy();
});
it('onEnded', async () => {
await page.callMethod('onchange',173)
await page.waitFor(500);
await page.callMethod('play')
await page.waitFor(3000);
// expect(await getData('isPlayEnd')).toBeTruthy();
});
});
pages/API/inner-audio/inner-audio.uvue
浏览文件 @ b66282b5
<template>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<!-- <view class="uni-common-mt play-time-area">
<text class="current-time">{{currentTime}}</text>
<text class="duration">{{duration}}</text>
</view>
<view class="play-button-area">
<image class="icon-play" :src="playImage" @click="play"></image>
</view> -->
<button type="primary" @click="play" class="uni-btn">播放</button>
<button type="primary" @click="pause" class="uni-btn">暂停</button>
<button type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchange('seek')" class="uni-btn">跳转到指定位置</button>
<button type="primary" @click="setAutoplay" class="uni-btn">是否自动开始播放</button>
<button type="primary" @click="setLoop" class="uni-btn">是否循环播放</button>
<view class="uni-padding-wrap">
<page-head title="audio"></page-head>
<view class="uni-common-mt">
<slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</View>
<text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
<text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
<text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
<text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
<text class="uni-text-box">当前音量：{{volume}}</text>
<!-- 设置音量无效 -->
<!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
<button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
<text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
<input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
@input="startTimeInput"></input>
<boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
<boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
<view class="uni-title">
<text class="uni-title-text">方法示例</text>
</View>
<button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
<button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
<button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
<button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button>
<view class="uni-title">
<text class="uni-title-text">格式/路径示例</text>
</View>
<navigator url="/pages/API/inner-audio/inner-audio-format" class="uni-btn">
<button type="primary" @click="pause">音频格式示例</button>
</navigator>
<navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn">
<navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn uni-common-mb">
<button type="primary" @click="pause">音频路径示例</button>
</navigator>
</view>
</view>
</template>
<script lang="uts">
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
isPlaying: false,
isPlayEnd: false,
currentTime: 0,
duration: 100,
pos:10,
paused:false,
_isChanging:false,
_audioContext: null as InnerAudioContext | null
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
playImage() {
return this.isPlaying ? "/static/pause.png" : "/static/play.png"
}
},
const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
export default {
data() {
return {
title: "innerAudioContext",
currentTime: 0,
duration: 100,
startTime: 0,
buffered: 0,
volume: 0.5,
isCanplay: false,
isPlaying: false,
isPaused: true,
isPlayEnd: false,
_isChanging: false,
_audioContext: null as InnerAudioContext | null,
// 自动化测试
onSeekingTest:false,
onSeekedTest:false,
onWaitingTest:false
}
},
computed: {
position() {
return this.isPlayEnd ? 0 : this.currentTime;
},
},
onReady() {
this._audioContext = uni.createInnerAudioContext();
this._audioContext!.src = audioUrl;
this.volume = this._audioContext!.volume;
this.onCanplay()
},
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
onUnload() {
if (this._audioContext != null && this.isPlaying) {
this.stop();
this._audioContext!.destroy()
}
},
methods: {
setAutoplay(){
}
},
methods: {
onCanplay() {
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
this.isCanplay = true;
// 当音频可以播放时，获取缓冲信息
this.buffered = this._audioContext!.buffered;
this.duration = this._audioContext!.duration || 0;
});
},
onchanging() {
this._isChanging = true;
},
onchange(e) {
console.log(e, 'e');
let pos = typeof e === "number" ? e : e.detail.value;
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
startTimeInput(e : InputEvent) {
let startTimeValue = Number(e.detail.value)
this._audioContext!.startTime = startTimeValue;
this.onchange(startTimeValue)
},
setAutoplay() {
this._audioContext!.autoplay = !this._audioContext!.autoplay;
console.log(this._audioContext!.autoplay,'autoplay');
console.log(this._audioContext!.autoplay, 'autoplay');
},
setLoop(){
setLoop() {
this._audioContext!.loop = !this._audioContext!.loop;
console.log(this._audioContext!.loop,'loop');
console.log(this._audioContext!.loop, 'loop');
},
onchanging() {
this._isChanging = true;
play() {
if (!this.isCanplay) {
uni.showToast({
title: '音频未进入可以播放状态，请稍后再试'
});
return;
}
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
if (this._audioContext!.startTime > 0) {
this.onchange(this._audioContext!.startTime)
}
this._audioContext!.onPlay(() => {
this.isPaused = false;
console.log('开始播放',this.isPaused);
});
this.onTimeUpdate()
this.onWaiting()
this.onError()
this.onEnded()
},
onSeeking(){
onSeeking() {
this._audioContext!.onSeeking(() => {
console.log('音频进行 seek 操作事件');
this.onSeekingTest = true
});
},
onSeeked(){
onSeeked() {
this._audioContext!.onSeeked(() => {
console.log('音频完成 seek 操作事件');
this.onSeekedTest = true
});
},
onchange(e) {
let pos = e == 'seek' ? 20 : e.detail.value
this._audioContext!.seek(pos);
this.onSeeking()
this.onSeeked()
this._isChanging = false;
},
onCanplay(){
this._audioContext!.onCanplay(() => {
console.log('音频进入可以播放状态事件');
onWaiting() {
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
this.onWaitingTest = true
});
},
onTimeUpdate(){
this._audioContext!.onTimeUpdate((e) => {
// console.log('onTimeUpdate:音频播放进度更新事件',e);
if (this._isChanging === true) {
return;
}
this.currentTime = this._audioContext!.currentTime || 0;
this.duration = this._audioContext!.duration || 0;
onTimeUpdate() {
this._audioContext!.onTimeUpdate(() => {
// console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
if (this._isChanging === true) { return; }
this.currentTime = this._audioContext!.currentTime || 0;
if (this.currentTime > this.buffered) {
console.log('缓冲不足');
}
});
},
onPlay(){
this._audioContext!.onPlay(() => {
console.log('开始播放');
});
increaseVolume() {
this.volume = Math.min(this.volume + 0.1, 1);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('增加音量', this.volume);
},
decreaseVolume() {
this.volume = Math.max(this.volume - 0.1, 0);
this.volume = parseFloat(this.volume.toFixed(1));
console.log('减少音量', this.volume);
},
onEnded(){
onEnded() {
this._audioContext!.onEnded(() => {
console.log('播放结束');
this.currentTime = 0;
this.isPlaying = false;
this.isPlayEnd = true;
this.currentTime = 0;
this.startTime = 0
this.isPlaying = false;
this.isPaused = true;
this.isPlayEnd = true;
});
},
onError(){
onError() {
this._audioContext!.onError((err) => {
console.log('err',err);
this.isPlaying = false;
});
},
onWaiting(){
this._audioContext!.onWaiting(() => {
console.log('音频加载中事件');
console.log('err', err);
this.isPlaying = false;
this.isPaused = true;
});
},
play() {
// if (this.isPlaying) {
// this.pause();
// return;
// }
this.isPlaying = true;
this._audioContext!.play();
this.isPlayEnd = false;
this.onPlay()
this.onWaiting()
this.onTimeUpdate()
this.onError()
this.onEnded()
},
onPause(){
pause() {
this._audioContext!.pause();
this._audioContext!.onPause(() => {
console.log('音频暂停事件');
this.isPaused = true;
});
this.isPlaying = false;
},
pause() {
this._audioContext!.pause();
this.onPause()
this.isPlaying = false;
},
onStop(){
stop() {
console.log('stop');
this._audioContext!.stop();
this._audioContext!.onStop(() => {
// 第一次点停止时，不触发
this.isPaused = true;
console.log('音频停止事件');
});
},
stop() {
this._audioContext!.stop();
this.onStop()
this.isPlaying = false;
}
}
}
this.isPlaying = false;
console.log('stop',this.isPaused);
}
}
}
</script>
<style>
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.play-time-area {
display: flex;
flex-direction: row;
margin-top: 20px;
}
.duration {
margin-left: auto;
}
.duration {
margin-left: auto;
}
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.play-button-area {
display: flex;
flex-direction: row;
justify-content: center;
margin: 50px 0;
}
.icon-play {
width: 60px;
height: 60px;
}
.icon-play {
width: 60px;
height: 60px;
}
</style>
pages/API/map/map.uvue 已删除 100644 → 0
浏览文件 @ 85ac42b6
<template>
<view class="content">
<map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
:latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
:show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
:enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
:enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
:include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
@callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
<scroll-view class="scrollview" scroll-y="true">
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<button class="button" @click="addCircles">addCircles</button>
<button class="button" @click="includePoint">includePoints</button>
<button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
<button class="button" @click="handleGetRegion">getRegion</button>
<button class="button" @click="handleTranslateMarker">translateMarker</button>
</scroll-view>
</view>
</template>
<script lang="uts">
type Anchor = {
x : number,
y : number
}
type Callout = {
content : string,
color : string,
fontSize : number,
borderRadius : number,
borderWidth : number,
borderColor : string,
bgColor : string,
padding : string,
display : string
}
type Markers = {
id : string | number,
latitude : number,
longitude : number,
title : string
zIndex : string,
iconPath : string,
rotate ?: number,
width : number,
height : number,
anchor : Anchor,
callout : Callout
}
type Points = {
latitude : number,
longitude : number
}
type Polyline = {
points : Points[],
color : string,
width : number,
dottedLine : boolean,
arrowLine : boolean,
borderColor : string,
borderWidth : number
}
type Polygons = {
points : Points[];
fillColor : string;
strokeWidth : number;
strokeColor : string;
zIndex : number;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
}
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
iconPath: '../../../static/location.png',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '../../../static/location.png',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
}
}
];
const testPolyline = [{
points: [{
latitude: 39.925539,
longitude: 116.279037
},
{
latitude: 39.925539,
longitude: 116.520285
}],
color: '#FFCCFF',
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
borderWidth: 2
},
{
points: [{
latitude: 39.938698,
longitude: 116.275177
},
{
latitude: 39.966069,
longitude: 116.289253
},
{
latitude: 39.944226,
longitude: 116.306076
},
{
latitude: 39.966069,
longitude: 116.322899
},
{
latitude: 39.938698,
longitude: 116.336975
}],
color: '#CCFFFF',
width: 5,
dottedLine: true,
arrowLine: true,
borderColor: '#CC0000',
borderWidth: 3
}
];
const testPolygons = [{
points: [{
latitude: 39.781892,
longitude: 116.293413
},
{
latitude: 39.787600,
longitude: 116.391842
},
{
latitude: 39.733187,
longitude: 116.417932
},
{
latitude: 39.704653,
longitude: 116.338255
}],
fillColor: '#FFCCFF',
strokeWidth: 3,
strokeColor: '#CC99CC',
zIndex: 11
},
{
points: [{
latitude: 39.887600,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.428932
},
{
latitude: 39.887600,
longitude: 116.428932
}
],
fillColor: '#CCFFFF',
strokeWidth: 5,
strokeColor: '#CC0000',
zIndex: 3
}
];
const testCircles = [{
latitude: 39.996441,
longitude: 116.411146,
radius: 15000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: '#CC0000'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 12000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: '#FFCCFF'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 9000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
export default {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '../../../static/uni.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [] as Polyline[],
markers: [] as Markers[],
polygons: [] as Polygons[],
circles: [] as Circles[],
includePoints: [] as Points[],
rotate: 0,
skew: 0,
map: null as MapContext | null,
// 自动化测试
autoTest: false,
getCenterLocationTest:{},
getRegionTest:{},
}
},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
enableThreeD(e) {
this.enable3D = e.detail.value;
},
changeShowCompass(e) {
this.showCompass = e.detail.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.detail.value;
},
changeEnableZoom(e) {
this.enableZoom = e.detail.value;
},
changeEnableScroll(e) {
this.enableScroll = e.detail.value;
},
changeEnableRotate(e) {
this.enableRotate = e.detail.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.detail.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.detail.value;
},
addMarkers() {
this.markers = testMarkers;
},
addPolyline() {
this.polyline = testPolyline;
},
addPolygons() {
this.polygons = testPolygons;
},
addCircles() {
this.circles = testCircles;
},
includePoint() {
this.includePoints = testIncludePoints;
},
handleGetCenterLocation() {
this.map!.getCenterLocation({
success: ret => {
console.log(JSON.stringify(ret));
this.getCenterLocationTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleGetRegion() {
this.map!.getRegion({
success: ret => {
console.log(JSON.stringify(ret));
this.getRegionTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleTranslateMarker() {
this.map!.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
maptap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onmarkertap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncontroltap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onupdated(e) {
console.log(JSON.stringify(e))
},
onregionchange(e) {
console.log(JSON.stringify(e));
},
onpoitap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
width: 100%;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
pages/API/navigator/navigator.uvue
浏览文件 @ b66282b5
......@@ -32,7 +32,7 @@
<view class="uni-btn-v">
<button @tap="navigateTo" class="uni-btn">
跳转新页面，并传递数据
</button>
</button>
<button @tap="navigateBack" class="uni-btn">返回上一页</button>
<button @tap="redirectTo" class="uni-btn">在当前页面打开</button>
<button @tap="switchTab" class="uni-btn">切换到模板选项卡</button>
......@@ -41,7 +41,8 @@
</button>
<button @tap="navigateToErrorPage" class="uni-btn">
打开不存在的页面
</button>
</button>
<button v-for="(item, _) in animationTypeList" @tap="navigateToAnimationType(item)" class="uni-btn">navigateTo动画({{item}})</button>
</view>
</view>
</view>
......@@ -59,7 +60,20 @@
onLoadTime: 0,
onShowTime: 0,
onReadyTime: 0,
onHideTime: 0,
onHideTime: 0,
animationTypeList: [
// #ifdef APP-ANDROID
'slide-in-right',
'slide-in-left',
'slide-in-top',
'slide-in-bottom',
'pop-in',
'fade-in',
'zoom-out',
'zoom-fade-out',
'none'
// #endif
]
}
},
onLoad() {
......@@ -109,7 +123,28 @@
},
navigateTo() {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-page-1?data=Hello',
url: '/pages/API/navigator/new-page/new-page-1?data=Hello',
success(result) {
console.log('navigateTo success', result.errMsg)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
fail(error) {
console.log('navigateTo fail', error.errMsg)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum - 1)
},
complete(result) {
console.log('navigateTo complete', result.errMsg)
// 自动化测试
setLifeCycleNum(state.lifeCycleNum + 1)
},
})
},
navigateToAnimationType(animationType: string) {
uni.navigateTo({
url: '/pages/API/navigator/new-page/new-page-1?data=Hello',
animationType: animationType,
success(result) {
console.log('navigateTo success', result.errMsg)
// 自动化测试
......
pages/API/on-compass-change/on-compass-change.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-padding-wrap">
<view class="uni-hello-text uni-center" style="padding-bottom:50rpx;">
旋转手机即可获取方位信息
</view>
<view class="direction">
<view class="bg-compass-line"></view>
<image class="bg-compass" src="../../../static/compass.png" :style="'transform: rotate('+direction+'deg)'"></image>
<view class="direction-value">
<text>{{direction}}</text>
<text class="direction-degree">o</text>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'onCompassChange',
direction: 0
}
},
onReady: function () {
uni.onCompassChange((res) => {
console.log('onCompassChange', res)
this.direction = res.direction
})
},
onUnload() {
uni.stopCompass();
this.direction = 0;
}
}
</script>
<style>
.direction {
position: relative;
margin-top: 70rpx;
display: flex;
width: 540rpx;
height: 540rpx;
align-items: center;
justify-content: center;
margin:0 auto;
}
.direction-value {
position: relative;
font-size: 200rpx;
color: #353535;
line-height: 1;
z-index: 1;
}
.direction-degree {
position: absolute;
top: 0;
right: -40rpx;
font-size: 60rpx;
}
.bg-compass {
position: absolute;
top: 0;
left: 0;
width: 540rpx;
height: 540rpx;
transition: .1s;
}
.bg-compass-line {
position: absolute;
left: 267rpx;
top: -10rpx;
width: 6rpx;
height: 56rpx;
background-color: #1AAD19;
border-radius: 999rpx;
z-index: 1;
}
</style>
pages/API/open-location/open-location.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<form @submit="openLocation">
<view class="uni-list">
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">经度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="116.39747" name="longitude"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">纬度</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="39.9085" name="latitude"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">位置名称</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="天安门" name="name"/>
</view>
</view>
<view class="uni-list-cell">
<view class="uni-list-cell-left">
<view class="uni-label">详细位置</view>
</view>
<view class="uni-list-cell-db">
<input class="uni-input" type="text" :disabled="true" value="北京市东城区东长安街" name="address"/>
</view>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-btn-v uni-common-mt">
<button type="primary" formType="submit">查看位置</button>
</view>
</view>
</form>
</view>
</view>
</template>
<script lang="uts">
export default {
data() {
return {
title: 'openLocation'
}
},
methods: {
openLocation: function (e) {
console.log(e)
var value = e.detail.value
uni.openLocation({
longitude: Number(value.longitude),
latitude: Number(value.latitude),
name: value.name,
address: value.address
})
}
}
}
</script>
<style>
.uni-list-cell-left {
padding: 0 30rpx;
}
</style>
pages/API/pull-down-refresh/pull-down-refresh.test.js 0 → 100644
浏览文件 @ b66282b5
const PAGE_PATH = "/pages/API/pull-down-refresh/pull-down-refresh"
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isIos = platformInfo.startsWith('ios')
const isWeb = platformInfo.startsWith('web')
describe("payment", () => {
if (isWeb || process.env.UNI_AUTOMATOR_APP_WEBVIEW === 'true') {
it('web || app-webview', () => {
expect(1).toBe(1)
})
return
}
it("trigger pulldown refresh by swipe", async () => {
const page = await program.navigateTo(PAGE_PATH)
await page.waitFor('view')
await page.waitFor(4000)
await page.setData({
pulldownRefreshTriggered: false
})
if (isIos) {
// 暂时通过点击关闭授权弹框，避免影响 swipe 测试
await program.tap({x: 100, y: 500})
}
await program.swipe({
startPoint: {
x: 100,
y: 400
},
endPoint: {
x: 100,
y: 800
},
duration: 1000
})
await page.waitFor(1500)
expect(await page.data('pulldownRefreshTriggered')).toBe(true)
});
});
pages/API/pull-down-refresh/pull-down-refresh.uvue
浏览文件 @ b66282b5
<template>
<scroll-view style="flex: 1;">
<!-- 实际开发中，长列表应该使用list-view -->
<view class="uni-padding-wrap uni-common-mt">
<text class="text" v-for="(num,index) in data" :key="index">list - {{num}}</text>
<view v-if="showLoadMore">{{loadMoreText}}</view>
</view>
</scroll-view>
</template>
<script lang="uts">
export default {
data() {
return {
data: [] as Array<number>,
loadMoreText: "加载中...",
showLoadMore: false,
max: 0
}
},
onReady() {
uni.startPullDownRefresh();
this.initData();
},
onReachBottom() {
console.log("onReachBottom");
if (this.max > 40) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.initData();
},
methods: {
initData(){
setTimeout(() => {
this.max = 0;
this.data = [];
let data:Array<number> = [];
this.max += 20;
for (let i:number = this.max - 19; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 1000);
},
setListData() {
let data:Array<number> = [];
this.max += 10;
for (let i:number = this.max - 9; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
}
}
}
</script>
<style>
.text {
margin: 6px 0;
width:100%;
background-color: #fff;
height: 52px;
line-height: 52px;
text-align: center;
color: #555;
border-radius: 4px;
}
<template>
<!-- #ifdef APP -->
<scroll-view style="flex: 1;">
<!-- #endif -->
<!-- 实际开发中，长列表应该使用list-view -->
<view class="uni-padding-wrap uni-common-mt">
<text class="text" v-for="(num,index) in data" :key="index">list - {{num}}</text>
<view v-if="showLoadMore">{{loadMoreText}}</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script lang="uts">
export default {
data() {
return {
data: [] as Array<number>,
loadMoreText: "加载中...",
showLoadMore: false,
max: 0,
pulldownRefreshTriggered: false
}
},
onReady() {
uni.startPullDownRefresh();
this.initData();
},
onReachBottom() {
console.log("onReachBottom");
if (this.max > 40) {
this.loadMoreText = "没有更多数据了!"
return;
}
this.showLoadMore = true;
setTimeout(() => {
this.setListData();
}, 300);
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.pulldownRefreshTriggered = true
this.initData();
},
methods: {
initData() {
setTimeout(() => {
this.max = 0;
this.data = [];
let data : Array<number> = [];
this.max += 20;
for (let i : number = this.max - 19; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
uni.stopPullDownRefresh();
}, 1000);
},
setListData() {
let data : Array<number> = [];
this.max += 10;
for (let i : number = this.max - 9; i < this.max + 1; i++) {
data.push(i)
}
this.data = this.data.concat(data);
}
}
}
</script>
<style>
.text {
margin: 6px 0;
width: 100%;
background-color: #fff;
height: 52px;
line-height: 52px;
text-align: center;
color: #555;
border-radius: 4px;
}
</style>
pages/API/request/request.test.js
浏览文件 @ b66282b5
......@@ -117,7 +117,28 @@ describe('ExtApi-Request', () => {
await page.waitFor(2000);
res = await page.data('jest_result');
expect(res).toBe(true)
});
});
it('Check Set Cookie Expires', async () => {
await page.callMethod('jest_set_cookie_expires')
await page.waitFor(2000);
res = await page.data('jest_result_data');
console.log("request expires cookie data :", res);
res = await page.data('jest_result');
expect(res).toBe(true)
await page.setData({
jest_result: false,
jest_result_data: "",
data: null,
header: null
})
await page.waitFor(5000);
await page.callMethod('jest_cookie_request', false)
await page.waitFor(2000);
res = await page.data('jest_result_data');
console.log("verify request data :", res);
res = await page.data('jest_result');
expect(res).toBe(true)
});
it('Check Get With Data', async () => {
res = await page.callMethod('jest_get_with_data')
await page.waitFor(2000);
......
pages/API/request/request.uvue
浏览文件 @ b66282b5
......@@ -141,7 +141,8 @@
"/api/http/contentType/xWwwFormUrlencoded",
],
//自动化测试例专用
jest_result: false
jest_result: false,
jest_result_data: ""
}
},
onLoad() {
......@@ -257,6 +258,22 @@
this.jest_result = false;
},
});
},
jest_set_cookie_expires(){
uni.request({
url: this.host + "/api/http/header/setCookie?expires=5",
method: "GET",
timeout: 6000,
sslVerify: false,
withCredentials: false,
firstIpv4: false,
success: () => {
this.jest_cookie_request(true)
},
fail: () => {
this.jest_result = false;
},
});
},
jest_delete_cookie() {
uni.request({
......@@ -284,7 +301,8 @@
firstIpv4: false,
success: (res) => {
const requestCookie = (res.data as UTSJSONObject).getJSON("data")?.getAny("requestCookie")
console.log("requestCookie ", requestCookie);
console.log("requestCookie ", requestCookie);
this.jest_result_data = JSON.stringify(requestCookie)
if (requestCookie instanceof Array) {
this.jest_result = needCookie ? requestCookie.length > 0 : requestCookie.length == 0
} else {
......
pages/API/save-image-to-photos-album/save-image-to-photos-album.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-saveImageToPhotosAlbum', () => {
if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/save-image-to-photos-album/save-image-to-photos-album');
await page.waitFor(500);
});
it('test saveImageToPhotosAlbum', async () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
await program.adbCommand(
'pm grant io.dcloud.uniappx android.permission.WRITE_EXTERNAL_STORAGE');
await page.waitFor(500);
}
await page.callMethod('saveImage');
expect(await page.data('success')).toBe(true);
});
});
pages/API/save-image-to-photos-album/save-image-to-photos-album.uvue
浏览文件 @ b66282b5
......@@ -16,7 +16,9 @@
export default {
data() {
return {
title: "saveImageToPhotosAlbum"
title: "saveImageToPhotosAlbum",
// 自动化测试
success: false
}
},
methods: {
......@@ -29,7 +31,8 @@
position: "center",
icon: "none",
title: "图片保存成功，请到手机相册查看"
})
});
this.success = true;
},
fail: (err) => {
uni.showModal({
......@@ -37,6 +40,7 @@
content: JSON.stringify(err),
showCancel: false
});
this.success = false;
}
})
}
......
pages/API/save-video-to-photos-album/save-video-to-photos-album.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('API-saveVideoToPhotosAlbum', () => {
if (process.env.uniTestPlatformInfo.startsWith('web') || process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
it('pass', async () => {
expect(1).toBe(1);
});
return;
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/API/save-video-to-photos-album/save-video-to-photos-album');
await page.waitFor(500);
});
it('test saveVideoToPhotosAlbum', async () => {
if (process.env.uniTestPlatformInfo.startsWith('android')) {
await program.adbCommand(
'pm grant io.dcloud.uniappx android.permission.WRITE_EXTERNAL_STORAGE');
await page.waitFor(500);
}
await page.callMethod('saveVideo');
expect(await page.data('success')).toBe(true);
});
});
pages/API/save-video-to-photos-album/save-video-to-photos-album.uvue
浏览文件 @ b66282b5
......@@ -17,7 +17,9 @@
data() {
return {
title: 'saveVideoToPhotosAlbum',
src: ''
src: '/static/test-video/10second-demo.mp4',
// 自动化测试
success: false
}
},
methods: {
......@@ -31,6 +33,7 @@
icon: "none",
title: "视频保存成功，请到手机相册查看"
});
this.success = true;
},
fail: (err) => {
uni.showModal({
......@@ -38,22 +41,10 @@
content: JSON.stringify(err),
showCancel: false
});
this.success = false;
}
});
}
},
onReady() {
uni.showLoading({
title: '视频下载中'
});
uni.downloadFile({
url: 'https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/video/swiper-vertical-video/uts.mp4',
success: (res) => {
console.log("download video success", res.tempFilePath);
this.src = res.tempFilePath;
uni.hideLoading();
}
});
}
}
</script>
......
pages/API/theme-change/theme-change.test.js
浏览文件 @ b66282b5
......@@ -27,11 +27,13 @@ describe('API-theme-change', () => {
it("check-set-app-theme", async () => {
const originalTheme = await page.data('originalTheme')
console.log("originalTheme是", originalTheme)
await page.callMethod('setAppTheme', "dark")
await page.waitFor(300)
expect(await page.data('appTheme')).toBe("dark")
//还原主题为light
await page.callMethod('setAppTheme', "light")
await page.callMethod('setAppTheme', originalTheme)
await page.waitFor(600)
})
});
pages/API/theme-change/theme-change.uvue
浏览文件 @ b66282b5
......@@ -35,6 +35,7 @@
appThemeChangeId: 0,
osTheme: "light" as string,
appTheme: "light" as string,
originalTheme: "light" as string,
current: 0,
items: [
"light",
......@@ -80,6 +81,7 @@
uni.getSystemInfo({
success: (res:GetSystemInfoResult) => {
this.osTheme = res.osTheme!
this.originalTheme = res.appTheme!
this.appTheme = res.appTheme == "auto" ? res.osTheme! : res.appTheme!
this.current = this.items.indexOf(res.appTheme!)
}
......
pages/API/unicloud-database/unicloud-database.test.js
浏览文件 @ b66282b5
const PAGE_PATH = '/pages/API/unicloud-database/unicloud-database'
describe('unicloud-database', () => {
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
await page.setData({
isUniTest: true
})
})
it('databaseBasic', async () => {
await page.callMethod('dbRemove')
await page.callMethod('dbAdd')
await page.callMethod('dbBatchAdd')
await page.callMethod('dbGet')
await page.callMethod('dbGetWithCommand')
await page.callMethod('dbUpdate')
await page.callMethod('dbRemove')
await page.callMethod('dbMultiSend')
const {
addId,
batchAddIds,
batchAddinserted,
updateUpdated,
getData,
getWithCommandData,
removeDeleted,
multiSendSuccessCount,
} = await page.data()
expect(addId !== '').toBe(true)
expect(batchAddIds.length).toBe(2)
expect(batchAddinserted).toBe(2)
expect(getData.length).toBe(2)
expect(getWithCommandData.length).toBe(1)
expect(updateUpdated).toBe(3)
expect(removeDeleted).toBe(3)
expect(multiSendSuccessCount).toBe(2)
})
it('databaseLookup', async () => {
await page.callMethod('dbLookupInit')
await page.callMethod('dbLookup')
const {
lookupData
} = await page.data()
expect(lookupData.length).toBe(2)
expect(lookupData[0]['foreign_id'].length).toBe(1)
expect(lookupData[1]['foreign_id'].length).toBe(1)
})
});
const PAGE_PATH = '/pages/API/unicloud-database/unicloud-database'
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isSafari = platformInfo.indexOf('safari') > -1
describe('unicloud-database', () => {
if (isSafari) {
it('web safari 暂时规避', () => {
expect(1).toBe(1)
})
return
}
let page
beforeAll(async () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
await page.setData({
isUniTest: true
})
})
it('databaseBasic', async () => {
await page.callMethod('dbRemove')
await page.callMethod('dbAdd')
await page.callMethod('dbBatchAdd')
await page.callMethod('dbGet')
await page.callMethod('dbGetWithCommand')
await page.callMethod('dbUpdate')
await page.callMethod('dbRemove')
await page.callMethod('dbMultiSend')
const {
addId,
batchAddIds,
batchAddinserted,
updateUpdated,
getData,
getWithCommandData,
removeDeleted,
multiSendSuccessCount,
} = await page.data()
expect(addId !== '').toBe(true)
expect(batchAddIds.length).toBe(2)
expect(batchAddinserted).toBe(2)
expect(getData.length).toBe(2)
expect(getWithCommandData.length).toBe(1)
expect(updateUpdated).toBe(3)
expect(removeDeleted).toBe(3)
expect(multiSendSuccessCount).toBe(2)
})
it('databaseLookup', async () => {
await page.callMethod('dbLookupInit')
await page.callMethod('dbLookup')
const {
lookupData
} = await page.data()
expect(lookupData.length).toBe(2)
expect(lookupData[0]['foreign_id'].length).toBe(1)
expect(lookupData[1]['foreign_id'].length).toBe(1)
})
});
pages/API/upload-file/upload-file.test.js
浏览文件 @ b66282b5
......@@ -34,6 +34,13 @@ describe('ExtApi-UploadFile', () => {
await page.waitFor(2000);
res = await page.data('jest_result');
expect(res).toBe(true)
});
it('Check uni.env', async () => {
await page.callMethod('jest_uploadFile_with_uni_env');
await page.waitFor(2000);
res = await page.data('jest_result');
expect(res).toBe(true);
});
// 15以下的模拟器所对应的xcode不能编译自定义插件，大于15是因为某台设备，会用xcode14.1跑15.5的设备
......@@ -47,7 +54,9 @@ describe('ExtApi-UploadFile', () => {
res = await page.data('jest_result');
expect(res).toBe(true)
})
}
}
let shouldTestCookie = false
if (process.env.uniTestPlatformInfo.startsWith('android') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
......
pages/API/upload-file/upload-file.uvue
浏览文件 @ b66282b5
......@@ -15,13 +15,13 @@
</scroll-view>
<!-- #endif -->
</template>
<script>
// #ifdef APP
import {
testInovkeUploadFile,
CommonOptions
} from '@/uni_modules/test-invoke-network-api'
// #endif
<script>
// #ifdef APP
import {
testInovkeUploadFile,
CommonOptions
} from '@/uni_modules/test-invoke-network-api'
// #endif
export default {
data() {
......@@ -102,6 +102,29 @@
},
})
},
jest_uploadFile_with_uni_env() {
const filePath = `${uni.env.CACHE_PATH}/download/uni-app.png`
uni.downloadFile({
url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
filePath: filePath,
success: () => {
uni.uploadFile({
url: 'https://unidemo.dcloud.net.cn/upload', //仅为示例，非真实的接口地址
filePath: filePath,
name: 'file',
success: () => {
this.jest_result = true;
},
fail: () => {
this.jest_result = false;
},
})
},
fail: () => {
this.jest_result = false
}
});
},
jest_set_cookie() {
uni.request({
url: "https://request.dcloud.net.cn/api/http/header/setCookie",
......@@ -178,20 +201,20 @@
this.jest_result = false;
},
})
},
jest_uts_module_invoked(){
// #ifdef APP
testInovkeUploadFile({
success:(res: any)=>{
console.log("success :", res);
this.jest_result = true
},
fail:(err: any)=>{
console.log("fail :", err);
this.jest_result = false
}
} as CommonOptions)
// #endif
},
jest_uts_module_invoked() {
// #ifdef APP
testInovkeUploadFile({
success: (res : any) => {
console.log("success :", res);
this.jest_result = true
},
fail: (err : any) => {
console.log("fail :", err);
this.jest_result = false
}
} as CommonOptions)
// #endif
}
}
}
......@@ -217,4 +240,4 @@
font-size: 19px;
color: #808080;
}
</style>
</style>
pages/CSS/border/dynamic-border.test.js
浏览文件 @ b66282b5
......@@ -14,7 +14,7 @@ describe('css-dynamic-border', () => {
// 取消圆角
it('check_none', async () => {
await page.callMethod('changeIndex', 2)
page.waitFor(100)
await page.waitFor(100)
const image = await program.screenshot({fullPage: true});
expect(image).toSaveImageSnapshot();
})
......@@ -22,7 +22,7 @@ describe('css-dynamic-border', () => {
// 左下，右下设置圆角
it('check_bottomleft_bottomright', async () => {
await page.callMethod('changeIndex', 10)
page.waitFor(100)
await page.waitFor(100)
const image = await program.screenshot({fullPage: true});
expect(image).toSaveImageSnapshot();
})
......
pages/CSS/overflow/overflow-visible-event.test.js
浏览文件 @ b66282b5
......@@ -18,16 +18,18 @@ describe('/pages/CSS/overflow/overflow-visible-event.uvue', () => {
beforeEach(async () => {
await page.setData({
jest_result: false,
jest_click_x: -1,
jest_click_y: -1
})
});
it('Check Overflow Visible Part Click', async () => {
it('Check Overflow Visible Part Click', async () => {
res = await page.callMethod('jest_getRect')
const point_x = await page.data('jest_click_x');
const point_y = await page.data('jest_click_y');
await program.adbCommand("input tap" + " " + point_x + " " + point_y)
await page.waitFor(500);
res = await page.data('jest_result');
expect(res).toBe(true)
await page.waitFor(500);
res = await page.data('jest_result');
expect(res).toBe(true)
});
});
pages/CSS/overflow/overflow-visible-event.uvue
浏览文件 @ b66282b5
<template>
<view>
<text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
<view class="backgroundview">
<view class="box-visible-border-radius">
<view id="child" style="width: 50px; height: 150px; background-color: red;"
@click="handleClickOverflowPart" @touchmove="handleTouchMoveOverflowPart">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
jest_result: false,
jest_click_x: -1,
jest_click_y: -1
}
},
methods: {
handleClickOverflowPart() {
console.log("click");
this.jest_result = true;
},
handleTouchMoveOverflowPart() {
console.log("move");
},
jest_getRect() {
const rect = uni.getElementById('child')?.getBoundingClientRect()
<template>
<view>
<text style="font-size: 15px;">overflow=visible 父view（绿色），子view（红色），点击超出父view区域的部分也可触发事件。</text>
<view class="backgroundview">
<view class="box-visible-border-radius">
<view id="child" style="width: 50px; height: 150px; background-color: red;"
@click="handleClickOverflowPart" @touchmove="handleTouchMoveOverflowPart">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
jest_result: false,
jest_click_x: -1,
jest_click_y: -1
}
},
methods: {
handleClickOverflowPart() {
console.log("click");
this.jest_result = true;
uni.showToast({"title":"点击红色区域"})
},
handleTouchMoveOverflowPart(e:UniTouchEvent) {
console.log("touchmove:" + e.touches[0].clientX + "," + e.touches[0].clientY);
},
handleClick(str : string) {
console.log(`点击了 ${str} view`);
if (str == 'red') {
this.jest_result = true;
}
},
jest_getRect() {
const rect = uni.getElementById('child')?.getBoundingClientRect()
if (rect != null) {
const ratio = uni.getSystemInfoSync().devicePixelRatio
this.jest_click_x = rect.x * ratio + 10
this.jest_click_y = rect.bottom * ratio - 10
const ratio = uni.getSystemInfoSync().devicePixelRatio
this.jest_click_x = rect.x * ratio + 10
this.jest_click_y = rect.bottom * ratio - 10
}
}
}
}
</script>
<style>
.backgroundview {
width: 300px;
height: 300px;
margin-bottom: 20px;
background-color: white;
justify-content: center;
align-items: center;
}
.box-visible-border-radius {
width: 100px;
height: 100px;
border-radius: 20px;
overflow: visible;
background-color: green;
}
}
}
}
</script>
<style>
.backgroundview {
width: 300px;
height: 300px;
margin-bottom: 20px;
background-color: white;
justify-content: center;
align-items: center;
}
.box-visible-border-radius {
width: 100px;
height: 100px;
border-radius: 20px;
overflow: visible;
background-color: green;
}
.hover-class {
background-color: aqua;
}
</style>
pages/CSS/text/font-size.test.js
浏览文件 @ b66282b5
......@@ -4,7 +4,7 @@ describe('css-font-size', () => {
page = await program.reLaunch('/pages/CSS/text/font-size');
});
it('screenshot', async () => {
it('change font-size screenshot', async () => {
await page.callMethod("setFontSize");
await page.waitFor(100);
const image = await program.screenshot({ fullPage: true });
......
pages/CSS/text/font-size.uvue
浏览文件 @ b66282b5
<template>
<view style="flex-grow: 1;">
<view style="height: 250px;background-color: gray;justify-content: center;align-items: center;">
<text ref="text" style="font-size: 15px;">{{fontSize}}</text>
<text ref="text" :style="{'font-size': fontSize}">font-size: {{fontSize}}</text>
<text style="font-size: 30px;">font-size: 30px</text>
</view>
</view>
......@@ -11,14 +11,13 @@
export default {
data() {
return {
fontSize: 'font-size: 15px'
fontSize: '15px'
}
},
methods: {
// 自动化测试
setFontSize() {
this.fontSize = 'font-size: 30px';
(this.$refs['text'] as UniElement).style.setProperty('font-size', '30px');
this.fontSize = '30px';
}
}
}
......
pages/CSS/transform/rotate.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('/pages/CSS/transform/rotate.uvue', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/CSS/transform/rotate')
await page.waitFor(1000);
});
it("snap rotate", async () => {
const image = await program.screenshot({
fullPage: true
})
expect(image).toSaveImageSnapshot()
})
});
pages/CSS/transform/scale.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('/pages/CSS/transform/scale.uvue', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/CSS/transform/scale')
await page.waitFor(1000);
});
it("snap scale", async () => {
const image = await program.screenshot({
fullPage: true
})
expect(image).toSaveImageSnapshot()
})
});
pages/CSS/transform/translate.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('/pages/CSS/transform/translate.uvue', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/CSS/transform/translate')
await page.waitFor(1000);
});
it("snap translate", async () => {
const image = await program.screenshot({
fullPage: true
})
expect(image).toSaveImageSnapshot()
})
});
pages/CSS/transition/transition.test.js 0 → 100644
浏览文件 @ b66282b5
// uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('/pages/CSS/transition/transition.uvue', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/CSS/transition/transition')
await page.waitFor(2000);
});
it("snap transition finish", async () => {
await page.callMethod('changeWidthOrHeight')
await page.callMethod('changeWidthProgress')
await page.callMethod('changeMargin')
await page.callMethod('changePadding')
await page.callMethod('changeBackground')
await page.callMethod('changeBackground2')
await page.callMethod('changeStyleOpacity')
await page.callMethod('propertyChangeBackground')
await page.callMethod('changeTransform')
await page.callMethod('changeTransformTranslate')
await page.callMethod('changeTransformWithWidth')
await page.callMethod('changeTransformWithOrigin')
await page.callMethod('changeBorder')
await page.callMethod('changestylePosition')
await page.waitFor(3000)
const image = await program.screenshot({
fullPage: true
})
expect(image).toSaveImageSnapshot()
})
});
pages/CSS/transition/transition.uvue
浏览文件 @ b66282b5
......@@ -2,64 +2,67 @@
<!-- #ifdef APP -->
<scroll-view style="flex: 1">
<!-- #endif -->
<view>
<view class="container">
<text class="text">点击修改宽度</text>
<view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
</view>
<view class="container">
<text class="text">点击修改宽度(递增)</text>
<view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
</view>
<view class="container">
<text class="text">点击修改Margin</text>
<view class="base-style transition-margin" id="styleMargin" @click="changeMargin"></view>
</view>
<view class="container">
<text class="text">点击修改Padding</text>
<view class="base-style transition-padding" id="stylePadding" @click="changePadding">
<view style="background-color: black; height: 50px; width: 50px"></view>
</view>
</view>
<view class="container">
<text class="text">点击修改background-color和opacity</text>
<view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改background-color（rgba）</text>
<view style="flex: 1;">
<view class="base-style transition-background" id="styleBackground2" @click="changeBackground2"></view>
</view>
</view>
<view class="container">
<text class="text">动态修改background-color和duration</text>
<view class="base-style" id="propertyStyleBackground" @click="propertyChangeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改Transform</text>
<view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
</view>
<view class="container">
<text class="text">点击修改TransformTranslate</text>
<view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
</view>
<view class="container">
<text class="text">点击修改Transform和宽</text>
<view class="base-style transition-transform-width" id="styleTransformWithWidth" @click="changeTransformWithWidth"></view>
</view>
<view class="container" @click="changeTransformWithOrigin">
<text class="text">点击修改Transform（含transform-origin）</text>
<view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin"></view>
</view>
<view class="container">
<text class="text">点击修改Border</text>
<view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
<view class="container">
<text class="text">点击修改宽度</text>
<view class="base-style transition-width" id="widthOrHeight" @click="changeWidthOrHeight"></view>
</view>
<view class="container">
<text class="text">点击修改宽度(递增)</text>
<view class="width-progress transition-width" id="widthProgress" @click="changeWidthProgress"></view>
</view>
<view class="container">
<text class="text">点击修改Margin</text>
<view class="base-style transition-margin" id="styleMargin" @click="changeMargin"></view>
</view>
<view class="container">
<text class="text">点击修改Padding</text>
<view class="base-style transition-padding" id="stylePadding" @click="changePadding">
<view style="background-color: black; height: 50px; width: 50px"></view>
</view>
<view class="container">
<text class="text">点击修改Position</text>
<view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
</view>
<view class="container">
<text class="text">点击修改background-color和opacity</text>
<view class="base-style transition-background" id="styleBackground" @click="changeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改background-color（rgba）</text>
<view style="flex: 1;">
<view class="base-style transition-background" id="styleBackground2" @click="changeBackground2"></view>
</view>
</view>
<view class="container">
<text class="text">点击修改opacity渐隐渐现</text>
<view class="base-style transition-opacity" id="styleOpacity" @click="changeStyleOpacity"></view>
</view>
<view class="container">
<text class="text">动态修改background-color和duration</text>
<view class="base-style" id="propertyStyleBackground" @click="propertyChangeBackground"></view>
</view>
<view class="container">
<text class="text">点击修改Transform</text>
<view class="base-style transition-transform" id="styleTransform" @click="changeTransform"></view>
</view>
<view class="container">
<text class="text">点击修改TransformTranslate</text>
<view class="base-style transition-transform" id="transformTranslate" @click="changeTransformTranslate"></view>
</view>
<view class="container">
<text class="text">点击修改Transform和宽</text>
<view class="base-style transition-transform-width" id="styleTransformWithWidth"
@click="changeTransformWithWidth"></view>
</view>
<view class="container" @click="changeTransformWithOrigin">
<text class="text">点击修改Transform（含transform-origin）</text>
<view class="base-style transition-transform" style="transform-origin: 0 0;" id="styleTransformWithOrigin"></view>
</view>
<view class="container">
<text class="text">点击修改Border</text>
<view class="base-style transition-border" id="styleBorder" @click="changeBorder"></view>
</view>
<view class="container">
<text class="text">点击修改Position</text>
<view class="base-style transition-position" id="stylePosition" @click="changestylePosition"></view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
......@@ -79,11 +82,13 @@
stylePadding: null as UniElement | null,
isTransitionstyleBackground: false,
isTransitionstyleBackground2: false,
isTransitionstyleOpacity: false,
styleBackground: null as UniElement | null,
styleBackground2: null as UniElement | null,
styleOpacity: null as UniElement | null,
isTransitionStyleTransform: false,
styleTransform: null as UniElement | null,
isTransitionStyleTransformWithWidth:false,
isTransitionStyleTransformWithWidth: false,
styleTransformWithWidth: null as UniElement | null,
isTransitionstyleBorder: false,
styleBorder: null as UniElement | null,
......@@ -105,6 +110,7 @@
this.stylePadding = uni.getElementById("stylePadding")
this.styleBackground = uni.getElementById("styleBackground")
this.styleBackground2 = uni.getElementById("styleBackground2")
this.styleOpacity = uni.getElementById("styleOpacity")
this.styleTransform = uni.getElementById("styleTransform")
this.styleBorder = uni.getElementById("styleBorder")
this.stylePosition = uni.getElementById("stylePosition")
......@@ -163,6 +169,14 @@
)
this.isTransitionstyleBackground2 = !this.isTransitionstyleBackground2
},
changeStyleOpacity() {
this.styleOpacity?.style?.setProperty("opacity", this.isTransitionstyleOpacity
? '1'
: '0'
)
this.styleOpacity?.style?.setProperty("transition-duration", "1000ms")
this.isTransitionstyleOpacity = !this.isTransitionstyleOpacity
},
propertyChangeBackground() {
if (!this.isSetTransition) {
this.propertyStyleBackground?.style?.setProperty("transition-property", "background-color")
......@@ -271,6 +285,11 @@
transition-duration: 1s;
}
.transition-opacity {
transition-property: opacity;
transition-duration: 1s;
}
.transition-transform {
transition-property: transform;
transition-duration: 1s;
......@@ -289,6 +308,7 @@
transition-property: left;
transition-duration: 1s;
}
.transition-transform-width {
transition-property: transform, width;
transition-duration: 1s;
......
pages/CSS/variable/variable.test.js
浏览文件 @ b66282b5
describe('css-variable', () => {
if (process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
it('app 与 web 存在差异, webview 不进行截图', () => {
expect(1).toBe(1)
return
})
}
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/CSS/variable/variable');
......
pages/component/button/button.uvue
浏览文件 @ b66282b5
......@@ -11,8 +11,11 @@
type_enum: [{ "value": 0, "name": "default" }, { "value": 1, "name": "primary" }, { "value": 2, "name": "warn" }] as ItemType[],
type_enum_current: 0,
count: 0,
text: 'uni-app-x'
text: ''
}
},
onReady() {
this.text = 'uni-app-x'
},
methods: {
button_click() {
......@@ -54,7 +57,8 @@
:type="type_enum[type_enum_current].name" :plain="plain_boolean" @click="button_click"
@touchstart="button_touchstart" @touchmove="button_touchmove" @touchcancel="button_touchcancel"
@touchend="button_touchend" @tap="button_tap" @longpress="button_longpress" class="btn"
:class="default_style ? 'custom-btn' : ''" :hover-class="default_style ? 'is-hover' : 'button-hover'">
:class="default_style ? (disabled_boolean ? 'custom-btn-disable' : 'custom-btn') : ''"
:hover-class="default_style ? 'is-hover' : 'button-hover'">
{{ text }}
</button>
</view>
......@@ -92,6 +96,12 @@
border-color: #1AAD19;
}
.custom-btn-disable {
color: rgba(255, 255, 255, 0.7);
background-color: rgba(26, 173, 25, 0.7);
border-color: rgba(26, 173, 25, 0.7);
}
.is-hover {
color: rgba(255, 255, 255, 0.6);
background-color: #179b16;
......
pages/component/canvas/ball.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view class="page-body">
<canvas id="canvas" class="canvas"></canvas>
</view>
</template>
<script setup>
class Ball {
private width : number
private height : number
public x : number
public y : number
public vx : number
public vy : number
public radius : number = 5
constructor(w : number, h : number, x : number, y : number, vx : number, vy : number) {
this.width = w
this.height = h
this.x = x
this.y = y
this.vx = vx
this.vy = vy
}
move() {
this.x += this.vx
this.y += this.vy
// 边框反弹
if (this.x < this.radius) {
this.vx = Math.abs(this.vx)
return
}
if (this.x > this.width - this.radius) {
this.vx = -Math.abs(this.vx)
}
if (this.y < this.radius) {
this.vy = Math.abs(this.vy)
return
}
if (this.y > this.width - this.radius) {
this.vy = -Math.abs(this.vy)
}
}
}
class BallAnimation {
private ctx : CanvasRenderingContext2D
private ballList : Array<Ball> = []
private speed = 3
private layer = 3
private ballInlayer = 20
private interval : number = 0
private runningFlag : boolean = false
// #ifdef WEB
private _bindAnimate: Function = null
// #endif
constructor(ctx : CanvasRenderingContext2D) {
this.ctx = ctx
this.initBall()
this.ctx.fillStyle = '#007AFF'
// #ifdef WEB
this._bindAnimate = this.animate.bind(this)
// #endif
}
private getDistance(x : number, y : number) : number {
return Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 0.5)
}
private initBall() {
const canvasWidth = this.ctx.canvas.offsetWidth;
const canvasHeight = this.ctx.canvas.offsetHeight;
for (let i = 0; i < this.layer; i++) {
let radius = this.getDistance(canvasWidth / 2, canvasHeight / 2) / this.layer * i
for (let j = 0; j < this.ballInlayer; j++) {
let deg = j * 2 * Math.PI / this.ballInlayer,
sin = Math.sin(deg),
cos = Math.cos(deg),
x = radius * cos + canvasWidth / 2,
y = radius * sin + canvasHeight / 2,
vx = this.speed * cos,
vy = this.speed * sin
this.ballList.push(new Ball(canvasWidth, canvasHeight, x, y, vx, vy))
}
}
}
public animate() {
this.ctx.clearRect(0, 0, this.ctx.canvas.offsetWidth, this.ctx.canvas.offsetHeight)
this.ballList.forEach((item) => {
item.move()
this.ctx.beginPath()
this.ctx.arc(item.x, item.y, item.radius, 0, 2 * Math.PI)
// this.ctx.ellipse(item.x, item.y, item.radius, item.radius, 0, 0, Math.PI * 2)
this.ctx.fill()
})
// #ifdef APP
this.ctx.draw()
// #endif
// #ifdef WEB
if (!this.runningFlag) {
return
}
requestAnimationFrame(this._bindAnimate)
// #endif
}
start() {
// #ifdef WEB
cancelAnimationFrame(this._bindAnimate)
this.runningFlag = true
this.animate()
// #endif
// #ifdef APP
//Todo.. requestAnimationFrame
clearInterval(this.interval)
this.interval = setInterval(() => {
this.animate()
}, 17)
// #endif
}
stop() {
// #ifdef WEB
this.runningFlag = false
cancelAnimationFrame(this._bindAnimate)
// #endif
// #ifdef APP
//Todo.. requestAnimationFrame
clearInterval(this.interval)
// #endif
}
}
let animation : BallAnimation | null = null
onReady(() => {
let canvas = uni.getElementById("canvas") as UniCanvasElement
let canvasContext = canvas.getContext("2d");
if (canvasContext != null) {
const dpr = uni.getSystemInfoSync().pixelRatio
canvas.width = canvas.offsetWidth * dpr
canvas.height = canvas.offsetHeight * dpr
canvasContext.scale(dpr, dpr)
animation = new BallAnimation(canvasContext)
animation?.start()
} else {
console.log("canvas.getContext error!!")
}
})
onUnload(() => {
animation?.stop()
animation = null
})
onPageShow(() => {
animation?.start()
})
onPageHide(() => {
animation?.stop()
})
</script>
<style>
.page-body-wrapper {
text-align: center;
}
.canvas {
width: 300px;
height: 300px;
margin: auto;
background-color: #fff;
}
</style>
pages/component/canvas/canvas.test.js 0 → 100644
浏览文件 @ b66282b5
let page
beforeAll(async () => {
if (!process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) {
return
}
page = await program.reLaunch('/pages/component/canvas/canvas')
await page.waitFor(2000)
})
describe('Canvas.uvue', () => {
it('toBlob', async () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('web')) {
const {
testToBlobResult,
testToDataURLResult
} = await page.data()
expect(testToBlobResult).toBe(true)
expect(testToDataURLResult).toBe(true)
}
})
})
pages/component/canvas/canvas.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view class="page" id="page-canvas">
<canvas id="canvas" class="canvas-element"></canvas>
<scroll-view class="scroll-view">
<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>
</scroll-view>
</view>
</template>
<script>
function hidpi(canvas : UniCanvasElement) {
const context = canvas.getContext("2d")!;
const dpr = uni.getSystemInfoSync().pixelRatio;
canvas.width = canvas.offsetWidth * dpr;
canvas.height = canvas.offsetHeight * dpr;
context.scale(dpr, dpr);
}
export default {
data() {
const API_PATH = ["arc", "arcTo", "bezierCurveTo", "quadraticCurve", "moveTo", "lineTo", "rect", "clip", "pattern"]
const API_DRAW = ["stroke", "strokeRect", "strokeText", "fill", "fillRect", "fillText", "drawImage", "drawImageLocal", "clearRect"]
const API_STATE = ["beginPath", "closePath", "restore", "reset", "setTransform", "transform", "rotate", "resetTransform", "save", "scale", "translate"]
const API_PROPERTIES = ["setLineCap", "setLineJoin", "setLineWidth", "setMiterLimit", "setFillStyle", "setStrokeStyle", "setGlobalAlpha", "lineDash", "linearGradient", "radialGradient", "textAlign"]
return {
title: 'Context2D',
names: [...API_PATH, ...API_DRAW, ...API_STATE, ...API_PROPERTIES, "measureText"] as string[],
canvasContext: null as CanvasRenderingContext2D | null,
canvasWidth: 0,
canvasHeight: 0,
image: null as Image | null,
// 仅测试
testToBlobResult: false,
testToDataURLResult: false
}
},
onReady() {
let canvas = uni.getElementById("canvas") as UniCanvasElement
this.canvasContext = canvas.getContext("2d");
hidpi(canvas);
this.canvasWidth = this.canvasContext!.canvas.width;
this.canvasHeight = this.canvasContext!.canvas.height;
// #ifdef WEB
canvas.toBlob((blob : Blob) => {
this.testToBlobResult = (blob.size > 0 && blob.type == 'image/jpeg')
}, 'image/jpeg', 0.95)
this.testToDataURLResult = canvas.toDataURL().startsWith('data:image/png;base64')
// #endif
},
methods: {
handleCanvasButton(name : string) {
switch (name) {
case "arc":
this.arc();
break;
case "arcTo":
this.arcTo();
break;
case "beginPath":
this.beginPath();
break;
case "bezierCurveTo":
this.bezierCurveTo();
break;
case "clearRect":
this.clearRect();
break;
case "clip":
this.clip();
break;
case "closePath":
this.closePath();
break;
case "pattern":
this.pattern()
break;
case "linearGradient":
this.createLinearGradient();
break;
case "radialGradient":
this.createRadialGradient();
break;
case "fill":
this.fill();
break;
case "fillRect":
this.fillRect();
break;
case "fillText":
this.fillText();
break;
case "lineTo":
this.lineTo();
break;
case "moveTo":
this.moveTo();
break;
case "quadraticCurve":
this.quadraticCurveTo();
break;
case "rect":
this.rect();
break;
case "reset":
this.reset();
break;
case "resetTransform":
this.resetTransform();
break;
case "restore":
this.restore();
break;
case "rotate":
this.rotate();
break;
case "save":
this.save();
break;
case "scale":
this.scale();
break;
case "setTransform":
this.setTransform();
break;
case "stroke":
this.stroke();
break;
case "strokeRect":
this.strokeRect();
break;
case "strokeText":
this.strokeText();
break;
case "transform":
this.transform();
break;
case "translate":
this.translate();
break;
case "drawImageLocal":
this.drawImageLocal()
break;
case "drawImage":
this.drawImage();
break;
case "measureText":
this.measureText();
break;
case "setFillStyle":
this.setFillStyle();
break;
case "setStrokeStyle":
this.setStrokeStyle();
break;
case "setGlobalAlpha":
this.setGlobalAlpha();
break;
case "setFontSize":
this.setFontSize();
break;
case "setLineCap":
this.setLineCap();
break;
case "setLineJoin":
this.setLineJoin();
break;
case "lineDash":
this.lineDash();
break;
case "setLineWidth":
this.setLineWidth();
break;
case "setMiterLimit":
this.setMiterLimit();
break;
case "textAlign":
this.textAlign();
default:
break;
}
},
arc() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.lineWidth = 2
context.arc(75, 75, 50, 0, Math.PI * 2, true)
context.moveTo(110, 75)
context.arc(75, 75, 35, 0, Math.PI, false)
context.moveTo(65, 65)
context.arc(60, 65, 5, 0, Math.PI * 2, true)
context.moveTo(95, 65)
context.arc(90, 65, 5, 0, Math.PI * 2, true)
context.stroke()
context.restore()
},
arcTo() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(150, 20)
context.arcTo(150, 100, 50, 20, 30)
context.stroke()
context.fillStyle = "blue"
// base point
context.fillRect(150, 20, 10, 10)
context.fillStyle = "red"
// control point one
context.fillRect(150, 100, 10, 10)
// control point two
context.fillRect(50, 20, 10, 10)
//
context.setLineDash([5, 5])
context.moveTo(150, 20)
context.lineTo(150, 100)
context.lineTo(50, 20)
context.stroke()
context.beginPath()
context.arc(120, 38, 30, 0, 2 * Math.PI, true)
context.stroke()
context.restore()
},
beginPath() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// First path
context.beginPath()
context.strokeStyle = "blue"
context.moveTo(20, 20)
context.lineTo(200, 20)
context.stroke()
// Second path
context.beginPath()
context.strokeStyle = "green"
context.moveTo(20, 20)
context.lineTo(120, 120)
context.stroke()
context.restore()
},
textAlign() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(150, 0)
context.lineTo(150, 150)
context.stroke()
context.font = "30px serif"
context.textAlign = "left"
context.fillText("left-aligned", 150, 40)
context.textAlign = "center"
context.fillText("center-aligned", 150, 85)
context.textAlign = "right"
context.fillText("right-aligned", 150, 130)
context.restore()
},
bezierCurveTo() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(50, 20)
context.bezierCurveTo(230, 30, 150, 60, 50, 100)
context.stroke()
context.fillStyle = "blue"
// start point
context.fillRect(50, 20, 10, 10)
// end point
context.fillRect(50, 100, 10, 10)
context.fillStyle = "red"
// control point one
context.fillRect(230, 30, 10, 10)
// control point two
context.fillRect(150, 70, 10, 10)
context.restore()
},
clearRect() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// 绘制黄色背景
context.beginPath()
context.fillStyle = "#ff6"
context.fillRect(0, 0, 300, 150)
// 绘制蓝色三角形
context.beginPath()
context.fillStyle = "blue"
context.moveTo(20, 20)
context.lineTo(180, 20)
context.lineTo(130, 130)
context.closePath()
context.fill()
// 清除一部分画布
context.clearRect(10, 10, 120, 100)
context.restore()
},
clip() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Create circular clipping region
context.beginPath();
context.arc(100, 75, 50, 0, Math.PI * 2, true)
context.clip()
// Draw stuff that gets clipped
context.fillStyle = "blue"
context.fillRect(0, 0, 300, 150)
context.fillStyle = "orange"
context.fillRect(0, 0, 100, 100)
context.restore()
},
closePath() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.lineWidth = 10
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.closePath()
context.stroke()
context.restore()
},
pattern() {
const context = this.canvasContext!
this.image = new Image(100, 100)
this.image!.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png';
// this.image!.src = 'https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createPattern/canvas_createpattern.png';
// Only use the image after it's loaded
this.image!.onload = () => {
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
const pattern = context.createPattern(this.image!, "repeat")
context.fillStyle = pattern
context.fillRect(0, 0, 64, 64)
context.restore()
};
},
createLinearGradient() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Create a linear gradient
// The start gradient point is at x=20, y=0
// The end gradient point is at x=220, y=0
const gradient = context.createLinearGradient(20, 0, 220, 0)
// Add three color stops
gradient.addColorStop(0, "green")
gradient.addColorStop(0.5, "cyan")
gradient.addColorStop(1, "green")
// Set the fill style and draw a rectangle
context.fillStyle = gradient
context.fillRect(20, 20, 200, 100)
context.restore()
},
createRadialGradient() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Create a radial gradient
// The inner circle is at x=110, y=90, with radius=30
// The outer circle is at x=100, y=100, with radius=70
const gradient = context.createRadialGradient(110, 90, 30, 100, 100, 70)
// Add three color stops
gradient.addColorStop(0, "pink")
gradient.addColorStop(0.9, "white")
gradient.addColorStop(1, "green")
// Set the fill style and draw a rectangle
context.fillStyle = gradient
context.fillRect(20, 20, 160, 160)
context.restore()
},
fill() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.rect(20, 20, 150, 100)
context.strokeStyle = '#00ff00'
context.fill()
context.restore()
},
fillRect() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.fillStyle = "green"
context.fillRect(20, 10, 150, 100)
context.restore()
},
fillText() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
console.log("fillText")
context.strokeStyle = '#ff0000'
context.beginPath()
context.moveTo(0, 10)
context.lineTo(300, 10)
context.stroke()
// context.save()
// context.scale(1.5, 1.5)
// context.translate(20, 20)
// context.setFontSize(10)
context.fillText('Hello World', 0, 30, 300)
// context.setFontSize(20)
context.fillText('Hello World', 100, 30, 300)
// context.restore()
context.beginPath()
context.moveTo(0, 30)
context.lineTo(300, 30)
context.stroke()
context.restore()
},
moveTo() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(0, 0)
context.lineTo(300, 150)
context.stroke()
context.restore()
},
lineTo() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.stroke()
context.restore()
},
stroke() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.moveTo(20, 20)
context.lineTo(20, 100)
context.lineTo(70, 100)
context.strokeStyle = '#00ff00'
context.stroke()
context.restore()
},
strokeRect() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.strokeStyle = "green"
context.strokeRect(20, 10, 160, 100)
context.restore()
},
strokeText() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.font = "10px serif"
context.strokeText("Hello world", 50, 90)
context.font = "30px serif"
context.strokeStyle = "blue"
context.strokeText("Hello world", 50, 100)
context.restore()
},
setTransform() {
},
rotate() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Point of transform origin
context.arc(0, 0, 5, 0, 2 * Math.PI, true)
context.fillStyle = "blue"
context.fill()
// Non-rotated rectangle
context.fillStyle = "gray"
context.fillRect(100, 0, 80, 20)
// Rotated rectangle
context.rotate((45 * Math.PI) / 180)
context.fillStyle = "red"
context.fillRect(100, 0, 80, 20)
// Reset transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
context.restore()
},
scale() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Scaled rectangle
context.scale(9, 3)
context.fillStyle = "red"
context.fillRect(10, 10, 8, 20)
// Reset current transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
// Non-scaled rectangle
context.fillStyle = "gray"
context.fillRect(10, 10, 8, 20)
context.restore()
},
reset() {
const context = this.canvasContext!
// Set line width
context.lineWidth = 10
context.strokeStyle = '#00ff00'
// Stroke rect outline
context.strokeRect(50, 50, 150, 100)
// Create filled text
context.font = "50px serif";
context.fillText("Rect!", 70, 110)
context.lineWidth = 5
// Stroke out circle
context.beginPath();
context.arc(300, 100, 50, 0, 2 * Math.PI)
context.stroke();
// Create filled text
context.font = "25px sans-serif"
context.fillText("Circle!", 265, 100)
context.reset()
hidpi(uni.getElementById("canvas") as UniCanvasElement)
},
translate() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Moved square
context.translate(110, 30)
context.fillStyle = "red"
context.fillRect(0, 0, 80, 80)
// Reset current transformation matrix to the identity matrix
context.setTransform(1, 0, 0, 1, 0, 0)
// Unmoved square
context.fillStyle = "gray"
context.fillRect(0, 0, 80, 80)
context.restore()
},
save() {
const context = this.canvasContext!
context.save()
context.beginPath()
context.strokeStyle = '#00ff00'
context.scale(2, 2)
context.strokeStyle = '#ff0000'
context.rect(0, 0, 100, 100)
context.stroke()
context.restore()
context.save()
context.rect(0, 0, 50, 50)
context.stroke()
context.restore()
},
restore() {
const context = this.canvasContext!;
[3, 2, 1].forEach((item) => {
context.save()
context.beginPath()
context.scale(item, item)
context.rect(10, 10, 100, 100)
context.stroke()
context.restore()
})
},
drawImageLocal() {
const context = this.canvasContext!
let image = new Image(100, 100)
image.src = '../../static/1.jpg'
image.onload = () => {
context.drawImage(image, 0, 0, 100, 100)
}
},
drawImage() {
const context = this.canvasContext!
let image = new Image(100, 100);
image.src = 'https://web-ext-storage.dcloud.net.cn/uni-app-x/hello-uniappx-qrcode.png'
image.onload = () => {
context.drawImage(image, 0, 0, 100, 100)
uni.getElementById("page-canvas")?.appendChild(image)
}
},
rect() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.beginPath()
context.rect(20, 20, 150, 100)
context.stroke()
context.restore()
},
quadraticCurveTo() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Quadratic Bézier curve
context.beginPath()
context.moveTo(50, 20)
context.quadraticCurveTo(230, 30, 50, 100)
context.stroke()
// Start and end points
context.fillStyle = "blue"
context.beginPath()
context.arc(50, 20, 5, 0, 2 * Math.PI, true) // Start point
context.arc(50, 100, 5, 0, 2 * Math.PI, true) // End point
context.fill();
// Control point
context.fillStyle = "red"
context.beginPath()
context.arc(230, 30, 5, 0, 2 * Math.PI, true)
context.fill()
context.restore()
},
resetTransform() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
// Draw a rotated rectangle
context.rotate((45 * Math.PI) / 180)
context.fillRect(60, 0, 100, 30)
// Reset transformation matrix to the identity matrix
context.resetTransform()
context.fillStyle = "red"
context.fillRect(60, 0, 100, 30)
context.restore()
},
transform() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.transform(1, 0.2, 0.8, 1, 0, 0)
context.fillRect(0, 0, 100, 100)
context.restore()
},
setFillStyle() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
context.fillStyle = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.restore()
},
setStrokeStyle() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach((item : string, index : number) => {
context.strokeStyle = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.stroke()
})
context.restore()
},
setGlobalAlpha() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.fillStyle = '#000000';
[1, 0.5, 0.1].forEach((item : number, index : number) => {
context.globalAlpha = item
context.beginPath()
context.rect(0 + 75 * index, 0, 50, 50)
context.fill()
})
context.globalAlpha = 1
context.restore()
},
setFontSize() {
const context = this.canvasContext!
context.save();
[10, 20, 30, 40].forEach((item : number, index : number) => {
// context.fontSize(item)
context.fillText('Hello, world', 20, 20 + 40 * index)
})
context.restore()
},
setLineCap() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.lineWidth = 10;
['butt', 'round', 'square'].forEach((item : string, index : number) => {
context.beginPath()
context.lineCap = item
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.restore()
},
setLineJoin() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.lineWidth = 10;
['bevel', 'round', 'miter'].forEach((item : string, index : number) => {
context.beginPath()
context.lineJoin = item
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.restore()
},
setLineWidth() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
context.beginPath()
context.lineWidth = item
context.moveTo(20, 20 + 20 * index)
context.lineTo(100, 20 + 20 * index)
context.stroke()
})
context.restore()
},
lineDash() {
const context = this.canvasContext!
context.save();
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.setLineDash([4, 16])
// Dashed line with no offset
context.beginPath()
context.moveTo(0, 50)
context.lineTo(300, 50)
context.stroke()
// Dashed line with offset of 4
context.beginPath()
context.strokeStyle = "red"
context.lineDashOffset = 4
context.moveTo(0, 100)
context.lineTo(300, 100)
context.stroke()
context.restore()
},
setMiterLimit() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
context.lineWidth = 4;
[2, 4, 6, 8, 10].forEach((item : number, index : number) => {
context.beginPath()
context.miterLimit = item
context.moveTo(20 + 80 * index, 20)
context.lineTo(100 + 80 * index, 50)
context.lineTo(20 + 80 * index, 100)
context.stroke()
})
context.restore()
},
measureText() {
const context = this.canvasContext!
context.save()
context.clearRect(0, 0, this.canvasWidth, this.canvasHeight)
const text = "uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎"
context.font = "20px 宋体"
context.fillStyle = "red"
context.fillText(text, 0, 60)
const textMetrics = context.measureText(text)
context.strokeText(text, 40, 100)
context.fillText("measure text width:" + textMetrics.width, 40, 80)
context.restore()
}
}
}
</script>
<style>
.page {
flex: 1;
height: 100%;
overflow: hidden;
}
.scroll-view {
flex: 1;
padding-bottom: 50px;
}
.canvas-element {
width: 100%;
height: 250px;
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>
pages/component/checkbox/checkbox.uvue
浏览文件 @ b66282b5
<script>
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
testEvent: false,
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
iconColor: '#211cfe',
foreColor: '#ff0000',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff",
foreColor_input: '#ff0000'
}
},
methods: {
checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
// 自动化测试
if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {
this.testEvent = true
}
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : UniCheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value },
confirm_foreColor_input(value : string) { this.foreColor_input = value }
}
}
</script>
<template>
<view class="main">
<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
:foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
@click="checkbox_click" @touchstart="checkbox_touchstart" @touchmove="checkbox_touchmove"
@touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend" @tap="checkbox_tap"
@longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#007aff" title="iconColor: checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_iconColor_input"></input-data>
<input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_foreColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
<checkbox value="cb" :checked="checked" :color="color" :iconColor="iconColor" :foreColor="foreColor"
style="margin-right: 15px" class="checkbox cb">选中
</checkbox>
<checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
{{ wrapText }}
</checkbox>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group">
<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="checkbox">选中
</checkbox>
<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group" id="trigger-change">
<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
:value="item.value" :checked="item.checked" :class="[
index < items.length - 1 ? 'uni-list-cell-line' : '',
'checkbox-item-' + index,
]">
{{ item.name }}
</checkbox>
</checkbox-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
<script>
type ItemType = {
value : string
name : string
checked : boolean
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
checked: true,
},
{
value: 'USA',
name: '美国',
checked: false,
},
{
value: 'BRA',
name: '巴西',
checked: false,
},
{
value: 'JPN',
name: '日本',
checked: false,
},
{
value: 'ENG',
name: '英国',
checked: false,
},
{
value: 'FRA',
name: '法国',
checked: false,
},
] as ItemType[],
testEvent: false,
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
value: [] as string[],
disabled: true,
checked: true,
color: '#007aff',
iconColor: '#211cfe',
foreColor: '#ff0000',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007aff",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#ffffff",
activeBorderColor_input: "#d1d1d1",
iconColor_input: "#007aff",
foreColor_input: '#ff0000'
}
},
methods: {
checkboxChange: function (e : UniCheckboxGroupChangeEvent) {
// 自动化测试
if ((e.target?.tagName ?? '') == 'CHECKBOX-GROUP' && e.type === 'change') {
this.testEvent = true
}
const selectedNames : string[] = []
this.items.forEach((item) => {
if (e.detail.value.includes(item.value)) {
selectedNames.push(item.name)
}
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selectedNames.join(','),
})
},
testChange: function (e : UniCheckboxGroupChangeEvent) {
this.value = e.detail.value
},
checkbox_click() { console.log("组件被点击时触发") },
checkbox_touchstart() { console.log("手指触摸动作开始") },
checkbox_touchmove() { console.log("手指触摸后移动") },
checkbox_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
checkbox_touchend() { console.log("手指触摸动作结束") },
checkbox_tap() { console.log("手指触摸后马上离开") },
checkbox_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value },
confirm_foreColor_input(value : string) { this.foreColor_input = value }
}
}
</script>
<template>
<view class="main">
<checkbox :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input" :iconColor="iconColor_input"
:foreColor="foreColor_input" :backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
@click="checkbox_click" @touchstart="checkbox_touchstart" @touchmove="checkbox_touchmove"
@touchcancel="checkbox_touchcancel" @touchend="checkbox_touchend" @tap="checkbox_tap"
@longpress="checkbox_longpress"><text>uni-app-x</text></checkbox>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="当前是否选中，可用来设置默认选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007aff" title="checkbox的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="checkbox选中时的背景颜色" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="checkbox选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#007aff" title="iconColor: checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_iconColor_input"></input-data>
<input-data defaultValue="#ff0000" title="foreColor: checkbox的图标颜色，优先级大于color属性" type="text"
@confirm="confirm_foreColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange" style="flex-wrap: wrap">
<checkbox value="cb" :checked="checked" :color="color" :iconColor="iconColor" :foreColor="foreColor"
style="margin-right: 15px" class="checkbox cb">选中
</checkbox>
<checkbox value="cb1" style="margin-right: 15px" class="checkbox cb1">{{ text }}</checkbox>
<checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
<checkbox value="cb3" style="margin-top: 10px" class="checkbox cb3">
{{ wrapText }}
</checkbox>
</checkbox-group>
</view>
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的checkbox </text>
</view>
<view>
<checkbox-group class="uni-flex uni-row checkbox-group">
<checkbox value="cb1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="checkbox">选中
</checkbox>
<checkbox value="cb" color="#FFCC33" style="transform: scale(0.7)" class="checkbox">未选中</checkbox>
</checkbox-group>
</view>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<checkbox-group @change="checkboxChange" class="checkbox-group" id="trigger-change">
<checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items" :key="item.value"
:value="item.value" :checked="item.checked" :class="[
index < items.length - 1 ? 'uni-list-cell-line' : '',
'checkbox-item-' + index,
]">
{{ item.name }}
</checkbox>
</checkbox-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/form/form.test.js
浏览文件 @ b66282b5
......@@ -28,7 +28,8 @@ describe('form', () => {
await page.waitFor(200)
const {
formData
formData,
testVerifySubmit
} = await page.data()
expect(formData['nickname']).toBe(CHANGE_NICK_NAME)
......@@ -38,6 +39,8 @@ describe('form', () => {
expect(formData['age']).toBe(CHANGE_AGE)
expect(formData['switch']).toBe(CHANGE_SWITCH)
expect(formData['comment']).toBe(CHANGE_COMMENT)
expect(testVerifySubmit).toBe(true)
})
it('reset', async () => {
await changeData(page)
......@@ -51,7 +54,8 @@ describe('form', () => {
await page.waitFor(100)
const {
formData
formData,
testVerifyReset
} = await page.data()
expect(formData['nickname']).toBe(DEFAULT_NICK_NAME)
......@@ -60,6 +64,8 @@ describe('form', () => {
expect(formData['age']).toBe(DEFAULT_AGE)
expect(formData['switch']).toBe(DEFAULT_SWITCH)
expect(formData['comment']).toBe(DEFAULT_COMMENT)
expect(testVerifyReset).toBe(true)
})
})
......
pages/component/form/form.uvue
浏览文件 @ b66282b5
......@@ -68,7 +68,10 @@
loves: ['0'],
switch: true,
comment:'',
formData: {} as UTSJSONObject
formData: {} as UTSJSONObject,
// 仅测试
testVerifySubmit: false,
testVerifyReset: false,
}
},
computed: {
......@@ -78,10 +81,18 @@
},
methods: {
onFormSubmit: function (e : UniFormSubmitEvent) {
console.log(e.target?.tagName ?? '123');
console.log(e.type);
this.formData = e.detail.value
// 仅测试
this.testVerifySubmit = (e.type == 'submit' && (e.target?.tagName ?? '') == "FORM")
},
onFormReset: function (_ : UniFormResetEvent) {
onFormReset: function (e : UniFormResetEvent) {
this.formData = {}
// 仅测试
this.testVerifyReset = (e.type == 'reset' && (e.target?.tagName ?? '') == "FORM")
}
}
}
......
pages/component/general-event/general-event.test.js
浏览文件 @ b66282b5
const PAGE_PATH = '/pages/component/general-event/general-event'
describe('event trigger sequence', () => {
describe('event trigger', () => {
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isAndroid = platformInfo.startsWith('android')
const isIos = platformInfo.startsWith('ios')
......@@ -222,7 +222,7 @@ describe('event trigger sequence', () => {
if (isAndroid || isIos) {
if (isAndroid) {
if (platformInfo.indexOf('6') != -1) {
if (platformInfo.indexOf('6') != -1 && platformInfo.indexOf('x86') == -1) {
await program.tap({
x: 200,
y: 700,
......@@ -242,6 +242,11 @@ describe('event trigger sequence', () => {
})
}
} else if (isIos) {
// 规避系统授权弹框
await program.tap({
x: 100,
y: 500,
})
await program.tap({
x: 200,
y: 400,
......@@ -293,4 +298,4 @@ describe('event trigger sequence', () => {
}
}
})
})
})
pages/component/general-event/transition-event.uvue
浏览文件 @ b66282b5
......@@ -28,6 +28,7 @@
}
},
onReady() {
// onReady中动态修改isShow是为了验证在安卓手机上子线程中创建节点可能会崩溃的问题，不具备代码参考性。
// #ifdef APP-ANDROID
var that = this
class ThreadRunnable extends Runnable {
......
pages/component/image/image.test.js
浏览文件 @ b66282b5
......@@ -2,7 +2,7 @@
describe('component-native-image', () => {
let page;
async function getWindowInfo() {
const windowInfoPage = await program.reLaunch('/pages/API/get-window-info/get-window-info')
await windowInfoPage.waitFor(600);
......@@ -10,7 +10,7 @@ describe('component-native-image', () => {
}
const screenshotParams = { fullPage: true }
let windowInfo
beforeAll(async () => {
if (!process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
screenshotParams.fullPage = false
......@@ -24,7 +24,7 @@ describe('component-native-image', () => {
}
screenshotParams.offsetY = offsetY
}
page = await program.reLaunch('/pages/component/image/image');
await page.waitFor(600);
});
......@@ -70,6 +70,49 @@ describe('component-native-image', () => {
})
}
it('test event load', async () => {
await page.setData({
autoTest: true,
imageSrc: 'https://request.dcloud.net.cn/api/http/contentType/image/png'
});
await page.waitFor(1000);
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
expect(await page.data('eventLoad')).toEqual({
type: 'load',
width: 10,
height: 10
});
return
}
expect(await page.data('eventLoad')).toEqual({
tagName: 'IMAGE',
type: 'load',
width: 10,
height: 10
});
});
it('test event error', async () => {
await page.setData({
imageSrc: 'https://request.dcloud.net.cn/api/http/contentType/404.png'
});
await page.waitFor(500);
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
expect(await page.data('eventError')).toEqual({
type: 'error'
});
}else {
expect(await page.data('eventError')).toEqual({
tagName: 'IMAGE',
type: 'error'
});
}
await page.setData({
autoTest: false
});
});
it('path-screenshot', async () => {
const page = await program.navigateTo('/pages/component/image/image-path');
await page.waitFor(3000);
......
pages/component/image/image.uvue
浏览文件 @ b66282b5
......@@ -34,16 +34,33 @@
// 自动化测试
autoTest: false,
setCookieImage: "",
verifyCookieImage: ""
verifyCookieImage: "",
eventLoad: null as UTSJSONObject | null,
eventError: null as UTSJSONObject | null
}
},
methods: {
error(event : ImageErrorEvent) {
this.loadError = true
console.log(event.type, event.detail);
console.log(event.type, event.detail);
if (this.autoTest) {
this.eventError = {
"tagName": event.target?.tagName,
"type": event.type,
// "errMsg": event.detail.errMsg
};
}
},
load(event : ImageLoadEvent) {
console.log(event.type, event.detail);
console.log(event.type, event.detail);
if (this.autoTest) {
this.eventLoad = {
"tagName": event.target?.tagName,
"type": event.type,
"width": event.detail.width,
"height": event.detail.height
};
}
},
imageFormat() {
uni.navigateTo({
......
pages/component/input/input.test.js
浏览文件 @ b66282b5
......@@ -184,11 +184,11 @@ describe('component-native-input', () => {
await program.navigateTo("/pages/API/navigator/new-page/new-page-3")
await page.waitFor(2000);
await program.navigateBack()
await page.waitFor(2000);
await page.waitFor(1000);
await page.setData({
focusedForKeyboardHeightChangeTest: true
})
await page.waitFor(2000);
await page.waitFor(5000);
const keyboardHeight = await page.data('keyboardHeight');
console.log("keyboardHeight :", keyboardHeight);
......
pages/component/input/input.uvue
浏览文件 @ b66282b5
......@@ -248,6 +248,17 @@
</view>
</view>
<view>
<view class="uni-title" style="flex-direction: row;align-items: center;">
<text class="uni-title-text">设置adjust-position</text>
<switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="adjustPosition"></switch>
</view>
<view class="input-wrapper">
<input class="uni-input" :adjust-position="adjustPosition"/>
</view>
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
......@@ -282,7 +293,8 @@
holdKeyboard: false,
keyboardHeight: 0,
focusedForKeyboardHeightChangeTest: false,
demoValue: '123'
demoValue: '123',
adjustPosition: false
}
},
methods: {
......@@ -359,6 +371,10 @@
changeHoldKeyboard(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
this.holdKeyboard = checked
},
changeAdjustPosition(event : UniSwitchChangeEvent){
const checked = event.detail.value;
this.adjustPosition = checked
}
}
}
......
pages/component/list-view/list-view-children-in-slot.test.js
浏览文件 @ b66282b5
describe('list-view-children-in-slot', () => {
if (process.env.uniTestPlatformInfo.startsWith('web')) {
it('dummyTest', async () => {
expect(1).toBe(1)
})
return
}
let page
beforeAll(async () => {
page = await program.reLaunch('/pages/component/list-view/list-view-children-in-slot')
await page.waitFor('list-view')
await page.waitFor('list-view')
await page.waitFor(300)
})
it('basic', async () => {
......
pages/component/list-view/list-view-multiplex.uvue
浏览文件 @ b66282b5
......@@ -8,6 +8,7 @@
<list-item v-for="index in item_count" class="item" @click="itemClick(index)">
<text >item-------<text>{{index}}</text></text>
<text v-show="displayArrow" >item-------<text>{{index}}</text></text>
<switch :checked="true"></switch>
</list-item>
</list-view>
</view>
......
pages/component/list-view/list-view.test.js
浏览文件 @ b66282b5
......@@ -75,12 +75,16 @@ describe('component-native-list-view', () => {
return
}
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return
}
it('Event scrollend-滚动结束时触发',async()=>{
// 仅App端支持,向上滑动页面
await program.swipe({
startPoint: { x: 100, y: 300 },
endPoint: { x: 100, y: 100 },
duration: 1000
duration: 100
})
await page.waitFor(600)
const endDetail = await page.data('scrollEndDetailTest')
......@@ -94,10 +98,6 @@ describe('component-native-list-view', () => {
// expect(endDetail.scrollWidth).toBeGreaterThan(0)
})
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return
}
//检测竖向可滚动区域
it('check_scroll_height', async () => {
await page.callMethod('change_scroll_y_boolean', true)
......
pages/API/map/map.test.js → pages/component/map/map.test.js
浏览文件 @ b66282b5
......@@ -8,7 +8,7 @@ describe('web-map', () => {
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/API/map/map')
page = await program.reLaunch('/pages/component/map/map')
await page.waitFor('view');
// 等待地图加载完成
await page.waitFor(4000);
......
pages/component/map/map.uvue
浏览文件 @ b66282b5
<template>
<view>
<page-head :title="title"></page-head>
<view class="uni-common-mt">
<view>
<map :latitude="latitude" :longitude="longitude" :markers="covers">
</map>
</view>
</view>
</view>
<view class="content">
<map class="map" id="map1" ref="map1" :controls="controls" :scale="scale" :longitude="location.longitude"
:latitude="location.latitude" :show-location="showLocation" :enable-3D="enable3D" :rotate="rotate" :skew="skew"
:show-compass="showCompass" :enable-overlooking="enableOverlooking" :enable-zoom="enableZoom"
:enable-scroll="enableScroll" :enable-rotate="enableRotate" :enable-satellite="enableSatellite"
:enable-traffic="enableTraffic" :markers="markers" :polyline="polyline" :circles="circles" :polygons="polygons"
:include-points="includePoints" @tap="maptap" @controltap="oncontroltap" @markertap="onmarkertap"
@callouttap="oncallouttap" @poitap="onpoitap" @updated="onupdated" @regionchange="onregionchange"></map>
<scroll-view class="scrollview" scroll-y="true">
<button class="button" @click="changeScale">changeScale</button>
<button class="button" @click="addMarkers">addMarkers</button>
<button class="button" @click="addPolyline">addPolyline</button>
<button class="button" @click="addPolygons">addPolygons</button>
<button class="button" @click="addCircles">addCircles</button>
<button class="button" @click="includePoint">includePoints</button>
<button class="button" @click="handleGetCenterLocation">getCenterLocation</button>
<button class="button" @click="handleGetRegion">getRegion</button>
<button class="button" @click="handleTranslateMarker">translateMarker</button>
</scroll-view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'map',
latitude: 39.909,
longitude: 116.39742,
covers: [{
id: 1,
latitude: 39.9085,
longitude: 116.39747,
iconPath: '../../../static/location.png',
}, {
id: 2,
latitude: 39.90,
longitude: 116.39,
iconPath: '../../../static/location.png',
}]
}
}
}
<script lang="uts">
type Anchor = {
x : number,
y : number
}
type Callout = {
content : string,
color : string,
fontSize : number,
borderRadius : number,
borderWidth : number,
borderColor : string,
bgColor : string,
padding : string,
display : string
}
type Markers = {
id : string | number,
latitude : number,
longitude : number,
title : string
zIndex : string,
iconPath : string,
rotate ?: number,
width : number,
height : number,
anchor : Anchor,
callout : Callout
}
type Points = {
latitude : number,
longitude : number
}
type Polyline = {
points : Points[],
color : string,
width : number,
dottedLine : boolean,
arrowLine : boolean,
borderColor : string,
borderWidth : number
}
type Polygons = {
points : Points[];
fillColor : string;
strokeWidth : number;
strokeColor : string;
zIndex : number;
}
type Circles = {
latitude : number;
longitude : number;
radius : number;
strokeWidth : number;
color : string;
fillColor : string;
}
const testMarkers = [{
id: 0,
latitude: 39.989631,
longitude: 116.481018,
title: '方恒国际 阜通东大街6号',
zIndex: '1',
iconPath: '../../../static/location.png',
rotate: 0,
width: 20,
height: 20,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '方恒国际 阜通东大街6号',
color: '#00BFFF',
fontSize: 10,
borderRadius: 4,
borderWidth: 1,
borderColor: '#333300',
bgColor: '#CCFF99',
padding: '5',
display: 'ALWAYS'
}
},
{
id: 1,
latitude: 39.9086920000,
longitude: 116.3974770000,
title: '天安门',
zIndex: '1',
iconPath: '../../../static/location.png',
width: 40,
height: 40,
anchor: {
x: 0.5,
y: 1
},
callout: {
content: '首都北京\n天安门',
color: '#00BFFF',
fontSize: 12,
borderRadius: 2,
borderWidth: 0,
borderColor: '#333300',
bgColor: '#CCFF11',
padding: '1',
display: 'ALWAYS'
}
}
];
const testPolyline = [{
points: [{
latitude: 39.925539,
longitude: 116.279037
},
{
latitude: 39.925539,
longitude: 116.520285
}],
color: '#FFCCFF',
width: 7,
dottedLine: true,
arrowLine: true,
borderColor: '#000000',
borderWidth: 2
},
{
points: [{
latitude: 39.938698,
longitude: 116.275177
},
{
latitude: 39.966069,
longitude: 116.289253
},
{
latitude: 39.944226,
longitude: 116.306076
},
{
latitude: 39.966069,
longitude: 116.322899
},
{
latitude: 39.938698,
longitude: 116.336975
}],
color: '#CCFFFF',
width: 5,
dottedLine: true,
arrowLine: true,
borderColor: '#CC0000',
borderWidth: 3
}
];
const testPolygons = [{
points: [{
latitude: 39.781892,
longitude: 116.293413
},
{
latitude: 39.787600,
longitude: 116.391842
},
{
latitude: 39.733187,
longitude: 116.417932
},
{
latitude: 39.704653,
longitude: 116.338255
}],
fillColor: '#FFCCFF',
strokeWidth: 3,
strokeColor: '#CC99CC',
zIndex: 11
},
{
points: [{
latitude: 39.887600,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.518932
},
{
latitude: 39.781892,
longitude: 116.428932
},
{
latitude: 39.887600,
longitude: 116.428932
}
],
fillColor: '#CCFFFF',
strokeWidth: 5,
strokeColor: '#CC0000',
zIndex: 3
}
];
const testCircles = [{
latitude: 39.996441,
longitude: 116.411146,
radius: 15000,
strokeWidth: 5,
color: '#CCFFFF',
fillColor: '#CC0000'
},
{
latitude: 40.096441,
longitude: 116.511146,
radius: 12000,
strokeWidth: 3,
color: '#CCFFFF',
fillColor: '#FFCCFF'
},
{
latitude: 39.896441,
longitude: 116.311146,
radius: 9000,
strokeWidth: 1,
color: '#CCFFFF',
fillColor: '#CC0000'
}
];
const testIncludePoints = [{
latitude: 39.989631,
longitude: 116.481018,
},
{
latitude: 39.9086920000,
longitude: 116.3974770000,
}
];
export default {
data() {
return {
location: {
longitude: 116.3974770000,
latitude: 39.9086920000
},
controls: [{
id: 1,
position: {
left: 5,
top: 180,
width: 30,
height: 30
},
iconPath: '../../../static/uni.png',
clickable: true
}],
showLocation: false,
scale: 13,
showCompass: true,
enable3D: true,
enableOverlooking: true,
enableZoom: true,
enableScroll: true,
enableRotate: true,
enableSatellite: false,
enableTraffic: false,
polyline: [] as Polyline[],
markers: [] as Markers[],
polygons: [] as Polygons[],
circles: [] as Circles[],
includePoints: [] as Points[],
rotate: 0,
skew: 0,
map: null as MapContext | null,
// 自动化测试
autoTest: false,
getCenterLocationTest:{},
getRegionTest:{},
}
},
onReady() {
this.map = uni.createMapContext("map1", this);
},
methods: {
changeScale() {
this.scale = this.scale == 9 ? 15 : 9;
},
enableThreeD(e) {
this.enable3D = e.detail.value;
},
changeShowCompass(e) {
this.showCompass = e.detail.value;
},
changeEnableOverlooking(e) {
this.enableOverlooking = e.detail.value;
},
changeEnableZoom(e) {
this.enableZoom = e.detail.value;
},
changeEnableScroll(e) {
this.enableScroll = e.detail.value;
},
changeEnableRotate(e) {
this.enableRotate = e.detail.value;
},
changeEnableSatellite(e) {
this.enableSatellite = e.detail.value;
},
changeEnableTraffic(e) {
this.enableTraffic = e.detail.value;
},
addMarkers() {
this.markers = testMarkers;
},
addPolyline() {
this.polyline = testPolyline;
},
addPolygons() {
this.polygons = testPolygons;
},
addCircles() {
this.circles = testCircles;
},
includePoint() {
this.includePoints = testIncludePoints;
},
handleGetCenterLocation() {
this.map!.getCenterLocation({
success: ret => {
console.log(JSON.stringify(ret));
this.getCenterLocationTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleGetRegion() {
this.map!.getRegion({
success: ret => {
console.log(JSON.stringify(ret));
this.getRegionTest = ret
if(!this.autoTest){
uni.showModal({
content: JSON.stringify(ret)
})
}
}
})
},
handleTranslateMarker() {
this.map!.translateMarker({
markerId: 1,
destination: {
latitude: 39.989631,
longitude: 116.481018
},
duration: 2000,
success: ret => {
console.log(JSON.stringify(ret));
}
});
},
maptap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onmarkertap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncontroltap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
oncallouttap(e) {
uni.showModal({
content: JSON.stringify(e)
})
},
onupdated(e) {
console.log(JSON.stringify(e))
},
onregionchange(e) {
console.log(JSON.stringify(e));
},
onpoitap(e) {
uni.showModal({
content: JSON.stringify(e)
})
}
}
}
</script>
<style>
map {
width: 100%;
height: 600rpx;
}
.content {
flex: 1;
}
.map {
width: 100%;
height: 250px;
background-color: #f0f0f0;
}
.scrollview {
flex: 1;
padding: 10px;
}
.list-item {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
padding: 5px 0px;
}
.list-text {
flex: 1;
}
.button {
margin-top: 5px;
margin-bottom: 5px;
}
</style>
pages/component/movable-view/movable-view.test.js 0 → 100644
浏览文件 @ b66282b5
let page;
describe('movable-view.uvue', () => {
console.log(process.env.uniTestPlatformInfo,process.env.uniTestPlatformInfo.startsWith('web'))
if (!process.env.uniTestPlatformInfo.startsWith('web')) {
it('app', () => {
expect(1).toBe(1)
})
return
}
beforeAll(async () => {
page = await program.reLaunch('/pages/component/movable-view/movable-view')
await page.waitFor('view');
});
it('移动至 (30px, 30px)', async () => {
expect(await page.data('x')).toBe(0)
expect(await page.data('y')).toBe(0)
await page.callMethod('tap')
await page.waitFor(500);
expect(await page.data('x')).toBe(30)
expect(await page.data('y')).toBe(30)
})
it('放大3倍', async () => {
expect(await page.data('scale')).toBe(2)
await page.callMethod('tap2')
await page.waitFor(500);
expect(await page.data('scale')).toBe(3)
})
})
pages/component/radio/radio.uvue
浏览文件 @ b66282b5
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
eventTest: false,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : UniRadioGroupChangeEvent) {
// 自动化测试
console.log('test: radio event detail', e.target?.tagName, e.type)
if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {
this.eventTest = true
}
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : UniRadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio id="trigger-change" value="r" :checked="checked" :color="color" style="margin-right: 15px"
class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 15px" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 10px">{{
wrapText
}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="radio">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio class="uni-list-cell uni-list-cell-pd radio recommand" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
<script>
type ItemType = {
value : string
name : string
}
export default {
data() {
return {
items: [
{
value: 'CHN',
name: '中国',
},
{
value: 'USA',
name: '美国',
},
{
value: 'BRA',
name: '巴西',
},
{
value: 'JPN',
name: '日本',
},
{
value: 'ENG',
name: '英国',
},
{
value: 'FRA',
name: '法国',
},
] as ItemType[],
current: 0,
eventTest: false,
value: '',
text: '未选中',
wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
disabled: true,
checked: true,
color: '#007aff',
// 组件属性 autotest
checked_boolean: false,
disabled_boolean: false,
color_input: "#007AFF",
backgroundColor_input: "#ffffff",
borderColor_input: "#d1d1d1",
activeBackgroundColor_input: "#007AFF",
activeBorderColor_input: "",
iconColor_input: "#ffffff"
}
},
methods: {
radioChange(e : UniRadioGroupChangeEvent) {
// 自动化测试
console.log('test: radio event detail', e.target?.tagName, e.type)
if ((e.target?.tagName ?? '') == 'RADIO-GROUP' && e.type == 'change') {
this.eventTest = true
}
const selected = this.items.find((item) : boolean => {
return item.value == e.detail.value
})
uni.showToast({
icon: 'none',
title: '当前选中:' + selected?.name,
})
},
testChange(e : UniRadioGroupChangeEvent) {
this.value = e.detail.value
},
radio_click() { console.log("组件被点击时触发") },
radio_touchstart() { console.log("手指触摸动作开始") },
radio_touchmove() { console.log("手指触摸后移动") },
radio_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
radio_touchend() { console.log("手指触摸动作结束") },
radio_tap() { console.log("手指触摸后马上离开") },
radio_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
change_checked_boolean(checked : boolean) { this.checked_boolean = checked },
change_disabled_boolean(checked : boolean) { this.disabled_boolean = checked },
confirm_color_input(value : string) { this.color_input = value },
confirm_backgroundColor_input(value : string) { this.backgroundColor_input = value },
confirm_borderColor_input(value : string) { this.borderColor_input = value },
confirm_activeBackgroundColor_input(value : string) { this.activeBackgroundColor_input = value },
confirm_activeBorderColor_input(value : string) { this.activeBorderColor_input = value },
confirm_iconColor_input(value : string) { this.iconColor_input = value }
}
}
</script>
<template>
<view class="main">
<radio :disabled="disabled_boolean" :checked="checked_boolean" :color="color_input"
:backgroundColor="backgroundColor_input" :borderColor="borderColor_input"
:activeBackgroundColor="activeBackgroundColor_input" :activeBorderColor="activeBorderColor_input"
:iconColor="iconColor_input" @click="radio_click" @touchstart="radio_touchstart" @touchmove="radio_touchmove"
@touchcancel="radio_touchcancel" @touchend="radio_touchend" @tap="radio_tap" @longpress="radio_longpress">
<text>uni-app-x</text>
</radio>
</view>
<scroll-view style="flex: 1">
<view class="content">
<page-head title="组件属性"></page-head>
<boolean-data :defaultValue="false" title="<radio/> 当前是否选中" @change="change_checked_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否禁用" @change="change_disabled_boolean"></boolean-data>
<input-data defaultValue="#007AFF" title="radio的颜色" type="text" @confirm="confirm_color_input"></input-data>
<input-data defaultValue="#ffffff" title="radio默认的背景颜色" type="text"
@confirm="confirm_backgroundColor_input"></input-data>
<input-data defaultValue="#d1d1d1" title="radio默认的边框颜色" type="text"
@confirm="confirm_borderColor_input"></input-data>
<input-data defaultValue="#007AFF" title="radio选中时的背景颜色，优先级大于color属性" type="text"
@confirm="confirm_activeBackgroundColor_input"></input-data>
<input-data defaultValue="" title="radio选中时的边框颜色" type="text"
@confirm="confirm_activeBorderColor_input"></input-data>
<input-data defaultValue="#ffffff" title="radio的图标颜色" type="text" @confirm="confirm_iconColor_input"></input-data>
</view>
<view>
<page-head title="默认及使用"></page-head>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 默认样式 </text>
</view>
<radio-group class="uni-flex uni-row radio-group" @change="testChange" style="flex-wrap: wrap">
<radio id="trigger-change" value="r" :checked="checked" :color="color" style="margin-right: 15px"
class="radio r">选中
</radio>
<radio value="r1" style="margin-right: 15px" class="radio r1">{{
text
}}</radio>
<radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
<radio value="r3" class="radio r3" style="margin-top: 10px">{{
wrapText
}}</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 不同颜色和尺寸的radio </text>
</view>
<radio-group class="uni-flex uni-row radio-group">
<radio value="r1" :checked="true" color="#FFCC33" style="transform: scale(0.7); margin-right: 15px"
class="radio">选中
</radio>
<radio value="r2" color="#FFCC33" style="transform: scale(0.7)" class="radio">未选中</radio>
</radio-group>
</view>
<view class="uni-padding-wrap">
<view class="uni-title uni-common-mt">
<text class="uni-title-text"> 推荐展示样式 </text>
</view>
</view>
<view class="uni-list uni-common-pl">
<radio-group @change="radioChange" class="radio-group">
<radio class="uni-list-cell uni-list-cell-pd radio recommand" v-for="(item, index) in items" :key="item.value"
:class="index < items.length - 1 ? 'uni-list-cell-line' : ''" :value="item.value"
:checked="index === current">
{{ item.name }}
</radio>
</radio-group>
</view>
</view>
</scroll-view>
</template>
<style>
.main {
max-height: 250px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.uni-list-cell {
justify-content: flex-start;
}
</style>
pages/component/scroll-view/refresh-box/refresh-box.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view slot="refresher" class="refresh-box">
<image v-if="state == 2" class="refresh-icon" src="/static/template/custom-refresher/refresh-box/run.gif" mode="widthFix"></image>
<text class="tip-text">{{text[state]}}</text>
</view>
</template>
<script>
export default {
data() {
return {
text: ['继续下拉执行刷新', '释放立即刷新', '刷新中', ""]
}
},
props: {
state: {
type: Number,
default: 0
},
methods: {
}
}
}
</script>
<style>
.refresh-box {
justify-content: center;
align-items: center;
flex-direction: row;
height: 30px;
}
.refresh-icon {
width: 20px;
height: 20px;
margin: 5px;
}
.tip-text {
color: #888;
font-size: 12px;
}
</style>
pages/component/scroll-view/scroll-view-custom-refresher-props.uvue
浏览文件 @ b66282b5
......@@ -10,7 +10,7 @@
</template>
<script>
import refreshBox from '../../template/custom-refresher/refresh-box/refresh-box.uvue';
import refreshBox from './refresh-box/refresh-box.uvue';
export default {
components: { refreshBox },
data() {
......
pages/component/scroll-view/scroll-view-refresher.test.js
浏览文件 @ b66282b5
......@@ -38,7 +38,7 @@ describe('component-native-scroll-view-refresher', () => {
expect(await page.data('onRefresherrestoreTest')).toBe('refresherrestore:Success')
});
// 仅App端支持手势下拉刷新,在不同设备上位置有差异可能导致不触发中止事件，安卓端仅测android 10
// 仅App端支持手势下拉刷新,在不同设备上位置有差异可能导致不触发中止事件，安卓端仅测android 10.0.0_x86
if(!process.env.uniTestPlatformInfo.startsWith('web')){
it('check_refresherabort', async () => {
await program.swipe({
......@@ -49,7 +49,7 @@ describe('component-native-scroll-view-refresher', () => {
await page.waitFor(1500)
console.log(process.env.uniTestPlatformInfo,'onRefresherabortTest',await page.data('onRefresherabortTest'))
// 下拉刷新被中止，在iOS不触发@refresherabort事件
if(process.env.uniTestPlatformInfo.startsWith('android 10')){
if(process.env.uniTestPlatformInfo.startsWith('android 10.0.0_x86')){
expect(await page.data('onRefresherabortTest')).toBe('refresherabort:Success')
}
});
......
pages/component/slider-100/slider-100.uvue
浏览文件 @ b66282b5
<template>
<!-- #ifdef APP -->
<scroll-view class="page">
<!-- #endif -->
<page-head :title="title"></page-head>
<view class="grid-view">
<slider ref="slider" class="slider" v-for="(_, index) in 100" :key="index" @changing="sliderChanging"
@change="sliderChange" :value="sliderValue" :block-size="20" :show-value="true" />
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script>
......
pages/component/slider/slider.test.js
浏览文件 @ b66282b5
......@@ -24,6 +24,8 @@ describe('slider', () => {
expect(await slider.attribute('backgroundColor')).toBe('#000000')
expect(await slider.attribute('activeColor')).toBe('#FFCC33')
expect(await slider.attribute('blockColor')).toBe('#8A6DE9')
expect(await slider.attribute('activeBackgroundColor')).toBe('#FFCC33')
expect(await slider.attribute('foreColor')).toBe('#8A6DE9')
const backgroundColor = '#008000'
const activeColor = '#00FF00'
......@@ -37,7 +39,9 @@ describe('slider', () => {
await page.waitFor(100)
expect(await slider.attribute('backgroundColor')).toBe(backgroundColor)
expect(await slider.attribute('activeColor')).toBe(activeColor)
expect(await slider.attribute('activeBackgroundColor')).toBe(activeColor)
expect(await slider.attribute('blockColor')).toBe(blockColor)
expect(await slider.attribute('foreColor')).toBe(blockColor)
})
it('block-size', async () => {
const slider = await page.$('#slider-custom-color-and-size')
......
pages/component/slider/slider.uvue
浏览文件 @ b66282b5
......@@ -18,6 +18,7 @@
backgroundColor_input: "#e9e9e9",
block_size_input: 28,
block_color_input: "#ffffff",
valueColor: "#888888",
};
},
methods: {
......@@ -83,6 +84,9 @@
confirm_block_color_input(value : string) {
this.block_color_input = value;
},
confirm_value_color_input(value : string) {
this.valueColor = value;
},
},
};
</script>
......@@ -91,7 +95,7 @@
<view class="main">
<slider :disabled="disabled_boolean" :min="min_input" :max="max_input" :step="step_input" :value="value_input"
:activeColor="activeColor_input" :backgroundColor="backgroundColor_input" :block-size="block_size_input"
:block-color="block_color_input" :show-value="show_value_boolean" @click="slider_click"
:block-color="block_color_input" :show-value="show_value_boolean" :valueColor="valueColor" @click="slider_click"
@touchstart="slider_touchstart" @touchmove="slider_touchmove" @touchcancel="slider_touchcancel"
@touchend="slider_touchend" @tap="slider_tap" @longpress="slider_longpress" @change="slider_change"
@changing="slider_changing" style="width: 90%"><text>uni-app-x</text></slider>
......@@ -115,6 +119,8 @@
@confirm="confirm_block_size_input"></input-data>
<input-data defaultValue="#ffffff" title="滑块颜色(block-color)" type="text"
@confirm="confirm_block_color_input"></input-data>
<input-data defaultValue="#888888" title="Value颜色(value-color)" type="text"
@confirm="confirm_value_color_input"></input-data>
</view>
<view class="uni-padding-wrap">
......@@ -146,7 +152,11 @@
<view class="uni-title">不同颜色和大小的滑块</view>
<view>
<slider id="slider-custom-color-and-size" @change="sliderChange" :value="sliderValue"
:backgroundColor="sliderBackgroundColor" :activeColor="sliderActiveColor" :blockColor="sliderBlockColor"
:backgroundColor="sliderBackgroundColor"
:activeColor="sliderActiveColor"
:activeBackgroundColor="sliderActiveColor"
:blockColor="sliderBlockColor"
:foreColor="sliderBlockColor"
:block-size="sliderBlockSize" />
</view>
<view class="uni-title">暗黑模式</view>
......
pages/component/swiper/swiper.test.js
浏览文件 @ b66282b5
......@@ -90,28 +90,23 @@ describe('test swiper', () => {
});
it('Event transitiont', async () => {
// bug：android端swiper的事件event参数detail类型错误，暂时忽略测试
if(!process.env.UNI_UTS_PLATFORM.startsWith('app-android')){
const transitionDetailInfo = await page.data('transitionDetailTest')
// bug：在iOS端，swiper首次横向滑动切换@transition事件参数e.detail.dy为1错误，暂时忽略测试
if(process.env.uniTestPlatformInfo.startsWith('web')){
expect(transitionDetailInfo.dy).toBe(0)
}
expect(transitionDetailInfo.dx).not.toBe(0)
expect(await page.data('isTransitionTest')).toBe('transition:Success')
const transitionDetailInfo = await page.data('transitionDetailTest')
// bug：在iOS端，swiper首次横向滑动切换@transition事件参数e.detail.dy为1错误，暂时忽略测试
if(process.env.uniTestPlatformInfo.startsWith('web')){
expect(transitionDetailInfo.dy).toBe(0)
}
expect(transitionDetailInfo.dx).not.toBe(0)
expect(await page.data('isTransitionTest')).toBe('transition:Success')
});
it('Event change', async () => {
if(!process.env.UNI_UTS_PLATFORM.startsWith('app-android')){
const changeDetailInfo = await page.data('changeDetailTest')
if(process.env.uniTestPlatformInfo.startsWith('web')){
expect(changeDetailInfo).toEqual(webDetailRes)
}else{
expect(changeDetailInfo).toEqual(appDetailRes)
}
expect(await page.data('isChangeTest')).toBe('change:Success')
const changeDetailInfo = await page.data('changeDetailTest')
if(process.env.uniTestPlatformInfo.startsWith('web')){
expect(changeDetailInfo).toEqual(webDetailRes)
}else{
expect(changeDetailInfo).toEqual(appDetailRes)
}
expect(await page.data('isChangeTest')).toBe('change:Success')
});
it('Event animationfinish', async () => {
......
pages/component/swiper/swiper.uvue
浏览文件 @ b66282b5
......@@ -117,12 +117,9 @@
swiperChangeSelect: false,
currentValChange: 0,
// 自动化测试
// 在android端以下事件event参数中detail类型报错，先条件编译处理
// #ifndef APP-ANDROID
changeDetailTest:null as UniSwiperChangeDetail | null,
transitionDetailTest:null as UniSwiperTransitionDetail | null,
animationfinishDetailTest:null as UniSwiperAnimationFinishDetail | null,
// #endif
changeDetailTest:null as UniSwiperChangeEventDetail | null,
transitionDetailTest:null as UniSwiperTransitionEventDetail | null,
animationfinishDetailTest:null as UniSwiperAnimationFinishEventDetail | null,
isChangeTest:'',
isTransitionTest:'',
isAnimationfinishTest:''
......@@ -130,9 +127,7 @@
},
methods: {
swiperChange: function (e : UniSwiperChangeEvent) {
// #ifndef APP-ANDROID
this.changeDetailTest = e.detail
// #endif
this.checkEventTest({
type:e.type,
target:e.target,
......@@ -146,9 +141,7 @@
}
},
swiperTransition: function (e : UniSwiperTransitionEvent) {
// #ifndef APP-ANDROID
this.transitionDetailTest = e.detail
// #endif
this.checkEventTest({
type:e.type,
target:e.target,
......@@ -160,9 +153,7 @@
}
},
swiperAnimationfinish: function (e : UniSwiperAnimationFinishEvent) {
// #ifndef APP-ANDROID
this.animationfinishDetailTest = e.detail
// #endif
this.checkEventTest({
type:e.type,
target:e.target,
......
pages/component/switch/switch.test.js
浏览文件 @ b66282b5
......@@ -6,22 +6,6 @@ describe('switch', () => {
page = await program.reLaunch(PAGE_PATH)
await page.waitFor(500)
})
// TODO
// it('click', async () => {
// const switch_element = await page.$('.switch-checked')
// const switch_element_value = await page.$('.switch-checked-value')
// expect(await switch_element_value.text()).toBe('true')
// await page.waitFor(200)
// await switch_element.tap()
// await page.waitFor(200)
// expect(await switch_element_value.text()).toBe('false')
// await switch_element.tap()
// await page.waitFor(200)
// expect(await switch_element_value.text()).toBe('true')
// })
it('checked', async () => {
const switch_element = await page.$('.switch-checked')
......@@ -53,4 +37,40 @@ describe('switch', () => {
await page.waitFor(100)
expect(await switch_element.attribute('color')).toBe(color)
})
it('dark', async () => {
const dark = await page.$('#dark')
const darkChecked = await page.$('#darkChecked')
expect(await dark.attribute('background-color')).toBe('#1f1f1f')
expect(await dark.attribute('fore-color')).toBe('#f0f0f0')
expect(await darkChecked.attribute('active-background-color')).toBe('#007aff')
expect(await darkChecked.attribute('active-fore-color')).toBe('#ffffff')
})
it('click', async () => {
let switchElement
// TODO 暂时通过获取组件内部的 class 触发模拟点击
if (process.env.uniTestPlatformInfo.startsWith('android')) {
switchElement = await page.$('.uni-switch-input')
await switchElement.tap()
await page.waitFor(200)
const {
testVerifyEvent
} = await page.data()
expect(testVerifyEvent).toBe(true)
} else {
// switchElement = await page.$('#testTap')
}
// await switchElement.tap()
// await page.waitFor(200)
// const {
// testVerifyEvent
// } = await page.data()
// expect(testVerifyEvent).toBe(true)
})
})
pages/component/switch/switch.uvue
浏览文件 @ b66282b5
......@@ -5,7 +5,11 @@
<view class="flex-row">
<switch class="switch-checked" :checked="checked" @change="switch1Change" />
<switch @change="switch2Change" />
<!-- <text class="switch-checked-value">{{clickCheckedValue}}</text> -->
</view>
<view class="uni-title">暗黑样式</view>
<view class="flex-row">
<switch id="darkChecked" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0" activeForeColor="#ffffff" :checked="checked" />
<switch id="dark" background-color="#1f1f1f" activeBackgroundColor="#007aff" foreColor="#f0f0f0" activeForeColor="#ffffff" />
</view>
<view class="uni-title">禁用样式</view>
<view class="flex-row">
......@@ -39,13 +43,17 @@
title: 'switch 开关',
checked: true,
color: '#FFCC33',
clickCheckedValue: true
clickCheckedValue: true,
testVerifyEvent: false,
}
},
methods: {
switch1Change: function (e : UniSwitchChangeEvent) {
this.clickCheckedValue = e.detail.value
console.log('switch1 发生 change 事件，携带值为', e.detail.value)
// 仅测试
this.testVerifyEvent = (e.type == 'change' && (e.target?.tagName ?? '') == "SWITCH")
},
switch2Change: function (e : UniSwitchChangeEvent) {
console.log('switch2 发生 change 事件，携带值为', e.detail.value)
......
pages/component/textarea/textarea.test.js
浏览文件 @ b66282b5
......@@ -64,7 +64,7 @@ describe('component-native-textarea', () => {
var x = inputmodeEnum[i]
console.log(x['value'], x['name'])
var selected = x['value'] - 1
if(i == inputmodeEnum.length - 1){
if (i == inputmodeEnum.length - 1) {
selected = i
}
await page.callMethod("radio_change_inputmode_enum", selected);
......@@ -74,11 +74,25 @@ describe('component-native-textarea', () => {
}
})
if (!process.env.uniTestPlatformInfo.startsWith('android')) {
// TODO: 暂时规避 android 端测试
it('both set modelValue and value', async () => {
let textarea2 = await page.$('.both-set-textarea');
expect(await textarea2.value()).toBe("123")
it("maxlength", async () => {
const input = await page.$('#textarea-instance-maxlength');
let str = "";
for (let i = 0; i < 200; i++) {
str += `${i}`
}
await page.setData({
textareaMaxLengthValue: str
})
let length = (await input.value()).length
expect(length).toBe(10)
await page.setData({
textareaMaxLengthValue: ""
})
}
})
it('both set modelValue and value', async () => {
const textarea2 = await page.$('#both-model-value');
expect(await textarea2.value()).toEqual("123")
})
});
pages/component/textarea/textarea.uvue
浏览文件 @ b66282b5
<script>
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
adjust_position_boolean: false,
show_confirm_bar_boolean: false,
fixed_boolean: false,
auto_height_boolean: false,
confirm_hold_boolean: false,
focus_boolean: true,
auto_focus_boolean: false,
default_value:"1\n2\n3\n4\n5\n6",
maxlength:-1,
inputmode_enum: [{"value":1,"name":"text"},{"value":2,"name":"decimal"},{"value":3,"name":"numeric"},{"value":4,"name":"tel"},{"value":5,"name":"search"},{"value":6,"name":"email"},{"value":7,"name":"url"},{"value":0,"name":"none"}] as ItemType[],
confirm_type_list: [{"value":0,"name":"return"},{"value":1,"name":"done"},{"value":2,"name":"send"},{"value":3,"name":"search"},{"value":4,"name":"next"},{"value":5,"name":"go"}] as ItemType[],
cursor_color: "#3393E2",
cursor: 0,
inputmode_enum_current: 0,
confirm_type_current: 0,
placeholder_value: "请输入",
defaultModel:'123'
}
},
import { ItemType } from '@/components/enum-data/enum-data'
export default {
data() {
return {
adjust_position_boolean: false,
show_confirm_bar_boolean: false,
fixed_boolean: false,
auto_height_boolean: false,
confirm_hold_boolean: false,
focus_boolean: true,
auto_focus_boolean: false,
default_value: "1\n2\n3\n4\n5\n6",
inputmode_enum: [{ "value": 1, "name": "text" }, { "value": 2, "name": "decimal" }, { "value": 3, "name": "numeric" }, { "value": 4, "name": "tel" }, { "value": 5, "name": "search" }, { "value": 6, "name": "email" }, { "value": 7, "name": "url" }, { "value": 0, "name": "none" }] as ItemType[],
confirm_type_list: [{ "value": 0, "name": "return" }, { "value": 1, "name": "done" }, { "value": 2, "name": "send" }, { "value": 3, "name": "search" }, { "value": 4, "name": "next" }, { "value": 5, "name": "go" }] as ItemType[],
cursor_color: "#3393E2",
cursor: 0,
inputmode_enum_current: 0,
confirm_type_current: 0,
placeholder_value: "请输入",
defaultModel: '123',
textareaMaxLengthValue: "",
selectionStart: -1,
selectionEnd: -1,
hold_keyboard: false,
adjust_position: false
}
},
methods: {
textarea_click() { console.log("组件被点击时触发") },
textarea_touchstart() { console.log("手指触摸动作开始") },
textarea_touchmove() { console.log("手指触摸后移动") },
textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
textarea_touchend() { console.log("手指触摸动作结束") },
textarea_tap() { console.log("手指触摸后马上离开") },
textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") },
textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") },
textarea_linechange() { console.log("输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") },
textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") },
textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") },
textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") },
change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },
change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },
change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },
change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },
change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },
change_focus_boolean(checked : boolean) { this.focus_boolean = checked },
change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },
change_cursor_color_boolean(checked : boolean) { if(checked){ this.cursor_color = "transparent"} else {this.cursor_color = "#3393E2"}},
radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked }
}
}
methods: {
textarea_click() { console.log("组件被点击时触发") },
textarea_touchstart() { console.log("手指触摸动作开始") },
textarea_touchmove() { console.log("手指触摸后移动") },
textarea_touchcancel() { console.log("手指触摸动作被打断，如来电提醒，弹窗") },
textarea_touchend() { console.log("手指触摸动作结束") },
textarea_tap() { console.log("手指触摸后马上离开") },
textarea_longpress() { console.log("如果一个组件被绑定了 longpress 事件，那么当用户长按这个组件时，该事件将会被触发。") },
textarea_confirm() { console.log("点击完成时， 触发 confirm 事件，event.detail = {value: value}") },
textarea_input() { console.log("当键盘输入时，触发 input 事件，event.detail = {value, cursor}， @input 处理函数的返回值并不会反映到 textarea 上") },
textarea_linechange() { console.log("输入框行数变化时调用，event.detail = {height: 0, height: 0, lineCount: 0}") },
textarea_blur() { console.log("输入框失去焦点时触发，event.detail = {value, cursor}") },
textarea_keyboardheightchange() { console.log("键盘高度发生变化的时候触发此事件，event.detail = {height: height, duration: duration}") },
textarea_focus() { console.log("输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度") },
change_adjust_position_boolean(checked : boolean) { this.adjust_position_boolean = checked },
change_show_confirm_bar_boolean(checked : boolean) { this.show_confirm_bar_boolean = checked },
change_fixed_boolean(checked : boolean) { this.fixed_boolean = checked },
change_auto_height_boolean(checked : boolean) { this.auto_height_boolean = checked },
change_confirm_hold_boolean(checked : boolean) { this.confirm_hold_boolean = checked },
change_focus_boolean(checked : boolean) { this.focus_boolean = checked },
change_auto_focus_boolean(checked : boolean) { this.auto_focus_boolean = checked },
change_cursor_color_boolean(checked : boolean) { if (checked) { this.cursor_color = "transparent" } else { this.cursor_color = "#3393E2" } },
radio_change_inputmode_enum(checked : number) { this.inputmode_enum_current = checked },
radio_change_confirm_type(checked : number) { this.confirm_type_current = checked },
setSelection: function (selectionStart : number, selectionEnd : number) {
uni.getElementById("textarea-instance-2")?.focus()
this.selectionStart = selectionStart;
this.selectionEnd = selectionEnd;
},
onSelectionBlurChange() {
this.selectionEnd = 0;
},
changeHoldKeyboard(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
this.hold_keyboard = checked;
},
changeAdjustPosition(event : UniSwitchChangeEvent) {
const checked = event.detail.value;
this.adjust_position = checked;
}
}
}
</script>
<template>
......@@ -56,115 +76,122 @@ export default {
<scroll-view style="flex: 1">
<!-- #endif -->
<view class="main">
<textarea
:value="default_value"
class="uni-textarea"
:auto-focus="true"
:focus="focus_boolean"
:confirm-hold="confirm_hold_boolean"
:auto-height="auto_height_boolean"
:fixed="fixed_boolean"
:show-confirm-bar="show_confirm_bar_boolean"
:adjust-position="adjust_position_boolean"
:cursor-color="cursor_color"
:cursor="cursor"
:placeholder="placeholder_value"
<textarea :value="default_value" class="uni-textarea" :auto-focus="true" :focus="focus_boolean"
:confirm-hold="confirm_hold_boolean" :auto-height="auto_height_boolean" :fixed="fixed_boolean"
:show-confirm-bar="show_confirm_bar_boolean" :adjust-position="adjust_position_boolean"
:cursor-color="cursor_color" :cursor="cursor" :placeholder="placeholder_value"
:inputmode="inputmode_enum[inputmode_enum_current].name"
:confirm-type="confirm_type_list[confirm_type_current].name"
:maxlength="maxlength"
@click="textarea_click"
@touchstart="textarea_touchstart"
@touchmove="textarea_touchmove"
@touchcancel="textarea_touchcancel"
@touchend="textarea_touchend"
@tap="textarea_tap"
@longpress="textarea_longpress"
@confirm="textarea_confirm"
@input="textarea_input"
@linechange="textarea_linechange"
@blur="textarea_blur"
@keyboardheightchange="textarea_keyboardheightchange"
@focus="textarea_focus"
style="padding: 10px; border: 1px solid #666;height: 200px"
/>
:confirm-type="confirm_type_list[confirm_type_current].name" @click="textarea_click"
@touchstart="textarea_touchstart" @touchmove="textarea_touchmove" @touchcancel="textarea_touchcancel"
@touchend="textarea_touchend" @tap="textarea_tap" @longpress="textarea_longpress" @confirm="textarea_confirm"
@input="textarea_input" @linechange="textarea_linechange" @blur="textarea_blur"
@keyboardheightchange="textarea_keyboardheightchange" @focus="textarea_focus"
style="padding: 10px; border: 1px solid #666;height: 200px" />
</view>
<view class="content">
<boolean-data
:defaultValue="false"
title="键盘弹起时，是否自动上推页面（限非 Web 平台）"
@change="change_adjust_position_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_auto_height_boolean"
></boolean-data>
<boolean-data
:defaultValue="focus_boolean"
title="获取焦点"
@change="change_focus_boolean"
></boolean-data>
<boolean-data
:defaultValue="true"
title="首次自动获取焦点"
@change="change_auto_focus_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="改变光标颜色为透明"
@change="change_cursor_color_boolean"
></boolean-data>
<enum-data
:items="confirm_type_list"
title="confirm-type，设置键盘右下角按钮。（Android仅支持return）"
@change="radio_change_confirm_type"
></enum-data>
<boolean-data
:defaultValue="false"
title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)"
@change="change_confirm_hold_boolean"
></boolean-data>
<enum-data
:items="inputmode_enum"
title="input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
@change="radio_change_inputmode_enum"
></enum-data>
<boolean-data
:defaultValue="false"
title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）"
@change="change_show_confirm_bar_boolean"
></boolean-data>
<boolean-data
:defaultValue="false"
title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）"
@change="change_fixed_boolean"
></boolean-data>
<view style="flex-direction:row;justify-content:center;">
<textarea id="textarea-height-exception" style="flex:1;border: 1 solid #666;margin: 10px" placeholder="底部textarea测试键盘遮挡"/>
<boolean-data :defaultValue="false" title="键盘弹起时，是否自动上推页面（限非 Web 平台）"
@change="change_adjust_position_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="是否自动增高，设置auto-height时，style.height不生效"
@change="change_auto_height_boolean"></boolean-data>
<boolean-data :defaultValue="focus_boolean" title="获取焦点" @change="change_focus_boolean"></boolean-data>
<boolean-data :defaultValue="true" title="首次自动获取焦点" @change="change_auto_focus_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="改变光标颜色为透明" @change="change_cursor_color_boolean"></boolean-data>
<enum-data :items="confirm_type_list" title="confirm-type，设置键盘右下角按钮。（Android仅支持return）"
@change="radio_change_confirm_type"></enum-data>
<boolean-data :defaultValue="false" title="点击软键盘右下角按钮时是否保持键盘不收起(confirm-type为return时必然不收起)"
@change="change_confirm_hold_boolean"></boolean-data>
<enum-data :items="inputmode_enum" title="input-mode，控制软键盘类型。（仅限 Web 平台符合条件的高版本浏览器或webview）。"
@change="radio_change_inputmode_enum"></enum-data>
<boolean-data :defaultValue="false" title="是否显示键盘上方带有“完成”按钮那一栏（仅限小程序平台）"
@change="change_show_confirm_bar_boolean"></boolean-data>
<boolean-data :defaultValue="false" title="如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true（仅限小程序平台）"
@change="change_fixed_boolean"></boolean-data>
<view class="title-wrap">
<view>maxlength 输入最大长度为10</view>
</view>
<view class="textarea-wrap">
<textarea id="textarea-instance-maxlength" class="textarea-instance" :value="textareaMaxLengthValue"
:maxlength="10" />
</view>
<view class="title-wrap">
<view>cursor-spacing、placeholder-class、placeholder-style例子</view>
</view>
<view class="textarea-wrap">
<textarea id="textarea-height-exception" class="textarea-instance" placeholder="底部textarea测试键盘遮挡"
placeholder-class="placeholder" placeholder-style="background-color:red" :cursor-spacing="300" />
</view>
<view class="title-wrap">
<view @click="setSelection(2, 5)">设置输入框聚焦时光标的起始位置和结束位置（点击生效）</view>
</view>
<view class="textarea-wrap">
<textarea id="textarea-instance-2" class="textarea-instance" value="Hello UniApp X Textarea TestCase"
:selection-start="selectionStart" :selection-end="selectionEnd" @blur="onSelectionBlurChange" />
</view>
<view class="title-wrap">
<view>设置hold-keyboard</view>
<switch style="margin-left: 10px;" @change="changeHoldKeyboard" :checked="hold_keyboard"></switch>
</view>
<view class="textarea-wrap">
<textarea class="textarea-instance" :hold-keyboard="hold_keyboard" />
</view>
<view class="title-wrap">
<view>同时存在 v-model 和 value</view>
</view>
<view class="textarea-wrap">
<textarea id="both-model-value" class="textarea-instance" v-model='defaultModel' value='456'></textarea>
</view>
</view>
<view>同时存在 v-model 和 value</view>
<view class="main">
<textarea class="list-item both-set-textarea" v-model='defaultModel' value='456'></textarea>
</view>
<view class="title-wrap">
<view>设置adjust-position</view>
<switch style="margin-left: 10px;" @change="changeAdjustPosition" :checked="adjust_position"></switch>
</view>
<view class="textarea-wrap">
<textarea class="textarea-instance" :adjust-position="adjust_position" />
</view>
</view>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<style>
.main {
min-height: 100px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main {
min-height: 100px;
padding: 5px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
flex-direction: row;
justify-content: center;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.textarea-wrap {
flex-direction: row;
justify-content: center;
}
.title-wrap {
flex-direction: row;
align-items: center;
margin-left: 10px;
}
.textarea-instance {
flex: 1;
border: 1 solid #666;
margin: 10px;
}
.main .list-item {
width: 100%;
height: 100px;
border: 1px solid #666;
}
.placeholder {
background-color: yellow;
}
</style>
pages/component/video/video.test.js
浏览文件 @ b66282b5
......@@ -30,17 +30,165 @@ describe('component-native-video', () => {
});
it('test local source', async () => {
await page.callMethod('downloadSource');
await page.waitFor(5000);
expect(await page.data('isError')).toBe(false);
await page.setData({
localSrc: '/static/test-video/2minute-demo.m3u8'
});
await page.waitFor(100);
expect(await page.data('isError')).toBe(false);
await page.setData({
autoTest: false
});
await page.setData({
autoTest: true,
isError: false
});
await page.callMethod('downloadSource');
await page.waitFor(5000);
expect(await page.data('isError')).toBe(false);
await page.setData({
localSrc: '/static/test-video/2minute-demo.m3u8'
});
await page.waitFor(100);
expect(await page.data('isError')).toBe(false);
await page.setData({
autoTest: false
});
});
it('test event play pause', async () => {
await page.setData({
autoTest: true
});
await page.callMethod('play');
await page.waitFor(100);
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
// expect(await page.data('eventPlay')).toEqual({
// type: 'play'
// });
}else {
expect(await page.data('eventPlay')).toEqual({
tagName: 'VIDEO',
type: 'play'
});
}
await page.callMethod('pause');
await page.waitFor(100);
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
// expect(await page.data('eventPause')).toEqual({
// type: 'pause'
// });
}else {
expect(await page.data('eventPause')).toEqual({
tagName: 'VIDEO',
type: 'pause'
});
}
await page.callMethod('play');
});
it('test event waiting progress timeupdate', async () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return
}
await page.setData({
pos: 10
});
await page.callMethod('seek');
await page.waitFor(100);
expect(await page.data('eventWaiting')).toEqual({
tagName: 'VIDEO',
type: 'waiting'
});
await page.waitFor(200);
expect(await page.data('eventProgress')).toEqual({
tagName: 'VIDEO',
type: 'progress',
isBufferedValid: true
});
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (process.env.uniTestPlatformInfo.startsWith('android') && version > 5) {
await page.waitFor(200);
expect(await page.data('eventTimeupdate')).toEqual({
tagName: 'VIDEO',
type: 'timeupdate',
currentTime: 10,
duration: 121
});
}
});
it('test event fullscreenchange controlstoggle fullscreenclick', async () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return;
}
await page.callMethod('requestFullScreen');
await page.waitFor(500);
expect(await page.data('eventFullscreenchange')).toEqual({
tagName: 'VIDEO',
type: 'fullscreenchange',
fullScreen: true,
direction: 'horizontal'
});
if (process.env.uniTestPlatformInfo.startsWith('android')) {
await page.waitFor(5000);
await program.adbCommand('input tap 10 10');
await page.waitFor(100);
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (version > 5) { // android5.1模拟器全屏时会弹出系统提示框，无法响应adb tap命令
expect(await page.data('eventControlstoggle')).toEqual({
tagName: 'VIDEO',
type: 'controlstoggle',
show: true
});
}
const res = await program.adbCommand('wm size');
const width = res.data.split(' ').at(-1).split('x')[0];
const height = res.data.split(' ').at(-1).split('x')[1];
const res2 = await program.adbCommand('wm density');
const scale = res2.data.split(' ').at(-1) / 160;
if (version > 5) {
expect(await page.data('eventFullscreenclick')).toEqual({
tagName: 'VIDEO',
type: 'fullscreenclick',
screenX: parseInt(10 / scale),
screenY: parseInt(10 / scale),
screenWidth: parseInt(height / scale),
screenHeight: parseInt(width / scale)
});
}
}
await page.callMethod('exitFullScreen');
});
it('test event ended', async () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return
}
await page.setData({
pos: 120
});
await page.callMethod('seek');
await page.waitFor(2500);
expect(await page.data('eventEnded')).toEqual({
tagName: 'VIDEO',
type: 'ended'
});
});
it('test event error', async () => {
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
return
}
const oldSrc = await page.data('src');
await page.setData({
src: 'invalid url'
});
await page.waitFor(300);
expect(await page.data('eventError')).toEqual({
tagName: 'VIDEO',
type: 'error',
errCode: 300001
});
await page.setData({
autoTest: false,
src: oldSrc
});
});
it('test format', async () => {
......
pages/component/video/video.uvue
浏览文件 @ b66282b5
......@@ -12,7 +12,6 @@
@fullscreenclick="onFullScreenClick" @controlstoggle="onControlsToggle" @fullscreenchange="onFullScreenChange">
</video>
<scroll-view class="uni-padding-wrap uni-common-mt uni-flex-item">
<input class="input" placeholder="输入视频地址播放" @confirm="onSrcInputConfirm"></input>
<view class="uni-btn-v">
<navigator url="/pages/component/video/video-format">
<button type="primary" @click="pause">视频格式示例</button>
......@@ -28,10 +27,12 @@
<button type="primary" @click="pause">暂停</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="seek(pos)">跳转到指定位置</button>
<input class="input" placeholder="输入要跳转的位置,单位s" type="number" @input="onSeekInput"></input>
<button type="primary" @click="seek">跳转到指定位置</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="requestFullScreen(requestFullScreenOptions)">进入全屏</button>
<enum-data title="选择进入全屏时的视频方向" :items="directionItemTypes" @change="onRequestFullScreenDirectionChange"></enum-data>
<button type="primary" @click="requestFullScreen">进入全屏</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="exitFullScreen">退出全屏</button>
......@@ -40,103 +41,53 @@
<button type="primary" @click="stop">停止</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="sendDanmu(danmu)">发送弹幕</button>
<input class="input" placeholder="输入弹幕" value="{ 'text': '要显示的文本', 'color': '#FF0000' }" type="string" @input="onSendDanmuInput"></input>
<button type="primary" :disabled="!enableDanmu" @click="sendDanmu">发送弹幕</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="playbackRate(rate)">设置倍速</button>
<enum-data title="选择倍速" :items="rateItemTypes" @change="onPlaybackRateChange"></enum-data>
<button type="primary" @click="playbackRate">设置倍速</button>
</view>
<view class="uni-title">
<text class="uni-title-text">属性示例</text>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setSrc(_src)">设置播放资源</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setAutoplay()">设置是否自动播放（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setLoop()">设置是否循环播放（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setMuted()">设置是否静音播放</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setInitialTime(_initialTime)">设置初始播放位置（本次播放完成后生效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDuration(_duration)">设置视频时长（未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setControls()">设置是否显示默认播放控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setDanmuBtn()">设置是否显示弹幕按钮</button>
</view>
<input class="input margin-10" type="string" placeholder="设置播放资源" @confirm="onSrcComfirm"></input>
<input class="input margin-10" type="number" placeholder="设置初始播放位置（播放前设置有效）" @confirm="onInitialTimeComfirm"></input>
<input class="input margin-10" type="number" placeholder="设置视频时长（播放前设置有效）" @confirm="onDurationComfirm"></input>
<input class="input margin-10" type="string" placeholder="设置视频封面" @confirm="onPosterComfirm"></input>
<input class="input margin-10" type="string" placeholder="设置视频标题（仅限非 Web 平台）" @confirm="onTitleComfirm"></input>
<input class="input margin-10" type="string" placeholder="设置header(json格式)" @confirm="onHeaderComfirm"></input>
<boolean-data title="设置是否展示弹幕（播放前设置有效）" :defaultValue="enableDanmu" @change="onEnableDanmuChange"></boolean-data>
<boolean-data title="设置是否自动播放（播放前设置有效）" :defaultValue="autoplay" @change="onAutoplayChange"></boolean-data>
<boolean-data title="设置是否循环播放（播放完成后生效）" :defaultValue="loop" @change="onLoopChange"></boolean-data>
<boolean-data title="设置是否静音播放" :defaultValue="muted" @change="onMutedChange"></boolean-data>
<boolean-data title="设置是否显示默认播放控件" :defaultValue="controls" @change="onControlsChange"></boolean-data>
<boolean-data title="设置是否显示弹幕按钮" :defaultValue="danmuBtn" @change="onDanmuBtnChange"></boolean-data>
<boolean-data title="设置是否显示进度条" :defaultValue="showProgress" @change="onShowProgressChange"></boolean-data>
<boolean-data title="设置是否显示全屏按钮" :defaultValue="showFullscreenBtn" @change="onShowFullscreenBtnChange"></boolean-data>
<boolean-data title="设置是否显示视频底部控制栏的播放按钮" :defaultValue="showPlayBtn" @change="onShowPlayBtnChange"></boolean-data>
<boolean-data title="设置是否显示静音按钮（仅限非 Web 平台）" :defaultValue="showMuteBtn" @change="onShowMuteBtnChange"></boolean-data>
<enum-data title="设置全屏时视频的方向" :items="directionItemTypes" @change="onDirectionChange"></enum-data>
<boolean-data title="设置是否显示视频中间的播放按钮" :defaultValue="showCenterPlayBtn" @change="onShowCenterPlayBtnChange"></boolean-data>
<boolean-data title="设置是否显示loading控件" :defaultValue="showLoading" @change="onShowLoadingChange"></boolean-data>
<boolean-data title="设置是否开启控制进度的手势" :defaultValue="enableProgressGesture" @change="onEnableProgressGestureChange"></boolean-data>
<boolean-data title="设置是否开启播放手势（仅限非 Web 平台）" :defaultValue="enablePlayGesture" @change="onEnablePlayGestureChange"></boolean-data>
<!-- #ifndef WEB -->
<view class="uni-btn-v">
<button type="primary" @click="setPageGesture()">非全屏模式下，设置是否开启亮度与音量调节手势</button>
</view>
<boolean-data title="非全屏模式下，设置是否开启亮度与音量调节手势" :defaultValue="pageGesture" @change="onPageGestureChange"></boolean-data>
<!-- #endif -->
<view class="uni-btn-v">
<button type="primary" @click="setDirection(_direction)">设置全屏时视频的方向</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowProgress()">设置是否显示进度条</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowFullscreenBtn()">设置是否显示全屏按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowPlayBtn()">设置是否显示视频底部控制栏的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowCenterPlayBtn()">设置是否显示视频中间的播放按钮</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowLoading()">设置是否显示loading控件</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnableProgressGesture()">设置是否开启控制进度的手势</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setObjectFit(_objectFit)">设置视频大小与video容器大小不一致时，视频的表现形式</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPoster(_poster)">设置视频封面</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setShowMuteBtn()">设置是否显示静音按钮（仅限非 Web 平台）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setTitle(_title)">设置视频标题（仅限非 Web 平台）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setEnablePlayGesture()">设置是否开启播放手势（仅限非 Web 平台）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGesture()">非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setVslideGestureInFullscreen()">全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setCodec(_codec)">设置解码器（仅 App 平台，未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHttpCache()">设置是否对http、https视频源开启本地缓存（仅 App 平台，未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setPlayStrategy(_playStrategy)">设置播放策略（仅 App 平台，未播放时设置有效）</button>
</view>
<view class="uni-btn-v">
<button type="primary" @click="setHeader(_header)">设置header</button>
</view>
<boolean-data title="非全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）" :defaultValue="vslideGesture" @change="onVslideGestureChange"></boolean-data>
<boolean-data title="全屏模式下，设置是否开启亮度与音量调节手势（仅限非 Web 平台）" :defaultValue="vslideGestureInFullscreen" @change="onVslideGestureInFullscreenChange"></boolean-data>
<boolean-data title="设置是否对http、https视频源开启本地缓存（仅 App 平台，播放前设置有效）" :defaultValue="httpCache" @change="onHttpCacheChange"></boolean-data>
<enum-data title="设置视频大小与video容器大小不一致时，视频的表现形式" :items="objectFitItemTypes" @change="onObjectFitChange"></enum-data>
<enum-data title="设置解码器（仅 App 平台，播放前设置有效）" :items="codecItemTypes" @change="onCodecChange"></enum-data>
<enum-data title="设置播放策略（仅 App 平台，播放前设置有效）" :items="playStrategyItemTypes" @change="onPlayStrategyChange"></enum-data>
</scroll-view>
<video v-if="autoTest" :src="localSrc" @error="onError"></video>
</view>
</template>
<script>
import { ItemType } from '@/components/enum-data/enum-data';
export default {
onReady() {
this.videoContext = uni.createVideoContext('video', this);
......@@ -146,14 +97,11 @@
videoContext: null as VideoContext | null,
// 属性
src: "https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4",
_src: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app-video-courses.mp4",
autoplay: false,
loop: false,
muted: false,
initialTime: 0,
_initialTime: 6,
duration: 0,
_duration: 60,
controls: true,
danmuList: [{
text: '要显示的文本',
......@@ -180,10 +128,8 @@
enableDanmu: true,
pageGesture: false,
direction: -1,
_direction: 0,
requestFullScreenOptions: {
direction: -90
} as RequestFullScreenOptions,
directionItemTypes: [{ "value": 0, "name": "0(正常竖向)" }, { "value": 1, "name": "90(屏幕逆时针90度)" }, { "value": 2, "name": "-90(屏幕顺时针90度)" }] as ItemType[],
directionItems: [0, 90, -90],
showProgress: true,
showFullscreenBtn: true,
showPlayBtn: true,
......@@ -191,43 +137,54 @@
showLoading: true,
enableProgressGesture: true,
objectFit: "contain",
_objectFit: "fill",
objectFitItemTypes: [{ "value": 0, "name": "contain(包含)" }, { "value": 1, "name": "fill(填充)" }, { "value": 2, "name": "cover(覆盖)" }] as ItemType[],
objectFitItems: ["contain", "fill", "cover"],
poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-android.png",
_poster: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-ios.png",
showMuteBtn: false,
title: "video-component",
_title: "video-component video-component",
enablePlayGesture: false,
vslideGesture: false,
vslideGestureInFullscreen: true,
codec: "hardware",
_codec: "software",
codecItemTypes: [{ "value": 0, "name": "hardware(硬解码)" }, { "value": 1, "name": "software(软解码)" }] as ItemType[],
codecItems: ["hardware", "software"],
httpCache: true,
playStrategy: 0,
_playStrategy: 2,
playStrategyItemTypes: [{ "value": 0, "name": "0(普通模式)" }, { "value": 1, "name": "1(平滑播放模式)" }, { "value": 1, "name": "2(M3U8优化模式)" }] as ItemType[],
playStrategyItems: [0, 1, 2],
header: {
'User-Agent': 'User-Agent test',
'header': 'header test',
'cookie': 'cookie test'
} as UTSJSONObject,
_header: {
'User-Agent': 'User-Agent test2',
'header': 'header test2',
'cookie': 'cookie test2'
} as UTSJSONObject,
// API
pos: 10,
rate: 1.5,
pos: 0,
requestFullScreenOptions: {
direction: -90
} as RequestFullScreenOptions,
danmu: {
text: '要显示的文本',
color: '#FF0000'
} as Danmu,
rate: 1,
rateItemTypes: [{ "value": 0, "name": "0.5" }, { "value": 1, "name": "0.8" }, { "value": 2, "name": "1.0" }, { "value": 3, "name": "1.25" }, { "value": 4, "name": "1.5" }] as ItemType[],
rateItems: [0.5, 0.8, 1.0, 1.25, 1.5],
// 自动化测试
autoTest: false,
isPlaying: false,
isPause: false,
isError: false,
localSrc: ''
localSrc: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
eventPlay: null as UTSJSONObject | null,
eventPause: null as UTSJSONObject | null,
eventEnded: null as UTSJSONObject | null,
eventTimeupdate: null as UTSJSONObject | null,
eventFullscreenchange: null as UTSJSONObject | null,
eventWaiting: null as UTSJSONObject | null,
eventError: null as UTSJSONObject | null,
eventProgress: null as UTSJSONObject | null,
eventFullscreenclick: null as UTSJSONObject | null,
eventControlstoggle: null as UTSJSONObject | null
}
},
onLoad() {
......@@ -243,13 +200,16 @@
(uni.getElementById("video") as UniVideoElement).pause(); //as写法测试。注意id不对时as会崩溃
// this.videoContext?.pause();
},
seek: function (pos : number) {
console.log("seek -> " + pos);
this.videoContext?.seek(pos);
seek: function () {
console.log("seek -> " + this.pos);
this.videoContext?.seek(this.pos);
},
requestFullScreen: function (options : RequestFullScreenOptions | null) {
console.log("requestFullScreen -> " + options);
this.videoContext?.requestFullScreen(options);
onSeekInput: function (event : UniInputEvent) {
this.pos = parseInt(event.detail.value);
},
requestFullScreen: function () {
console.log("requestFullScreen -> " + this.requestFullScreenOptions);
this.videoContext?.requestFullScreen(this.requestFullScreenOptions);
},
exitFullScreen: function () {
console.log("exitFullScreen");
......@@ -260,121 +220,151 @@
uni.getElementById<UniVideoElement>("video")?.stop(); //泛型写法测试
// this.videoContext?.stop();
},
sendDanmu: function (danmu : Danmu) {
console.log("sendDanmu -> " + danmu);
this.videoContext?.sendDanmu(danmu);
sendDanmu: function () {
console.log("sendDanmu -> " + this.danmu);
this.videoContext?.sendDanmu(this.danmu);
},
onSendDanmuInput: function (event : UniInputEvent) {
let json = JSON.parse<Danmu>(event.detail.value)
if (json == null) return;
this.danmu = json as Danmu;
},
playbackRate: function (rate : number) {
console.log("playbackRate -> " + rate);
this.videoContext?.playbackRate(rate);
playbackRate: function () {
console.log("playbackRate -> " + this.rate);
this.videoContext?.playbackRate(this.rate);
},
onPlaybackRateChange: function (value : number) {
this.rate = this.rateItems[value];
},
// 属性
setSrc: function (src : string) {
this.src = src;
onSrcComfirm: function (event : UniInputConfirmEvent) {
let value = event.detail.value;
if (value == '') return;
this.src = value;
console.log("src -> " + this.src)
},
setAutoplay: function () {
this.autoplay = !this.autoplay;
onAutoplayChange: function (value : boolean) {
this.autoplay = value;
console.log("autoplay -> " + this.autoplay)
},
setLoop: function () {
this.loop = !this.loop;
onLoopChange: function (value : boolean) {
this.loop = value;
console.log("loop -> " + this.loop)
},
setMuted: function () {
this.muted = !this.muted;
onMutedChange: function (value : boolean) {
this.muted = value;
console.log("muted -> " + this.muted)
},
setInitialTime: function (initialTime : number) {
this.initialTime = initialTime;
onInitialTimeComfirm: function (event : UniInputConfirmEvent) {
let value = parseInt(event.detail.value)
if (isNaN(value)) value = 0;
this.initialTime = value;
console.log("initialTime -> " + this.initialTime)
},
setDuration: function (duration : number) {
this.duration = duration;
onDurationComfirm: function (event : UniInputConfirmEvent) {
let value = parseInt(event.detail.value)
if (isNaN(value)) value = 0;
this.duration = value;
console.log("duration -> " + this.duration)
},
setControls: function () {
this.controls = !this.controls;
onControlsChange: function (value : boolean) {
this.controls = value;
console.log("controls -> " + this.controls)
},
setDanmuBtn: function () {
this.danmuBtn = !this.danmuBtn;
onEnableDanmuChange: function (value : boolean) {
this.enableDanmu = value;
console.log("enableDanmu -> " + this.enableDanmu)
},
onDanmuBtnChange: function (value : boolean) {
this.danmuBtn = value;
console.log("danmuBtn -> " + this.danmuBtn)
},
setPageGesture: function () {
this.pageGesture = !this.pageGesture;
onPageGestureChange: function (value : boolean) {
this.pageGesture = value;
console.log("pageGesture -> " + this.pageGesture)
},
setDirection: function (direction : number) {
this.direction = direction;
onRequestFullScreenDirectionChange: function (value : number) {
let direction = this.directionItems[value];
this.requestFullScreenOptions = {
direction
} as RequestFullScreenOptions;
},
onDirectionChange: function (value : number) {
this.direction = this.directionItems[value];
console.log("direction -> " + this.direction)
},
setShowProgress: function () {
this.showProgress = !this.showProgress;
onShowProgressChange: function (value : boolean) {
this.showProgress = value;
console.log("showProgress -> " + this.showProgress)
},
setShowFullscreenBtn: function () {
this.showFullscreenBtn = !this.showFullscreenBtn;
onShowFullscreenBtnChange: function (value : boolean) {
this.showFullscreenBtn = value;
console.log("showFullscreenBtn -> " + this.showFullscreenBtn)
},
setShowPlayBtn: function () {
this.showPlayBtn = !this.showPlayBtn;
onShowPlayBtnChange: function (value : boolean) {
this.showPlayBtn = value;
console.log("showPlayBtn -> " + this.showPlayBtn)
},
setShowCenterPlayBtn: function () {
this.showCenterPlayBtn = !this.showCenterPlayBtn;
onShowCenterPlayBtnChange: function (value : boolean) {
this.showCenterPlayBtn = value;
console.log("showCenterPlayBtn -> " + this.showCenterPlayBtn)
},
setShowLoading: function () {
this.showLoading = !this.showLoading;
onShowLoadingChange: function (value : boolean) {
this.showLoading = value;
console.log("showLoading -> " + this.showLoading)
},
setEnableProgressGesture: function () {
this.enableProgressGesture = !this.enableProgressGesture;
onEnableProgressGestureChange: function (value : boolean) {
this.enableProgressGesture = value;
console.log("enableProgressGesture -> " + this.enableProgressGesture)
},
setObjectFit: function (objectFit : string) {
this.objectFit = objectFit;
onObjectFitChange: function (value : number) {
this.objectFit = this.objectFitItems[value];
console.log("objectFit -> " + this.objectFit)
},
setPoster: function (poster : string) {
this.poster = poster;
onPosterComfirm: function (event : UniInputConfirmEvent) {
let value = event.detail.value;
if (value == '') return;
this.poster = value;
console.log("poster -> " + this.poster)
},
setShowMuteBtn: function () {
this.showMuteBtn = !this.showMuteBtn;
onShowMuteBtnChange: function (value : boolean) {
this.showMuteBtn = value;
console.log("showMuteBtn -> " + this.showMuteBtn)
},
setTitle: function (title : string) {
this.title = title;
onTitleComfirm: function (event : UniInputConfirmEvent) {
let value = event.detail.value;
if (value == '') return;
this.title = value;
console.log("title -> " + this.title)
},
setEnablePlayGesture: function () {
this.enablePlayGesture = !this.enablePlayGesture;
onEnablePlayGestureChange: function (value : boolean) {
this.enablePlayGesture = value;
console.log("enablePlayGesture -> " + this.enablePlayGesture)
},
setVslideGesture: function () {
this.vslideGesture = !this.vslideGesture;
onVslideGestureChange: function (value : boolean) {
this.vslideGesture = value;
console.log("vslideGesture -> " + this.vslideGesture)
},
setVslideGestureInFullscreen: function () {
this.vslideGestureInFullscreen = !this.vslideGestureInFullscreen;
onVslideGestureInFullscreenChange: function (value : boolean) {
this.vslideGestureInFullscreen = value;
console.log("vslideGestureInFullscreen -> " + this.vslideGestureInFullscreen)
},
setCodec: function (codec : string) {
this.codec = codec;
onCodecChange: function (value : number) {
this.codec = this.codecItems[value];
console.log("codec -> " + this.codec)
},
setHttpCache: function () {
this.httpCache = !this.httpCache;
onHttpCacheChange: function (value : boolean) {
this.httpCache = value;
console.log("httpCache -> " + this.httpCache)
},
setPlayStrategy: function (playStrategy : number) {
this.playStrategy = playStrategy;
onPlayStrategyChange: function (value : number) {
this.playStrategy = this.playStrategyItems[value];
console.log("playStrategy -> " + this.playStrategy)
},
setHeader: function (header : UTSJSONObject) {
this.header = header;
onHeaderComfirm: function (event : UniInputConfirmEvent) {
let json = JSON.parse(event.detail.value)
if (json == null) return;
this.header = json as UTSJSONObject;
console.log("header -> " + JSON.stringify(this.header))
},
// 事件
......@@ -382,39 +372,107 @@
console.log(res.type);
this.isPlaying = true;
this.isPause = false;
if (this.autoTest) {
this.eventPlay = {
"tagName": res.target?.tagName,
"type": res.type
};
}
},
onPause: function (res : UniEvent) {
console.log(res.type);
this.isPlaying = false;
this.isPause = true;
if (this.autoTest) {
this.eventPause = {
"tagName": res.target?.tagName,
"type": res.type
};
}
},
onEnded: function (res : UniEvent) {
console.log(res.type);
if (this.autoTest) {
this.eventEnded = {
"tagName": res.target?.tagName,
"type": res.type
};
}
},
onTimeUpdate: function (res : UniVideoTimeUpdateEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
if (this.autoTest) {
this.eventTimeupdate = {
"tagName": res.target?.tagName,
"type": res.type,
"currentTime": Math.round(res.detail.currentTime),
"duration": res.detail.duration.toInt()
};
}
},
onFullScreenChange: function (res : UniVideoFullScreenChangeEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
if (this.autoTest) {
this.eventFullscreenchange = {
"tagName": res.target?.tagName,
"type": res.type,
"fullScreen": res.detail.fullScreen,
"direction": res.detail.direction
};
}
},
onWaiting: function (res : UniEvent) {
console.log(res.type);
if (this.autoTest) {
this.eventWaiting = {
"tagName": res.target?.tagName,
"type": res.type
};
}
},
onError: function (res : UniVideoErrorEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
this.isError = true;
if (this.autoTest) {
this.eventError = {
"tagName": res.target?.tagName,
"type": res.type,
"errCode": res.detail.errCode
};
}
},
onProgress: function (res : UniVideoProgressEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
if (this.autoTest) {
this.eventProgress = {
"tagName": res.target?.tagName,
"type": res.type,
"isBufferedValid": res.detail.buffered > 0
};
}
},
onFullScreenClick: function (res : UniVideoFullScreenClickEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
if (this.autoTest) {
this.eventFullscreenclick = {
"tagName": res.target?.tagName,
"type": res.type,
"screenX": res.detail.screenX.toInt(),
"screenY": res.detail.screenY.toInt(),
"screenWidth": res.detail.screenWidth.toInt(),
"screenHeight": res.detail.screenHeight.toInt()
};
}
},
onControlsToggle: function (res : UniVideoControlsToggleEvent) {
console.log(res.type + " -> " + JSON.stringify(res.detail));
},
onSrcInputConfirm(event : UniInputConfirmEvent) {
this.src = event.detail.value;
if (this.autoTest) {
this.eventControlstoggle = {
"tagName": res.target?.tagName,
"type": res.type,
"show": res.detail.show
};
}
},
// 自动化测试
downloadSource() {
......@@ -422,7 +480,6 @@
url: 'https://qiniu-web-assets.dcloud.net.cn/video/sample/2minute-demo.mp4',
success: (res) => {
this.localSrc = res.tempFilePath;
this.autoTest = true;
},
fail: (_) => {
this.isError = true;
......@@ -442,6 +499,10 @@
.input {
height: 40px;
background: #FFF;
margin: 5px 0;
padding: 8px 13px;
}
.margin-10 {
margin: 10px;
}
</style>
pages/component/web-view-local/web-view-local.test.js
浏览文件 @ b66282b5
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('component-native-web-view', () => {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/web-view-local/web-view-local');
await page.waitFor(1000);
});
if (!process.env.uniTestPlatformInfo.startsWith('web') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/web-view-local/web-view-local');
await page.waitFor(1000);
});
it('check_load_url', async () => {
expect(await page.data('loadError')).toBe(false)
});
it('check_load_url', async () => {
expect(await page.data('loadError')).toBe(false)
});
it('screenshot', async () => {
if (process.env.uniTestPlatformInfo.startsWith('android') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
it('screenshot', async () => {
await page.waitFor(async () => {
return await page.data('loadFinish') === true;
});
......@@ -20,6 +20,73 @@ describe('component-native-web-view', () => {
fullPage: true
});
expect(image).toSaveImageSnapshot();
}
});
});
\ No newline at end of file
});
it('test event download', async () => {
await page.setData({
autoTest: true
});
await page.callMethod('testEventDownload');
await page.waitFor(500);
if (process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
// expect(await page.data('eventDownload')).toEqual({
// tagName: 'WEB-VIEW',
// type: 'download',
// url: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/pkg/hello-uniappx.apk',
// userAgent: `uni-app-x/${process.env.HX_Version.split('-')[0].split('.').slice(0, 2).join('.')}`,
// contentDisposition: '',
// mimetype: 'application/vnd.android.package-archive',
// isContentLengthValid: true
// });
return;
}
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (version > 8) {
expect(await page.data('eventDownload')).toEqual({
tagName: 'WEB-VIEW',
type: 'download',
url: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/pkg/hello-uniappx.apk',
userAgent: `uni-app-x/${process.env.HX_Version.split('-')[0].split('.').slice(0, 2).join('.')}`,
contentDisposition: `attachment; filename="hello-uniappx.apk"; filename*=utf-8''hello-uniappx.apk`,
mimetype: 'application/vnd.android.package-archive',
isContentLengthValid: true
});
} else if (version > 6) { // 低版本webview内核，部分属性无有效值
expect(await page.data('eventDownload')).toEqual({
tagName: 'WEB-VIEW',
type: 'download',
url: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/pkg/hello-uniappx.apk',
userAgent: '',
contentDisposition: '',
mimetype: '',
isContentLengthValid: false
});
}
});
it('test event message', async () => {
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (process.env.uniTestPlatformInfo.startsWith('android') && version > 6) {
await page.callMethod('testEventMessage');
await page.waitFor(200);
expect(await page.data('eventMessage')).toEqual({
tagName: 'WEB-VIEW',
type: 'message',
data: [{
action: 'message'
}]
});
}
await page.setData({
autoTest: false
});
});
} else {
// TODO: web 端暂不支持
it('web', async () => {
expect(1).toBe(1)
})
}
});
pages/component/web-view-local/web-view-local.uvue
浏览文件 @ b66282b5
<template>
<web-view ref="web-view" class="web-view" src="/hybrid/html/local.html" @message="message" @error="error"
@loading="loading" @load="load">
<web-view id="web-view" ref="web-view" class="web-view" src="/hybrid/html/local.html" @message="message" @error="error"
@loading="loading" @load="load" @download="download">
</web-view>
</template>
......@@ -9,31 +9,64 @@
data() {
return {
loadError: false,
loadFinish: false
loadFinish: false,
// 自动化测试
autoTest: false,
eventMessage: null as UTSJSONObject | null,
eventDownload: null as UTSJSONObject | null
}
},
methods: {
message(event : UniWebViewMessageEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
let contentStr = JSON.stringify(event.detail);
<!-- #ifdef APP-IOS -->
contentStr = JSON.stringify(event.detail.data[0]);
<!-- #endif -->
// #ifdef APP-IOS
contentStr = JSON.stringify(event.detail.data[0]);
// #endif
uni.showModal({
content: contentStr,
showCancel: false
});
if (this.autoTest) {
this.eventMessage = {
"tagName": event.target?.tagName,
"type": event.type,
"data": event.detail.data
};
}
},
error(event : UniWebViewErrorEvent) {
this.loadError = true
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
},
loading(event : UniWebViewLoadingEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
},
load(event : UniWebViewLoadEvent) {
this.loadFinish = true;
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
},
download(event : UniWebViewDownloadEvent) {
console.log(JSON.stringify(event.detail));
if (this.autoTest) {
const arr = event.detail.userAgent.split(' ');
this.eventDownload = {
"tagName": event.target?.tagName,
"type": event.type,
"url": event.detail.url,
"userAgent": arr[arr.length - 1],
"contentDisposition": event.detail.contentDisposition,
"mimetype": event.detail.mimetype,
"isContentLengthValid": (event.detail.contentLength / 1024 / 1024).toInt() > 1
};
}
},
// 自动化测试
testEventDownload() {
uni.createWebviewContext('web-view')?.evalJS("document.getElementsByTagName('a')[0].click()");
},
testEventMessage() {
uni.createWebviewContext('web-view')?.evalJS("document.getElementById('postMessage').click()");
}
}
}
......
pages/component/web-view/web-view.test.js
浏览文件 @ b66282b5
// uni-app自动化测试教程: uni-app自动化测试教程: https://uniapp.dcloud.net.cn/worktile/auto/hbuilderx-extension/
describe('component-native-web-view', () => {
if (process.env.uniTestPlatformInfo.startsWith('android') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
if (!process.env.uniTestPlatformInfo.startsWith('web') && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
let page;
beforeAll(async () => {
page = await program.reLaunch('/pages/component/web-view/web-view');
......@@ -11,10 +11,68 @@ describe('component-native-web-view', () => {
it('check_load_url', async () => {
expect(await page.data('loadError')).toBe(false)
});
it('test event loading load', async () => {
await page.setData({
autoTest: true
});
await page.callMethod('reload');
await page.waitFor(100);
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
expect(await page.data('eventLoading')).toEqual({
type: 'loading',
src: 'https://www.dcloud.io/'
});
}else {
expect(await page.data('eventLoading')).toEqual({
tagName: 'WEB-VIEW',
type: 'loading',
src: 'https://www.dcloud.io/'
});
}
await page.waitFor(1000);
if(process.env.uniTestPlatformInfo.toLowerCase().startsWith('ios')) {
expect(await page.data('eventLoad')).toEqual({
type: 'load',
src: 'https://www.dcloud.io/'
});
}else {
expect(await page.data('eventLoad')).toEqual({
tagName: 'WEB-VIEW',
type: 'load',
src: 'https://www.dcloud.io/'
});
}
});
it('test event error', async () => {
const infos = process.env.uniTestPlatformInfo.split(' ');
const version = parseInt(infos[infos.length - 1]);
if (process.env.uniTestPlatformInfo.startsWith('android') && version > 5) {
await page.setData({
src: 'https://www.dclou.io/uni-app-x'
});
await page.waitFor(500);
expect(await page.data('eventError')).toEqual({
tagName: 'WEB-VIEW',
type: 'error',
errCode: 100002,
errMsg: 'page error',
url: 'https://www.dclou.io',
fullUrl: 'https://www.dclou.io/uni-app-x',
src: 'https://www.dclou.io/uni-app-x'
});
}
await page.setData({
autoTest: false
});
});
} else {
// TODO: web 端暂不支持
it('web', async () => {
expect(1).toBe(1)
})
}
});
\ No newline at end of file
});
pages/component/web-view/web-view.uvue
浏览文件 @ b66282b5
......@@ -50,7 +50,12 @@
webviewContext: null as WebviewContext | null,
loadError: false,
horizontalScrollBarAccess: true,
verticalScrollBarAccess: true
verticalScrollBarAccess: true,
// 自动化测试
autoTest: false,
eventLoading: null as UTSJSONObject | null,
eventLoad: null as UTSJSONObject | null,
eventError: null as UTSJSONObject | null
}
},
onReady() {
......@@ -76,27 +81,51 @@
this.webviewContext?.evalJS("alert('hello uni-app x')");
},
message(event : UniWebViewMessageEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
},
error(event : UniWebViewErrorEvent) {
this.loadError = true
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
if (this.autoTest) {
this.eventError = {
"tagName": event.target?.tagName,
"type": event.type,
"errCode": event.detail.errCode,
"errMsg": event.detail.errMsg,
"url": event.detail.url,
"fullUrl": event.detail.fullUrl,
"src": event.detail.src
};
}
},
loading(event : UniWebViewLoadingEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
if (this.autoTest) {
this.eventLoading = {
"tagName": event.target?.tagName,
"type": event.type,
"src": event.detail.src
};
}
},
load(event : UniWebViewLoadEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
if (this.autoTest) {
this.eventLoad = {
"tagName": event.target?.tagName,
"type": event.type,
"src": event.detail.src
};
}
},
download(event : UniWebViewDownloadEvent) {
console.log(JSON.stringify(event));
console.log(JSON.stringify(event.detail));
uni.showModal({
content: "下载链接: " + event.detail.url + "\n文件大小: " + event.detail.contentLength / 1024 + "KB",
showCancel: false
});
},
confirm(event : UniInputConfirmEvent) {
console.log(JSON.stringify(event));
let url = event.detail.value;
if (!url.startsWith('https://') && !url.startsWith('http://')) {
url = 'https://' + url;
......
pages/pages.test.js
浏览文件 @ b66282b5
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
const isAndroid = platformInfo.startsWith('android')
const isIos = platformInfo.startsWith('ios')
const isApp = isAndroid || isIos
const isWeb = platformInfo.startsWith('web')
const isAppWebview = !!process.env.UNI_AUTOMATOR_APP_WEBVIEW
let pageIndex = 0
const pages = [
// tabBar //改动频繁，不再测试
// '/pages/tabBar/component',
// '/pages/tabBar/API',
// '/pages/tabBar/CSS',
// '/pages/tabBar/template',
// component
'/pages/component/button/button',
'/pages/component/checkbox/checkbox',
'/pages/component/general-attribute/general-attribute',
'/pages/component/general-event/general-event',
'/pages/component/image/image-format',
// '/pages/component/image/image-large', // 截图过大
// '/pages/component/image/image-mode', // 判断CPU类型，单独测试例截图
// '/pages/component/image/image-path', // 网络资源加载，单独测试例截图
'/pages/component/image/image',
// '/pages/component/input/input', // 自动获取焦点，单独测试例截图
'/pages/component/list-view/list-view',
'/pages/component/scroll-view/scroll-view-custom-refresher-props',
'/pages/component/view/view',
// 单独测试例截图
// 'pages/component/scroll-view/scroll-view',
// 单独测试例截图
// '/pages/component/scroll-view/scroll-view-refresher',
// 单独测试例截图
// '/pages/component/scroll-view/scroll-view-props',
'/pages/component/scroll-view/scroll-view-refresher-props',
'/pages/component/navigator/navigate',
'/pages/component/navigator/navigator',
'/pages/component/navigator/redirect',
// '/pages/component/picker-view/picker-view', //动态内容
'/pages/component/scroll-view/scroll-view-custom-refresher-props',
'/pages/component/swiper/swiper',
'/pages/component/list-view/list-view',
// 单独测试例截图
// '/pages/component/list-view/list-view-refresh',
// 单独测试例截图
// '/pages/component/list-view/list-view-multiplex',
'/pages/component/list-view/list-view-multiplex-input',
'/pages/component/list-view/list-view-multiplex-video',
'/pages/component/list-view/list-view-children-in-slot',
// 单独测试例截图
// '/pages/component/sticky-section/sticky-section',
// 单独测试例截图
// '/pages/component/sticky-header/sticky-header',
'/pages/component/text/text',
// 单独测试例截图
// '/pages/component/text/text-props',
'/pages/component/rich-text/rich-text',
'/pages/component/rich-text/rich-text-tags',
'/pages/component/rich-text/rich-text-complex',
'/pages/component/progress/progress',
'/pages/component/form/form',
'/pages/component/button/button',
'/pages/component/button/buttonstatus',
'/pages/component/radio/radio',
'/pages/component/rich-text/rich-text-complex',
'/pages/component/rich-text/rich-text-tags',
'/pages/component/rich-text/rich-text',
'/pages/component/checkbox/checkbox',
// 自动获取焦点，单独测试例截图
// '/pages/component/input/input',
'/pages/component/textarea/textarea',
'/pages/component/slider/slider',
'/pages/component/slider/slider-in-swiper',
//动态内容
// '/pages/component/picker-view/picker-view',
'/pages/component/slider-100/slider-100',
'/pages/component/swiper/swiper',
'/pages/component/switch/switch',
'/pages/component/text/text-props',
'/pages/component/text/text',
'/pages/component/textarea/textarea',
// '/pages/component/video/video',
'/pages/component/view/view',
// '/pages/component/web-view/web-view', // 动态内容
// '/pages/component/web-view-local/web-view-local', // 依赖加载完成回调，单独测试例截图
'/pages/component/image/image',
'/pages/component/image/image-format',
// 判断CPU类型，单独测试例截图
// '/pages/component/image/image-mode',
// 网络资源加载，单独测试例截图
// '/pages/component/image/image-path',
// 截图过大
// '/pages/component/image/image-large',
'/pages/component/video/video',
'/pages/component/video/video-format',
'/pages/component/navigator/navigator',
'/pages/component/navigator/navigate',
'/pages/component/navigator/redirect',
// 动态内容
// '/pages/component/web-view/web-view',
// 依赖加载完成回调，单独测试例截图
// '/pages/component/web-view-local/web-view-local',
// 动态内容
// '/pages/component/unicloud-db-contacts/list',
'/pages/component/unicloud-db-contacts/add',
// 动态内容
// '/pages/component/unicloud-db-contacts/edit',
// 动态内容
// '/pages/component/unicloud-db-contacts/detail',
'/pages/component/mixin-datacom/mixin-datacom',
// 单独测试例截图
// '/pages/component/general-attribute/general-attribute',
'/pages/component/general-event/general-event',
'/pages/component/general-event/transition-event',
'/pages/component/general-event/touch-event',
// 单独测试例截图
// '/pages/component/nested-scroll-header/nested-scroll-header',
// 单独测试例截图
// '/pages/component/nested-scroll-body/nested-scroll-body',
// 单独测试例截图
// '/pages/component/swiper/swiper-list-view',
'/pages/component/list-view/list-view-refresh',
// 单独测试例截图
// '/pages/component/list-view/issue-2199',
// API
'/pages/API/get-app/get-app',
// 单独测试例截图
// '/pages/API/get-current-pages/get-current-pages',
// 单独测试例截图
// '/pages/API/get-current-pages/set-page-style-disable-pull-down-refresh',
'/pages/API/get-launch-options-sync/get-launch-options-sync',
'/pages/API/navigator/navigator',
// 单独测试例截图
// '/pages/API/set-navigation-bar-color/set-navigation-bar-color',
// 单独测试例截图
// '/pages/API/set-navigation-bar-title/set-navigation-bar-title',
// 单独测试例截图
// '/pages/API/set-page-backgroundColorContent/set-page-backgroundColorContent',
// 单独测试例截图
// '/pages/API/navigator/new-page/new-page-1',
'/pages/API/navigator/new-page/new-page-3',
'/pages/API/navigator/new-page/onLoad',
// 下拉刷新，不进行截图
'/pages/API/pull-down-refresh/pull-down-refresh',
// 单独测试例截图
// '/pages/API/get-element-by-id/get-element-by-id',
// 单独测试例截图
// '/pages/API/get-element-by-id/get-element-by-id-multiple-root-node',
'/pages/API/nodes-info/nodes-info',
'/pages/API/storage/storage',
// 单独测试例截图
// '/pages/API/action-sheet/action-sheet',
// 单独测试例截图
// '/pages/API/modal/modal',
'/pages/API/loading/loading',
// 单独测试例截图
// '/pages/API/toast/toast',
// 单独测试例截图
// '/pages/API/load-font-face/load-font-face',
// 单独测试例截图
// '/pages/API/load-font-face/load-font-face-child',
'/pages/API/get-location/get-location',
'/pages/API/interceptor/interceptor',
'/pages/API/interceptor/page1',
'/pages/API/interceptor/page2',
'/pages/API/request/request',
'/pages/API/upload-file/upload-file',
'/pages/API/download-file/download-file',
'/pages/API/websocket-socketTask/websocket-socketTask',
// 页面销毁时会关闭socket连接，所以规避
// '/pages/API/websocket-global/websocket-global',
'/pages/API/unicloud-call-function/unicloud-call-function',
'/pages/API/unicloud-import-object/unicloud-import-object',
'/pages/API/get-system-info/get-system-info',
'/pages/API/get-device-info/get-device-info',
'/pages/API/get-app-base-info/get-app-base-info',
'/pages/API/preview-image/preview-image',
'/pages/API/choose-image/choose-image',
'/pages/API/choose-video/choose-video',
'/pages/API/get-network-type/get-network-type',
'/pages/API/page-scroll-to/page-scroll-to',
'/pages/API/event-bus/event-bus',
'/pages/API/unicloud-file-api/unicloud-file-api',
'/pages/API/unicloud-database/unicloud-database',
'/pages/API/get-battery-info/get-battery-info',
'/pages/API/get-window-info/get-window-info',
'/pages/API/rpx2px/rpx2px',
'/pages/API/request-payment-uni-pay/request-payment-uni-pay',
'/pages/API/request-payment-uni-pay/order-detail',
// 单独测试例截图
// '/pages/API/resize-observer/resize-observer',
// 单独测试例截图
// '/pages/API/map/map',
// CSS
'/pages/CSS/background/background-color',
'/pages/CSS/border/complex-border/complex-border',
'/pages/CSS/border/border-bottom',
// 单独测试例中截图
// '/pages/CSS/background/background-image',
'/pages/CSS/border/border',
'/pages/CSS/border/border-color',
'/pages/CSS/border/border-top',
'/pages/CSS/border/border-bottom',
'/pages/CSS/border/border-left',
'/pages/CSS/border/border-radius',
'/pages/CSS/border/border-right',
'/pages/CSS/border/border-radius',
'/pages/CSS/border/border-style',
'/pages/CSS/border/border-top',
'/pages/CSS/border/border-width',
'/pages/CSS/border/border',
'/pages/CSS/border/dynamic-border',
// '/pages/CSS/box-shadow/box-shadow',
'/pages/CSS/border/complex-border/complex-border',
// 单独测试例中截图
// '/pages/CSS/border/dynamic-border',
'/pages/CSS/box-shadow/box-shadow',
'/pages/CSS/display/flex',
'/pages/CSS/display/none',
'/pages/CSS/flex/flex',
'/pages/CSS/flex/align-content',
'/pages/CSS/flex/align-items',
'/pages/CSS/flex/flex-basis',
......@@ -59,83 +194,138 @@ const pages = [
'/pages/CSS/flex/flex-flow',
'/pages/CSS/flex/flex-grow',
'/pages/CSS/flex/flex-shrink',
'/pages/CSS/flex/flex',
'/pages/CSS/flex/justify-content',
'/pages/CSS/layout/height',
'/pages/CSS/layout/max-height',
'/pages/CSS/layout/max-width',
'/pages/CSS/layout/min-height',
'/pages/CSS/layout/max-height',
'/pages/CSS/layout/min-width',
'/pages/CSS/layout/max-width',
'/pages/CSS/layout/position',
'/pages/CSS/layout/visibility',
'/pages/CSS/layout/width',
'/pages/CSS/layout/z-index',
'/pages/CSS/layout/visibility',
'/pages/CSS/margin/margin',
'/pages/CSS/margin/margin-top',
'/pages/CSS/margin/margin-bottom',
'/pages/CSS/margin/margin-left',
'/pages/CSS/margin/margin-right',
'/pages/CSS/margin/margin-top',
'/pages/CSS/margin/margin',
'/pages/CSS/padding/padding',
'/pages/CSS/padding/padding-top',
'/pages/CSS/padding/padding-bottom',
'/pages/CSS/padding/padding-left',
'/pages/CSS/padding/padding-right',
'/pages/CSS/padding/padding-top',
'/pages/CSS/padding/padding',
// 单独测试例中截图
// '/pages/CSS/overflow/overflow',
'/pages/CSS/text/color',
// '/pages/CSS/text/font-family', // 网络资源加载，单独测试例截图
'/pages/CSS/text/font-size',
// 网络资源加载，单独测试例截图
// '/pages/CSS/text/font-family',
// 单独测试例截图
// '/pages/CSS/text/font-size',
'/pages/CSS/text/font-style',
'/pages/CSS/text/font-weight',
'/pages/CSS/text/letter-spacing',
'/pages/CSS/text/line-height',
'/pages/CSS/text/text-align',
'/pages/CSS/text/text-decoration-line',
'/pages/CSS/text/text-overflow',
'/pages/CSS/transform/rotate',
'/pages/CSS/transform/scale',
'/pages/CSS/transform/translate',
// '/pages/CSS/transition/transition',
'/pages/CSS/text/text-decoration-line',
// 单独测试例截图
// '/pages/CSS/transition/transition',
'/pages/CSS/pointer-events/pointer-events',
// tabBar //改动频繁，不再测试
// '/pages/tabBar/API',
// '/pages/tabBar/component',
// '/pages/tabBar/CSS',
// '/pages/tabBar/template',
// 单独测试例截图
// '/pages/CSS/transform/translate',
// 单独测试例截图
// '/pages/CSS/transform/scale',
// 单独测试例截图
// '/pages/CSS/transform/rotate',
// 单独测试例截图
// '/pages/CSS/variable/variable',
'/pages/CSS/overflow/overflow-visible-event',
// template
// '/pages/template/calendar/calendar', // 动态内容
// 网络资源加载，单独测试例截图
// '/pages/template/list-news/list-news',
// 依赖网络资源加载
// '/pages/template/list-news/detail/detail',
'/pages/template/drop-card/drop-card',
'/pages/template/swiper-list/swiper-list',
'/pages/template/swiper-list2/swiper-list2',
'/pages/template/swiper-vertical-video/swiper-vertical-video',
'/pages/template/scroll-fold-nav/scroll-fold-nav',
'/pages/template/custom-refresher/custom-refresher',
'/pages/template/custom-tab-bar/custom-tab-bar',
// '/pages/template/drop-card/drop-card',
'/pages/template/half-screen/half-screen',
// '/pages/template/list-news/list-news', // 网络资源加载，单独测试例截图
// '/pages/template/long-list/long-list', // 动态内容
'/pages/template/navbar-lite/navbar-lite',
// 动态内容
// '/pages/template/long-list/long-list',
'/pages/template/long-list2/long-list2',
'/pages/template/long-list-nested/long-list-nested',
'/pages/template/pull-zoom-image/pull-zoom-image',
'/pages/template/scroll-fold-nav/scroll-fold-nav',
// '/pages/template/scroll-sticky/scroll-sticky',
'/pages/template/swiper-list/swiper-list',
'/pages/template/swiper-list2/swiper-list2',
// '/pages/template/swiper-vertical-video/swiper-vertical-video'
// api
// '/pages/API/element-draw/element-draw',
'/pages/template/navbar-lite/navbar-lite',
'/pages/template/custom-tab-bar/custom-tab-bar',
// 动态内容
// '/pages/template/calendar/calendar',
'/pages/template/schema/schema',
'/uni_modules/uni-pay-x/pages/success/success',
// 依赖 onload 参数获取 web-view src
// '/uni_modules/uni-pay-x/pages/ad-interactive-webview/ad-interactive-webview',
'/uni_modules/uni-pay-x/pages/pay-desk/pay-desk',
'/pages/template/custom-long-list/custom-long-list',
'/pages/template/test-background-color-content/test-background-color-content',
]
const platformInfo = process.env.uniTestPlatformInfo.toLocaleLowerCase()
if ((platformInfo.startsWith('android') || platformInfo.startsWith('ios')) && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
// 规避 web 端不支持页面
if (isApp && !isAppWebview) {
pages.push(
'/pages/API/element-draw/element-draw',
'/pages/API/get-file-system-manager/get-file-system-manager',
'/pages/API/env/env',
'/pages/API/get-system-setting/get-system-setting',
'/pages/API/element-takesnapshot/element-takesnapshot',
'/pages/API/get-app-authorize-setting/get-app-authorize-setting',
'/pages/API/save-image-to-photos-album/save-image-to-photos-album',
'/pages/API/save-video-to-photos-album/save-video-to-photos-album',
'/pages/API/facial-recognition-verify/facial-recognition-verify',
// 进入页面崩溃，暂时规避
// '/pages/API/get-univerify-manager/get-univerify-manager',
'/pages/API/request-payment/request-payment',
'/pages/API/theme-change/theme-change',
'/pages/template/scroll-sticky/scroll-sticky',
)
}
// 设置position: fixed的页面不能截取完整内容
const notFullPages = [
'/pages/CSS/layout/position',
'/pages/CSS/layout/z-index'
]
if (isAndroid && !isAppWebview) {
pages.push(
'/pages/API/exit/exit',
'/pages/API/install-apk/install-apk',
'/pages/API/get-image-info/get-image-info',
'/pages/API/get-video-info/get-video-info',
'/pages/API/rewarded-video-ad/rewarded-video-ad',
'/pages/API/create-request-permission-listener/create-request-permission-listener',
'/pages/API/compress-image/compress-image',
'/pages/API/compress-video/compress-video',
'/pages/template/share/share',
)
}
if (isWeb) {
pages.push(
'/pages/component/movable-view/movable-view',
'/pages/component/label/label',
'/pages/component/picker/picker',
'/pages/component/map/map',
'/pages/component/cover-view/cover-view',
'/pages/component/editor/editor',
'/pages/API/get-image-info/get-image-info',
'/pages/API/get-video-info/get-video-info',
'/pages/API/make-phone-call/make-phone-call',
'/pages/API/inner-audio/inner-audio',
'/pages/API/inner-audio/inner-audio-format',
'/pages/API/inner-audio/inner-audio-path',
'/pages/API/clipboard/clipboard',
'/pages/API/on-compass-change/on-compass-change',
'/pages/component/canvas/canvas',
'/pages/component/canvas/ball',
'/pages/template/browser-element/browser-element',
)
}
let page;
let windowInfo
......@@ -146,13 +336,40 @@ async function getWindowInfo() {
return await windowInfoPage.callMethod('jest_getWindowInfo')
}
function getWaitForTagName(pagePath) {
if (pagePath === '/pages/component/list-view/list-view-multiplex-input') {
return 'input'
}
if (pagePath === '/pages/component/list-view/list-view-multiplex-video') {
return 'video'
}
if (
pagePath === '/pages/component/general-event/transition-event' ||
pagePath === '/pages/component/list-view/list-view-refresh' ||
pagePath === '/pages/API/env/env'
) {
return 'text'
}
if (
pagePath === '/pages/component/unicloud-db-contacts/edit' ||
pagePath === '/pages/component/unicloud-db-contacts/detail'
) {
return 'scroll-view'
}
if (pagePath === '/pages/API/get-file-system-manager/get-file-system-manager') {
return 'button'
}
return 'view'
}
describe("page screenshot test", () => {
beforeAll(async () => {
console.log("page screenshot test start");
});
beforeEach(async () => {
page = await program.reLaunch(pages[pageIndex]);
await page.waitFor(1000);
const currentPagePath = pages[pageIndex]
page = await program.reLaunch(currentPagePath);
await page.waitFor(getWaitForTagName(currentPagePath));
});
afterEach(() => {
pageIndex++;
......@@ -161,26 +378,23 @@ describe("page screenshot test", () => {
console.log("page screenshot test finish");
});
test.each(pages)("%s", async () => {
console.log("Taking screenshot: ", pageIndex, pages[pageIndex]);
const currentPagePath = pages[pageIndex]
console.log("Taking screenshot: ", pageIndex, currentPagePath);
let fullPage = true;
if (notFullPages.includes(pages[pageIndex])) {
fullPage = false;
}
const screenshotParams = {
fullPage
}
if (!fullPage && !process.env.UNI_AUTOMATOR_APP_WEBVIEW) {
if (!fullPage && !isAppWebview) {
if (!windowInfo) {
windowInfo = await getWindowInfo()
page = await program.reLaunch(pages[pageIndex]);
await page.waitFor(1000);
page = await program.reLaunch(currentPagePath);
await page.waitFor(getWaitForTagName(currentPagePath));
}
let offsetY = '0'
if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('android')) {
if (isAndroid) {
offsetY = `${windowInfo.statusBarHeight + 44}`
}
if (process.env.uniTestPlatformInfo.toLocaleLowerCase().startsWith('ios')) {
if (isIos) {
offsetY = `${windowInfo.safeAreaInsets.top + 44}`
}
screenshotParams.offsetY = offsetY
......@@ -189,7 +403,7 @@ describe("page screenshot test", () => {
const image = await program.screenshot(screenshotParams);
expect(image).toSaveImageSnapshot({
customSnapshotIdentifier() {
return `__pages_test__/${pages[pageIndex].replace(/\//g, "-").substring(1)}`
return `__pages_test__/${currentPagePath.replace(/\//g, "-").substring(1)}`
}
})
await page.waitFor(500);
......
pages/tabBar/API.uvue
浏览文件 @ b66282b5
......@@ -206,13 +206,13 @@
name: 'showToast轻提示框',
url: 'toast',
api: ["showToast"]
}
// #ifdef APP
,{
name: '主题切换',
url: 'theme-change',
api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
}
}
// #ifdef APP
,{
name: '主题切换',
url: 'theme-change',
api: ["setAppTheme","onOsThemeChange","offOsThemeChange","onAppThemeChange","offAppThemeChange"]
}
// #endif
] as Page[],
},
......@@ -293,6 +293,14 @@
name: "打电话",
url: "make-phone-call",
},
{
name: "剪贴板",
url: "clipboard",
},
{
name: "监听罗盘数据",
url: "on-compass-change",
},
// #endif
/*
{
......@@ -307,10 +315,6 @@
name: "扫码",
url: "scan-code",
},
{
name: "剪贴板",
url: "clipboard",
},
{
name: "屏幕亮度",
url: "brightness",
......@@ -331,10 +335,6 @@
name: "监听加速度传感器",
url: "on-accelerometer-change",
},
{
name: "监听罗盘数据",
url: "on-compass-change",
},
{
name: "监听距离传感器",
url: "/platforms/app-plus/proximity/proximity",
......@@ -363,12 +363,12 @@
name: "保存图片到相册",
url: 'save-image-to-photos-album'
},
// #endif
// #ifdef APP-ANDROID || WEB
{
name: "获取图片信息",
url: 'get-image-info'
},
// #endif
// #ifndef APP-IOS
{
name: "获取图片信息",
url: 'get-image-info'
},
// #endif
// #ifdef APP-ANDROID
{
......@@ -386,12 +386,13 @@
url: 'save-video-to-photos-album'
},
// #endif
// #ifdef APP-ANDROID || WEB
{
name: "获取视频信息",
url: 'get-video-info'
},
// #endif
// #ifndef APP-IOS
{
name: "获取视频信息",
url: 'get-video-info'
},
// #endif
// #ifdef APP-ANDROID
{
name: "压缩视频",
......@@ -430,11 +431,6 @@
},
// #ifdef WEB
{
name: "地图控制",
url: "map",
},
// #endif
/* {
name: "使用地图查看位置",
url: "open-location",
},
......@@ -442,6 +438,8 @@
name: "使用地图选择位置",
url: "choose-location",
},
// #endif
/*
{
name: "地图搜索",
url: "map-search",
......@@ -507,25 +505,7 @@
url: 'facial-recognition-verify',
}
] as Page[],
},
// #endif
{
id: "payment",
name: "支付",
pages: [
// #ifndef WEB
{
name: "简易支付示例",
url: "request-payment",
},
// #endif
{
name: "uni-pay支付示例",
url: "request-payment-uni-pay",
}
] as Page[],
},
// #ifdef APP-ANDROID
{
id: 'ad',
name: '广告',
......@@ -543,6 +523,24 @@
}, */
] as Page[],
},
// #endif
{
id: "payment",
name: "支付",
pages: [
// #ifndef WEB
{
name: "简易支付示例",
url: "request-payment",
},
// #endif
{
name: "uni-pay支付示例",
url: "request-payment-uni-pay",
}
] as Page[],
},
// #ifdef APP-ANDROID
{
id: 'permission-listener',
name: '权限申请监听',
......@@ -634,4 +632,4 @@
display: none;
background-color: rgba(16, 16, 16, 0.5);
}
</style>
</style>
pages/tabBar/component.uvue
浏览文件 @ b66282b5
......@@ -193,15 +193,22 @@
}
] as Page[]
},
// {
// id: 'canvas',
// name: '画布',
// pages: [
// {
// name: 'canvas'
// }
// ] as Page[]
// },
// #endif
// #ifdef WEB
{
id: 'canvas',
name: '画布',
pages: [
{
name: 'canvas',
url: '/pages/component/canvas/canvas',
},
{
name: 'ball',
url: '/pages/component/canvas/ball',
}
] as Page[]
},
// #endif
{
id: 'web-view',
......
pages/tabBar/template.uvue
浏览文件 @ b66282b5
......@@ -203,9 +203,9 @@
// #endif
// #ifdef WEB
{
id: 'browser-canvas',
url: 'browser-canvas',
name: '如何使用浏览器 canvas',
id: 'browser-element',
url: 'browser-element',
name: '如何使用浏览器 element',
open: false,
pages: [] as Page[],
},
......
pages/template/browser-element/browser-element.uvue 0 → 100644
浏览文件 @ b66282b5
<template>
<view class="page">
<page-head :title="title"></page-head>
<view class="page-body">
<text class="title">使用浏览器内置的 a 标签</text>
<view>
<a href="https://doc.dcloud.net.cn/uni-app-x/" target="uni-app-x">uni-app x，是下一代 uni-app，是一个跨平台应用开发引擎</a>
</view>
<text class="title">使用浏览器内置的 button 标签(浏览器内置标签和 uni-app 重名的情况)</text>
<view ref="html-element-area"></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '浏览器 element'
}
},
onReady() {
const element = this.$refs['html-element-area'] as HTMLElement;
const buttonElement = document.createElement('button') as HTMLButtonElement;
buttonElement.innerText = 'browser button';
element.appendChild(buttonElement);
}
}
</script>
<style>
.page {
padding: 15px;
}
.title {
margin-top: 15px;
}
</style>
pages/template/custom-refresher/custom-refresher.uvue
浏览文件 @ b66282b5
<template>
<scroll-view class="scroll-view"
:refresher-enabled="true" :refresher-triggered="refresherTriggered" refresher-default-style="none"
@refresherpulling="onRefresherpulling"
@refresherrefresh="onRefresherrefresh"
@refresherrestore="onRefreshrestore"
:refresher-threshold="refresherThreshold"
refresher-max-drag-distance="200px"
>
<view v-for="i in 20" class="content-item">
<text class="text">item-{{i}}</text>
</view>
<refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
</scroll-view>
</template>
<template>
<list-view class="list-view" :refresher-enabled="true" :refresher-triggered="refresherTriggered"
refresher-default-style="none" @refresherpulling="onRefresherpulling" @refresherrefresh="onRefresherrefresh"
@refresherrestore="onRefreshrestore" :refresher-threshold="refresherThreshold" refresher-max-drag-distance="200px">
<script>
import refreshBox from './refresh-box/refresh-box.uvue';
export default {
components:{refreshBox},
data() {
return {
refresherTriggered:false,
refresherThreshold:40,
pullingDistance:0,
resetting: false
}
},
computed:{
state():number{
if (this.resetting) {
return 3;
}
if(this.refresherTriggered){
return 2
}
if(this.pullingDistance > this.refresherThreshold){
return 1
}else{
return 0
}
}
},
methods: {
onRefresherpulling(e:RefresherEvent){
// console.log('onRefresherpulling',e.detail.dy)
this.pullingDistance = e.detail.dy
},
onRefresherrefresh(){
this.refresherTriggered = true
setTimeout(()=>{
this.refresherTriggered = false
this.resetting = true
},1500)
},
onRefreshrestore() {
this.pullingDistance = 0
this.resetting = false;
<sticky-header>
<view class="header">
<text>sticky header</text>
</view>
</sticky-header>
<list-item v-for="i in 20" class="content-item">
<text class="text">item-{{i}}</text>
</list-item>
<refresh-box slot="refresher" :state="state" :pullingDistance="pullingDistance"></refresh-box>
</list-view>
</template>
<script>
import refreshBox from './refresh-box/refresh-box.uvue';
export default {
components: { refreshBox },
data() {
return {
refresherTriggered: false,
refresherThreshold: 40,
pullingDistance: 0,
resetting: false
}
},
computed: {
state() : number {
if (this.resetting) {
return 3;
}
if (this.refresherTriggered) {
return 2
}
if (this.pullingDistance > this.refresherThreshold) {
return 1
} else {
return 0
}
}
},
methods: {
onRefresherpulling(e : RefresherEvent) {
// console.log('onRefresherpulling',e.detail.dy)
this.pullingDistance = e.detail.dy
},
onRefresherrefresh() {
this.refresherTriggered = true
setTimeout(() => {
this.refresherTriggered = false
this.resetting = true
}, 1500)
},
onRefreshrestore() {
this.pullingDistance = 0
this.resetting = false;
}
}
}
</script>
<style>
.scroll-view {
flex: 1;
padding: 5px 15px;
background-color: #f5f5f5;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
}
.list-view {
flex: 1;
background-color: #f5f5f5;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.header {
justify-content: center;
height: 50px;
background-color: #f5f5f5;
padding: 15px;
}
.content-item {
padding: 15px;
margin: 5px 0;
background-color: #fff;
border-radius: 5px;
}
.text {
font-size: 14px;
color: #666;
line-height: 20px;
}
</style>
pages/template/custom-refresher/refresh-box/refresh-box.uvue
浏览文件 @ b66282b5
<template>
<view>
<view slot="refresher" class="refresh-box">
<list-item slot="refresher" class="refresh-box">
<image v-if="state == 2" class="refresh-icon" src="/static/template/custom-refresher/refresh-box/run.gif" mode="widthFix"></image>
<text class="tip-text">{{text[state]}}</text>
</view>
</view>
</list-item>
</template>
<script>
......@@ -44,4 +44,4 @@
color: #888;
font-size: 12px;
}
</style>
\ No newline at end of file
</style>
pages/template/custom-tab-bar/custom-tab-bar.uvue
浏览文件 @ b66282b5
......@@ -86,6 +86,7 @@
// console.log("11");
this.displayArrow = false;
(this.$refs["tab1"]! as ComponentPublicInstance).$callMethod('scrollTop', 0)
this.lastTab1Top = 0;//Todo: 临时解决android平台scroll-view在某些情况未触发onscroll事件的bug
}
else if (index !=0){ //不在首页时，把箭头变成图标
// console.log("22");
......
pages/template/long-list/long-list.uvue
浏览文件 @ b66282b5
......@@ -61,22 +61,22 @@
type: 'UpdatedDate',
name: '最新上架',
preload: true
} as SwiperViewItem,
},
{
type: 'FreeHot',
name: '免费热榜',
preload: false
} as SwiperViewItem,
},
{
type: 'PaymentHot',
name: '付费热榜',
preload: false
} as SwiperViewItem,
},
{
type: 'HotList',
name: '热门总榜',
preload: false
} as SwiperViewItem
}
] as SwiperViewItem[],
swiperIndex: 0,
pageScrollView: null as null | UniElement,
......
testSequencer.js 0 → 100644
浏览文件 @ b66282b5
const Sequencer = require("@jest/test-sequencer").default
const sortTestFilePaths = [
"pages/API/pull-down-refresh/pull-down-refresh.test.js",
"pages/component/general-event/general-event.test.js",
]
class CustomSequencer extends Sequencer {
sort(tests) {
// 测试例排序
const sortedTests = sortTestFilePaths
.map((filePath) => {
return tests.find((test) => test.path.endsWith(filePath))
})
.filter(Boolean)
return [...new Set([...sortedTests, ...tests])]
}
}
module.exports = CustomSequencer
todo.md
浏览文件 @ b66282b5
二期：
- 翻书效果
- 毛玻璃效果
- 自定义窗体动画：叠窗式、上浮卡片
- 全局置顶视图，global-cover-view。音乐播放app的悬浮播放bar；弹窗
欢迎到需求墙投票：[https://vote.dcloud.net.cn/#/?name=uni-app%20x](https://vote.dcloud.net.cn/#/?name=uni-app%20x)
uni_modules/uni-getbatteryinfo/utssdk/app-android/index.uts
浏览文件 @ b66282b5
import Context from "android.content.Context";
import BatteryManager from "android.os.BatteryManager";
import { GetBatteryInfo, GetBatteryInfoOptions, GetBatteryInfoSuccess, GetBatteryInfoResult,GetBatteryInfoSync } from '../interface.uts'
import IntentFilter from 'android.content.IntentFilter';
import Intent from 'android.content.Intent';
import { GetBatteryInfo, GetBatteryInfoOptions, GetBatteryInfoSuccess, GetBatteryInfoResult, GetBatteryInfoSync } from '../interface.uts'
import IntentFilter from 'android.content.IntentFilter';
import Intent from 'android.content.Intent';
import { GetBatteryInfoFailImpl } from '../unierror';
/**
* 异步获取电量
*/
export const getBatteryInfo : GetBatteryInfo = function (options : GetBatteryInfoOptions) {
export const getBatteryInfo : GetBatteryInfo = function (options : GetBatteryInfoOptions) {
const context = UTSAndroid.getAppContext();
if (context != null) {
const manager = context.getSystemService(
Context.BATTERY_SERVICE
) as BatteryManager;
const level = manager.getIntProperty(
BatteryManager.BATTERY_PROPERTY_CAPACITY
);
let ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
let batteryStatus = context.registerReceiver(null, ifilter);
let status = batteryStatus?.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
let isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING || status == BatteryManager.BATTERY_STATUS_FULL;
const context = UTSAndroid.getAppContext();
if (context != null) {
const manager = context.getSystemService(
Context.BATTERY_SERVICE
) as BatteryManager;
const level = manager.getIntProperty(
BatteryManager.BATTERY_PROPERTY_CAPACITY
);
let ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
let batteryStatus = context.registerReceiver(null, ifilter);
let status = batteryStatus?.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
let isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING || status == BatteryManager.BATTERY_STATUS_FULL;
const res : GetBatteryInfoSuccess = {
errMsg: 'getBatteryInfo:ok',
level,
isCharging: isCharging
}
options.success?.(res)
options.complete?.(res)
} else {
const res = new UniError("uni-getBatteryInfo", 1001, "getBatteryInfo:fail getAppContext is null")
options.fail?.(res)
options.complete?.(res)
const res : GetBatteryInfoSuccess = {
errMsg: 'getBatteryInfo:ok',
level,
isCharging: isCharging
}
options.success?.(res)
options.complete?.(res)
} else {
let res = new GetBatteryInfoFailImpl(1001);
options.fail?.(res)
options.complete?.(res)
}
}
/**
* 同步获取电量示例
* 同步获取电量
*/
export const getBatteryInfoSync : GetBatteryInfoSync = function (): GetBatteryInfoResult {
const context = UTSAndroid.getAppContext();
if (context != null) {
const manager = context.getSystemService(
Context.BATTERY_SERVICE
) as BatteryManager;
const level = manager.getIntProperty(
BatteryManager.BATTERY_PROPERTY_CAPACITY
);
let ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
let batteryStatus = context.registerReceiver(null, ifilter);
let status = batteryStatus?.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
let isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING || status == BatteryManager.BATTERY_STATUS_FULL;
const res : GetBatteryInfoResult = {
level: level,
isCharging: isCharging
};
return res;
}
else {
/**
* 无有效上下文
*/
const res : GetBatteryInfoResult = {
level: -1,
isCharging: false
};
return res;
}
export const getBatteryInfoSync : GetBatteryInfoSync = function () : GetBatteryInfoResult {
const context = UTSAndroid.getAppContext();
if (context != null) {
const manager = context.getSystemService(
Context.BATTERY_SERVICE
) as BatteryManager;
const level = manager.getIntProperty(
BatteryManager.BATTERY_PROPERTY_CAPACITY
);
let ifilter = new IntentFilter(Intent.ACTION_BATTERY_CHANGED);
let batteryStatus = context.registerReceiver(null, ifilter);
let status = batteryStatus?.getIntExtra(BatteryManager.EXTRA_STATUS, -1);
let isCharging = status == BatteryManager.BATTERY_STATUS_CHARGING || status == BatteryManager.BATTERY_STATUS_FULL;
const res : GetBatteryInfoResult = {
level: level,
isCharging: isCharging
};
return res;
}
else {
/**
* 无有效上下文
*/
const res : GetBatteryInfoResult = {
level: -1,
isCharging: false
};
return res;
}
}
uni_modules/uni-getbatteryinfo/utssdk/app-ios/index.uts
浏览文件 @ b66282b5
// 引用 iOS 原生平台 api
import { UIDevice } from "UIKit";
import { Int } from 'Swift';
import { GetBatteryInfo, GetBatteryInfoSuccess, GetBatteryInfoResult, GetBatteryInfoSync } from '../interface.uts';
/**
* 导出 获取电量方法
*/
export const getBatteryInfo : GetBatteryInfo = function (options) {
// 开启电量检测
UIDevice.current.isBatteryMonitoringEnabled = true
// 返回数据
const res : GetBatteryInfoSuccess = {
errMsg: "getBatteryInfo:ok",
level: Math.abs(Number(UIDevice.current.batteryLevel * 100)),
isCharging: UIDevice.current.batteryState == UIDevice.BatteryState.charging,
};
options.success?.(res);
options.complete?.(res);
}
export const getBatteryInfoSync : GetBatteryInfoSync = function (): GetBatteryInfoResult {
// 开启电量检测
UIDevice.current.isBatteryMonitoringEnabled = true
// 返回数据
const res : GetBatteryInfoResult = {
level: Math.abs(Number(UIDevice.current.batteryLevel * 100)),
isCharging: UIDevice.current.batteryState == UIDevice.BatteryState.charging,
};
return res;
// 引用 iOS 原生平台 api
import { UIDevice } from "UIKit";
import { GetBatteryInfo, GetBatteryInfoSuccess, GetBatteryInfoResult, GetBatteryInfoSync } from '../interface.uts';
/**
* 异步获取电量
*/
export const getBatteryInfo : GetBatteryInfo = function (options) {
// 开启电量检测
UIDevice.current.isBatteryMonitoringEnabled = true
// 返回数据
const res : GetBatteryInfoSuccess = {
errMsg: "getBatteryInfo:ok",
level: Math.abs(Number(UIDevice.current.batteryLevel * 100)),
isCharging: UIDevice.current.batteryState == UIDevice.BatteryState.charging,
};
options.success?.(res);
options.complete?.(res);
}
/**
* 同步获取电量
*/
export const getBatteryInfoSync : GetBatteryInfoSync = function () : GetBatteryInfoResult {
// 开启电量检测
UIDevice.current.isBatteryMonitoringEnabled = true
// 返回数据
const res : GetBatteryInfoResult = {
level: Math.abs(Number(UIDevice.current.batteryLevel * 100)),
isCharging: UIDevice.current.batteryState == UIDevice.BatteryState.charging,
};
return res;
}
uni_modules/uni-getbatteryinfo/utssdk/interface.uts
浏览文件 @ b66282b5
export type GetBatteryInfoSuccess = {
errMsg : string,
/**
* 设备电量，范围1 - 100
*/
level : number,
/**
* 是否正在充电中
*/
isCharging : boolean
}
// export type GetBatteryInfoFail = {
// /**
// * 错误码
// */
// errCode : number,
// /**
// * 调用API的名称
// */
// errSubject : string,
// /**
// * 错误的详细信息
// */
// errMsg : string,
// /**
// * 错误来源
// */
// cause : any | null
// }
export type GetBatteryInfoOptions = {
/**
* 接口调用结束的回调函数（调用成功、失败都会执行）
*/
success ?: (res : GetBatteryInfoSuccess) => void
/**
* 接口调用失败的回调函数
*/
fail ?: (res : UniError) => void
/**
* 接口调用成功的回调
*/
complete ?: (res : any) => void
export type GetBatteryInfoSuccess = {
errMsg : string,
/**
* 设备电量，范围1 - 100
*/
level : number,
/**
* 是否正在充电中
*/
isCharging : boolean
}
export type GetBatteryInfoOptions = {
/**
* 接口调用结束的回调函数（调用成功、失败都会执行）
*/
success ?: (res : GetBatteryInfoSuccess) => void
/**
* 接口调用失败的回调函数
*/
fail ?: (res : UniError) => void
/**
* 接口调用成功的回调
*/
complete ?: (res : any) => void
}
export type GetBatteryInfoResult = {
/**
* 设备电量，范围1 - 100
*/
level : number,
/**
* 是否正在充电中
*/
isCharging : boolean
}
export type GetBatteryInfoResult = {
/**
* 设备电量，范围1 - 100
*/
level : number,
/**
* 是否正在充电中
*/
isCharging : boolean
}
/**
* 获取电量信息
* @param {GetBatteryInfoOptions} options
*
*
* @tutorial https://uniapp.dcloud.net.cn/api/system/batteryInfo.html
* @platforms APP-IOS = ^9.0,APP-ANDROID = ^22
* @since 3.6.11
*
* @assert () => success({errCode: 0, errSubject: "uni-getBatteryInfo", errMsg: "getBatteryInfo:ok", level: 60, isCharging: false })
* @assert () => fail({errCode: 1001, errSubject: "uni-getBatteryInfo", errMsg: "getBatteryInfo:fail getAppContext is null" })
*/
/**
* 错误码
* - 1001 getAppContext is null
*/
export type GetBatteryInfoErrorCode = 1001 ;
/**
* GetBatteryInfo 的错误回调参数
*/
export interface GetBatteryInfoFail extends IUniError {
errCode : GetBatteryInfoErrorCode
};
/**
* 获取电量信息
* @param {GetBatteryInfoOptions} options
*
*
* @tutorial https://uniapp.dcloud.net.cn/api/system/batteryInfo.html
* @platforms APP-IOS = ^9.0,APP-ANDROID = ^22
* @since 3.6.11
*
* @assert () => success({errCode: 0, errSubject: "uni-getBatteryInfo", errMsg: "getBatteryInfo:ok", level: 60, isCharging: false })
* @assert () => fail({errCode: 1001, errSubject: "uni-getBatteryInfo", errMsg: "getBatteryInfo:fail getAppContext is null" })
*/
export type GetBatteryInfo = (options : GetBatteryInfoOptions) => void
export type GetBatteryInfoSync = () => GetBatteryInfoResult
interface Uni {
/**
* 获取电池电量信息
* @description 获取电池电量信息
* @param {GetBatteryInfoOptions} options
* @example
* ```typescript
* uni.getBatteryInfo({
* success(res) {
* console.log(res);
* }
* })
* ```
* @remark
* - 该接口需要同步调用
* @uniPlatform {
* "app": {
* "android": {
* "osVer": "4.4.4",
* "uniVer": "3.6.11",
* "unixVer": "3.9.0"
* },
* "ios": {
* "osVer": "9.0",
* "uniVer": "3.6.11",
* "unixVer": "3.9.0"
* }
* }
* }
* @uniVueVersion 2,3 //支持的vue版本
*
*/
export type GetBatteryInfoSync = () => GetBatteryInfoResult
interface Uni {
/**
* 获取电池电量信息
* @description 获取电池电量信息
* @param {GetBatteryInfoOptions} options
* @example
* ```typescript
* uni.getBatteryInfo({
* success(res) {
* console.log(res);
* }
* })
* ```
* @remark
* - 该接口需要同步调用
* @uniPlatform {
* "app": {
* "android": {
* "osVer": "4.4.4",
* "uniVer": "3.6.11",
* "unixVer": "3.9.0"
* },
* "ios": {
* "osVer": "12.0",
* "uniVer": "3.6.11",
* "unixVer": "4.11"
* }
* },
* "web": {
* "uniVer": "3.6.11",
* "unixVer": "4.0"
* }
* }
* @uniVueVersion 2,3 //支持的vue版本
*
*/
getBatteryInfo (options : GetBatteryInfoOptions) : void,
/**
* 同步获取电池电量信息
......@@ -125,15 +120,19 @@ interface Uni {
* "unixVer": "3.9.0"
* },
* "ios": {
* "osVer": "9.0",
* "osVer": "12.0",
* "uniVer": "3.6.11",
* "unixVer": "3.9.0"
* "unixVer": "4.11"
* }
* },
* "web": {
* "uniVer": "3.6.11",
* "unixVer": "4.0"
* }
* }
* @uniVueVersion 2,3 //支持的vue版本
*
*/
getBatteryInfoSync():GetBatteryInfoResult
getBatteryInfoSync():GetBatteryInfoResult
}
uni_modules/uni-getbatteryinfo/utssdk/unierror.uts 0 → 100644
浏览文件 @ b66282b5
import { GetBatteryInfoErrorCode, GetBatteryInfoFail } from "./interface.uts"
/**
* 错误主题
*/
export const UniErrorSubject = 'uni-getBatteryInfo';
/**
* 错误信息
* @UniError
*/
export const UniErrors : Map<GetBatteryInfoErrorCode, string> = new Map([
/**
* 错误码及对应的错误信息
*/
[1001, 'getBatteryInfo:fail getAppContext is null'],
]);
/**
* 错误对象实现
*/
export class GetBatteryInfoFailImpl extends UniError implements GetBatteryInfoFail {
/**
* 错误对象构造函数
*/
constructor(errCode : GetBatteryInfoErrorCode) {
super();
this.errSubject = UniErrorSubject;
this.errCode = errCode;
this.errMsg = UniErrors[errCode] ?? "";
}
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或