初始化（包含登录模块）
This commit is contained in:
494
pages/tabBar/API/API.nvue
Normal file
494
pages/tabBar/API/API.nvue
Normal file
@@ -0,0 +1,494 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<template v-if="showSetTabBarPage">
|
||||
<set-tab-bar @unmount="leaveSetTabBarPage"></set-tab-bar>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view v-if="!hasLeftWin" class="uni-header-logo">
|
||||
<image class="uni-header-image" src="/static/apiIndex.png"></image>
|
||||
</view>
|
||||
<view v-if="!hasLeftWin" class="uni-hello-text">
|
||||
<text class="hello-text">以下将演示uni-app接口能力，详细文档见：</text>
|
||||
<u-link class="hello-link" :href="'https://uniapp.dcloud.io/api/'" :text="'https://uniapp.dcloud.io/api/'"
|
||||
:inWhiteList="true"></u-link>
|
||||
</view>
|
||||
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
|
||||
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item.id)">
|
||||
<text class="uni-panel-text">{{item.name}}</text>
|
||||
<text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '' : ''}}</text>
|
||||
</view>
|
||||
<view class="uni-panel-c" v-if="item.open">
|
||||
<view :class="{'left-win-active': leftWinActive === item2.url && hasLeftWin, 'pc-hide': item2.name === '设置TabBar' && hasLeftWin}" class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" :url="item.url" @click="goDetailPage(item.id, item2.url)">
|
||||
<text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
|
||||
<text class="uni-navigate-icon uni-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import setTabBar from '@/components/api-set-tabbar.nvue';
|
||||
export default {
|
||||
components: {
|
||||
setTabBar
|
||||
},
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
// 暂时这么写，后面看怎么优化。
|
||||
let mediaPages = [{
|
||||
name: '图片',
|
||||
url: 'image'
|
||||
},
|
||||
// #ifndef MP-LARK
|
||||
{
|
||||
name: '音频',
|
||||
url: 'inner-audio'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-BAIDU || MP-QQ|| MP-JD
|
||||
{
|
||||
name: '录音',
|
||||
url: 'voice'
|
||||
},
|
||||
{
|
||||
name: '背景音频',
|
||||
url: 'background-audio'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY
|
||||
{
|
||||
name: '视频',
|
||||
url: 'video'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
{
|
||||
name: '文件',
|
||||
url: 'file'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5 || MP-ALIPAY
|
||||
{
|
||||
name: '保存媒体到本地',
|
||||
url: 'save-media'
|
||||
}
|
||||
// #endif
|
||||
];
|
||||
|
||||
const list = [{
|
||||
id: 'page',
|
||||
name: '界面',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '设置导航条',
|
||||
url: 'set-navigation-bar-title'
|
||||
},
|
||||
//#ifdef APP-PLUS
|
||||
{
|
||||
name: '原生子窗体',
|
||||
url: 'subnvue'
|
||||
},
|
||||
//#endif
|
||||
{
|
||||
name: '页面跳转',
|
||||
url: 'navigator'
|
||||
},
|
||||
//#ifndef MP-TOUTIAO
|
||||
{
|
||||
name: '设置TabBar',
|
||||
url: 'set-tabbar'
|
||||
},
|
||||
//#endif
|
||||
{
|
||||
name: '下拉刷新',
|
||||
url: 'pull-down-refresh'
|
||||
},
|
||||
{
|
||||
name: '创建动画',
|
||||
url: 'animation'
|
||||
},
|
||||
// #ifndef QUICKAPP-WEBVIEW-UNION
|
||||
{
|
||||
name: '创建绘画',
|
||||
url: 'canvas'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef MP-LARK
|
||||
{
|
||||
name: '节点信息',
|
||||
url: 'get-node-info'
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: '节点布局交互状态',
|
||||
url: 'intersection-observer'
|
||||
},
|
||||
{
|
||||
name: '显示操作菜单',
|
||||
url: 'action-sheet'
|
||||
},
|
||||
{
|
||||
name: '显示模态弹窗',
|
||||
url: 'modal'
|
||||
},
|
||||
{
|
||||
name: '显示加载提示框',
|
||||
url: 'show-loading'
|
||||
},
|
||||
{
|
||||
name: '显示消息提示框',
|
||||
url: 'toast'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'device',
|
||||
name: '设备',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '获取设备网络状态',
|
||||
url: 'get-network-type'
|
||||
},
|
||||
{
|
||||
name: '获取设备系统信息',
|
||||
url: 'get-system-info'
|
||||
},
|
||||
{
|
||||
name: '打电话',
|
||||
url: 'make-phone-call'
|
||||
},
|
||||
//#ifndef H5
|
||||
{
|
||||
name: '震动',
|
||||
url: 'vibrate'
|
||||
},
|
||||
{
|
||||
name: '添加手机联系人',
|
||||
url: 'add-phone-contact'
|
||||
},
|
||||
{
|
||||
name: '扫码',
|
||||
url: 'scan-code'
|
||||
},
|
||||
//#endif
|
||||
//#ifndef H5 || MP-JD
|
||||
{
|
||||
name: '剪贴板',
|
||||
url: 'clipboard'
|
||||
},
|
||||
//#endif
|
||||
// #ifndef H5 || MP-ALIPAY
|
||||
{
|
||||
name: '屏幕亮度',
|
||||
url: 'brightness'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || MP-JD
|
||||
{
|
||||
name: '蓝牙',
|
||||
url: 'bluetooth'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ
|
||||
{
|
||||
name: '生物认证',
|
||||
url: 'soter'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN
|
||||
{
|
||||
name: 'iBeacon',
|
||||
url: 'ibeacon'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5
|
||||
{
|
||||
name: '监听加速度传感器',
|
||||
url: 'on-accelerometer-change'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5 || MP-JD
|
||||
{
|
||||
name: '监听罗盘数据',
|
||||
url: 'on-compass-change'
|
||||
},
|
||||
// #endif
|
||||
//#ifdef APP-PLUS
|
||||
{
|
||||
name: '监听距离传感器',
|
||||
url: '/platforms/app-plus/proximity/proximity'
|
||||
},
|
||||
{
|
||||
name: '监听方向传感器',
|
||||
url: '/platforms/app-plus/orientation/orientation'
|
||||
}
|
||||
//#endif
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'network',
|
||||
name: '网络',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '发起一个请求',
|
||||
url: 'request'
|
||||
},
|
||||
{
|
||||
name: '上传文件',
|
||||
url: 'upload-file'
|
||||
},
|
||||
{
|
||||
name: '下载文件',
|
||||
url: 'download-file'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'websocket',
|
||||
name: 'websocket',
|
||||
open: false,
|
||||
pages: [
|
||||
// #ifndef MP-ALIPAY
|
||||
{
|
||||
name: 'socketTask',
|
||||
url: 'websocket-socketTask'
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: '全局websocket',
|
||||
url: 'websocket-global'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'media',
|
||||
name: '媒体',
|
||||
open: false,
|
||||
pages: mediaPages
|
||||
},
|
||||
// #ifndef MP-KUAISHOU
|
||||
{
|
||||
id: 'location',
|
||||
name: '位置',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '获取当前位置',
|
||||
url: 'get-location'
|
||||
},
|
||||
{
|
||||
name: '使用地图查看位置',
|
||||
url: 'open-location'
|
||||
},
|
||||
// #ifndef MP-TOUTIAO
|
||||
{
|
||||
name: '使用地图选择位置',
|
||||
url: 'choose-location'
|
||||
}
|
||||
// #endif
|
||||
// #ifndef MP-QQ || MP-TOUTIAO || MP-LARK
|
||||
,
|
||||
{
|
||||
name: '地图控制',
|
||||
url: 'map'
|
||||
}
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
,
|
||||
{
|
||||
name: '地图搜索',
|
||||
url: 'map-search'
|
||||
}
|
||||
// #endif
|
||||
]
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
id: 'storage',
|
||||
name: '数据',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '数据存储（key-value）',
|
||||
url: 'storage'
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
name: 'SQLite',
|
||||
url: 'sqlite'
|
||||
}
|
||||
// #endif
|
||||
]
|
||||
},
|
||||
// #ifdef APP-PLUS || MP-WEIXIN
|
||||
{
|
||||
url: 'rewarded-video-ad',
|
||||
name: '激励视频广告',
|
||||
open: false
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
url: 'full-screen-video-ad',
|
||||
name: '全屏视频广告',
|
||||
open: false
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5 || QUICKAPP-WEBVIEW || MP-KUAISHOU || MP-LARK
|
||||
{
|
||||
id: 'login',
|
||||
name: '登录',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '登录',
|
||||
url: 'login'
|
||||
},
|
||||
{
|
||||
name: '获取用户信息',
|
||||
url: 'get-user-info'
|
||||
}
|
||||
]
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5 || QUICKAPP-WEBVIEW-UNION
|
||||
{
|
||||
id: 'share',
|
||||
name: '分享',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '分享',
|
||||
url: 'share'
|
||||
}]
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN
|
||||
{
|
||||
id: 'payment',
|
||||
name: '支付',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '发起支付',
|
||||
url: 'request-payment'
|
||||
}]
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
id: 'speech',
|
||||
name: '语音',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '语音识别',
|
||||
url: '/platforms/app-plus/speech/speech'
|
||||
}]
|
||||
},
|
||||
{
|
||||
id: 'push',
|
||||
name: '推送',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '推送',
|
||||
url: '/platforms/app-plus/push/push'
|
||||
}]
|
||||
}
|
||||
//#endif
|
||||
];
|
||||
return {
|
||||
showSetTabBarPage: false,
|
||||
list: list,
|
||||
notForPc: [{
|
||||
name: '设置TabBar',
|
||||
url: 'set-tabbar'
|
||||
}]
|
||||
};
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎体验uni-app',
|
||||
path: '/pages/tabBar/API/API'
|
||||
};
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/about'
|
||||
});
|
||||
},
|
||||
onLoad() {
|
||||
},
|
||||
onReady() {
|
||||
},
|
||||
onShow() {
|
||||
this.navigateFlag = false;
|
||||
this.leaveSetTabBarPage();
|
||||
},
|
||||
onHide() {
|
||||
this.leaveSetTabBarPage();
|
||||
},
|
||||
|
||||
// #ifdef H5
|
||||
watch:{
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
if (newRoute.matched.length) {
|
||||
let path = newRoute.path.split('/')[3]
|
||||
for (const item of this.list) {
|
||||
if (Array.isArray(item.pages)) {
|
||||
for (const page of item.pages) {
|
||||
if (page === path || page.url && page.url === path) {
|
||||
item.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
triggerCollapse(e, id) {
|
||||
if (!this.list[e].pages) {
|
||||
this.goDetailPage('', this.list[e].url);
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < this.list.length; ++i) {
|
||||
if (e === i) {
|
||||
this.list[i].open = !this.list[i].open;
|
||||
} else {
|
||||
this.list[i].open = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
goDetailPage(panel, e) {
|
||||
if (e === 'set-tabbar') {
|
||||
this.showSetTabBarPage = true;
|
||||
return;
|
||||
}
|
||||
let url = ~e.indexOf('platform') ? e : '/pages/API/' + e + '/' + e;
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
},
|
||||
leaveSetTabBarPage() {
|
||||
this.showSetTabBarPage = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '../../../common/uni-nvue.css';
|
||||
</style>
|
||||
218
pages/tabBar/component/component.nvue
Normal file
218
pages/tabBar/component/component.nvue
Normal file
@@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
111
|
||||
<view v-if="!hasLeftWin" class="uni-header-logo">
|
||||
<image class="uni-header-image" src="/static/componentIndex.png"></image>
|
||||
</view>
|
||||
<view v-if="!hasLeftWin" class="uni-hello-text">
|
||||
<text class="hello-text">uni-app内置组件，展示样式仅供参考，文档详见：</text>
|
||||
<u-link class="hello-link" :href="'https://uniapp.dcloud.io/component/'" :text="'https://uniapp.dcloud.io/component/'"
|
||||
:inWhiteList="true"></u-link>
|
||||
</view>
|
||||
<view class="uni-panel" v-for="(item, index) in list" :key="item.id">
|
||||
<view class="uni-panel-h" :class="item.open ? 'uni-panel-h-on' : ''" @click="triggerCollapse(index, item.id)">
|
||||
<text class="uni-panel-text">{{item.name}}</text>
|
||||
<text class="uni-panel-icon uni-icon" :class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '' : ''}}</text>
|
||||
</view>
|
||||
<view class="uni-panel-c" v-if="item.open">
|
||||
<view :class="{'left-win-active': leftWinActive === (item2.url ? item2.url.split('/')[3] : item2) && hasLeftWin}"
|
||||
class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" @click="goDetailPage(item.id, item2)">
|
||||
<text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
|
||||
<text class="uni-navigate-icon uni-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
// TODO 修复Android v3 加载过慢问题
|
||||
// #ifdef APP-PLUS
|
||||
var domModule = weex.requireModule('dom');
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('/static/uni.ttf')"
|
||||
});
|
||||
// #endif
|
||||
export default {
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
list: [{
|
||||
id: 'view',
|
||||
name: '视图容器',
|
||||
open: false,
|
||||
pages: [
|
||||
'view',
|
||||
'scroll-view',
|
||||
'swiper'
|
||||
// #ifndef MP-TOUTIAO || MP-LARK
|
||||
,
|
||||
'movable-view',
|
||||
'cover-view'
|
||||
// #endif
|
||||
]
|
||||
}, {
|
||||
id: 'content',
|
||||
name: '基础内容',
|
||||
open: false,
|
||||
pages: ['text', 'rich-text', 'progress']
|
||||
}, {
|
||||
id: 'form',
|
||||
name: '表单组件',
|
||||
open: false,
|
||||
pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio',
|
||||
'slider',
|
||||
'switch', 'textarea',
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || H5 || MP-BAIDU
|
||||
'editor',
|
||||
// #endif
|
||||
]
|
||||
}, {
|
||||
id: 'nav',
|
||||
name: '导航',
|
||||
open: false,
|
||||
pages: ['navigator']
|
||||
}, {
|
||||
id: 'media',
|
||||
name: '媒体组件',
|
||||
open: false,
|
||||
pages: [
|
||||
'image',
|
||||
'video'
|
||||
],
|
||||
},
|
||||
// #ifndef MP-TOUTIAO || MP-KUAISHOU
|
||||
{
|
||||
id: 'map',
|
||||
name: '地图',
|
||||
open: false,
|
||||
pages: ['map']
|
||||
|
||||
},
|
||||
// #endif
|
||||
// #ifndef QUICKAPP-WEBVIEW-UNION
|
||||
{
|
||||
id: 'canvas',
|
||||
name: '画布',
|
||||
open: false,
|
||||
pages: ['canvas']
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5
|
||||
{
|
||||
id: 'web-view',
|
||||
name: '网页',
|
||||
open: false,
|
||||
pages: [{
|
||||
name: '网络网页',
|
||||
url: '/pages/component/web-view/web-view'
|
||||
}, {
|
||||
name: '本地网页',
|
||||
url: '/pages/component/web-view-local/web-view-local'
|
||||
}]
|
||||
},
|
||||
// #endif
|
||||
// #ifndef APP-PLUS || H5 || MP-LARK || MP-JD
|
||||
{
|
||||
id: 'web-view',
|
||||
name: '网页',
|
||||
open: false,
|
||||
pages: ['web-view']
|
||||
},
|
||||
// #endif
|
||||
// #ifndef H5 || MP-BAIDU || QUICKAPP-WEBVIEW || MP-LARK || MP-JD
|
||||
{
|
||||
id: 'ad',
|
||||
url: 'ad',
|
||||
name: 'AD组件',
|
||||
open: false
|
||||
},
|
||||
// #endif
|
||||
]
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎体验uni-app',
|
||||
path: '/pages/tabBar/component/component'
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/about'
|
||||
});
|
||||
},
|
||||
// #ifdef H5
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
if (newRoute.matched.length) {
|
||||
let path = newRoute.path.split('/')[3]
|
||||
for (const item of this.list) {
|
||||
if (Array.isArray(item.pages)) {
|
||||
for (const page of item.pages) {
|
||||
if (page === path || page.url && page.url === newRoute.path) {
|
||||
item.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
triggerCollapse(e, id) {
|
||||
if (!this.list[e].pages) {
|
||||
this.goDetailPage('', this.list[e].url);
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < this.list.length; ++i) {
|
||||
if (e === i) {
|
||||
this.list[i].open = !this.list[i].open;
|
||||
} else {
|
||||
this.list[i].open = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
goDetailPage(panel, e) {
|
||||
if (typeof e === 'string') {
|
||||
const url = '/pages/component/' + e + '/' + e
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: e.url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: e.url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
@import '../../../common/uni-nvue.css';
|
||||
</style>
|
||||
57
pages/tabBar/component/component.test.js
Normal file
57
pages/tabBar/component/component.test.js
Normal file
@@ -0,0 +1,57 @@
|
||||
describe('pages/tabBar/component/component.nvue', () => {
|
||||
let page
|
||||
beforeAll(async () => {
|
||||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
||||
page = await program.reLaunch('/pages/tabBar/component/component')
|
||||
await page.waitFor(1000)
|
||||
})
|
||||
|
||||
it('u-link', async () => {
|
||||
// 检测首页u-link的文本内容
|
||||
expect(await (await page.$('.hello-link')).text()).toBe(
|
||||
'https://uniapp.dcloud.io/component/')
|
||||
})
|
||||
|
||||
it('视图容器', async () => {
|
||||
let panelText = await page.$('.uni-panel-text')
|
||||
// 检测首个 panel 是视图容器
|
||||
expect(await panelText.text()).toBe(
|
||||
'视图容器')
|
||||
|
||||
// 检测首个 panel 切换展开
|
||||
const panelH = await page.$('.uni-panel-h');
|
||||
// 不能做完全匹配，百度小程序会生成额外的class
|
||||
expect(await panelH.attribute('class')).toContain('uni-panel-h')
|
||||
await panelH.tap()
|
||||
await page.waitFor(500)
|
||||
// 已展开
|
||||
expect(await panelH.attribute('class')).toContain('uni-panel-h-on')
|
||||
})
|
||||
|
||||
// it('.uni-panel', async () => {
|
||||
// const lists = await page.$$('.uni-panel')
|
||||
// expect(lists.length).toBe(9)
|
||||
// })
|
||||
|
||||
it('.uni-panel action', async () => {
|
||||
const listHead = await page.$('.uni-panel-h')
|
||||
expect(await listHead.attribute('class')).toContain('uni-panel-h-on')
|
||||
await listHead.tap()
|
||||
await page.waitFor(200)
|
||||
expect(await listHead.attribute('class')).toContain(
|
||||
'uni-panel-h',
|
||||
)
|
||||
|
||||
// 展开第一个 panel，点击第一个 item，验证打开的新页面是否正确
|
||||
await listHead.tap()
|
||||
await page.waitFor(200)
|
||||
const item = await page.$('.uni-navigate-item')
|
||||
await item.tap()
|
||||
await page.waitFor(500)
|
||||
expect((await program.currentPage()).path).toBe('pages/component/view/view')
|
||||
await page.waitFor(500)
|
||||
|
||||
// 执行 navigateBack 验证是否返回
|
||||
expect((await program.navigateBack()).path).toBe('pages/tabBar/component/component')
|
||||
})
|
||||
})
|
||||
266
pages/tabBar/extUI/extUI.nvue
Normal file
266
pages/tabBar/extUI/extUI.nvue
Normal file
@@ -0,0 +1,266 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<view v-if="!hasLeftWin" class="uni-header-logo">
|
||||
<image class="uni-header-image" src="/static/extuiIndex.png"></image>
|
||||
</view>
|
||||
<view v-if="!hasLeftWin" class="uni-hello-text">
|
||||
<text class="hello-text">以下是uni-app扩展组件示例，更多组件见插件市场：</text>
|
||||
<u-link class="hello-link" :href="'https://ext.dcloud.net.cn/'" :text="'https://ext.dcloud.net.cn'"
|
||||
:inWhiteList="true"></u-link>
|
||||
</view>
|
||||
<view :class="{'pc-hide': hideList.indexOf(item.url) !== -1 && hasLeftWin}" class="uni-panel"
|
||||
v-for="item in lists" :key="item.url">
|
||||
<view :class="{'left-win-active': leftWinActive === item.url && hasLeftWin}" class="uni-panel-h"
|
||||
@click="goDetailPage(item.url)">
|
||||
<text class="uni-panel-text">{{item.name}}</text>
|
||||
<text class="uni-panel-icon uni-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hideList: [
|
||||
'load-more'
|
||||
],
|
||||
lists: [{
|
||||
name: "uni-badge 数字角标",
|
||||
url: "badge"
|
||||
},
|
||||
{
|
||||
name: "uni-breadcrumb 面包屑",
|
||||
url: "breadcrumb"
|
||||
},
|
||||
{
|
||||
name: "uni-calendar 日历",
|
||||
url: "calendar"
|
||||
},
|
||||
{
|
||||
name: "uni-card 卡片",
|
||||
url: "card"
|
||||
},
|
||||
{
|
||||
name: "uni-collapse 折叠面板",
|
||||
url: "collapse"
|
||||
},
|
||||
|
||||
// #ifndef APP-NVUE
|
||||
{
|
||||
name: "uni-combox 组合框",
|
||||
url: "combox"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-countdown 倒计时",
|
||||
url: "countdown"
|
||||
},
|
||||
{
|
||||
name: "uni-data-checkbox 数据选择器",
|
||||
url: "data-checkbox"
|
||||
},
|
||||
{
|
||||
name: "uni-data-picker 数据驱动的picker选择器",
|
||||
url: "data-picker"
|
||||
},
|
||||
{
|
||||
name: "uni-data-select 数据驱动的下拉框",
|
||||
url: "data-select"
|
||||
},
|
||||
{
|
||||
name: "uni-dateformat 日期格式化",
|
||||
url: "dateformat"
|
||||
},
|
||||
{
|
||||
name: "uni-datetime-picker 日期选择器",
|
||||
url: "datetime-picker"
|
||||
},
|
||||
{
|
||||
name: "uni-drawer 抽屉",
|
||||
url: "drawer"
|
||||
},
|
||||
{
|
||||
name: "uni-easyinput 增强输入框",
|
||||
url: "easyinput"
|
||||
},
|
||||
{
|
||||
name: "uni-fab 悬浮按钮",
|
||||
url: "fab"
|
||||
},
|
||||
{
|
||||
name: "uni-fav 收藏按钮",
|
||||
url: "fav"
|
||||
},
|
||||
// #ifndef APP-NVUE
|
||||
{
|
||||
name: "uni-file-picker 文件选择上传",
|
||||
url: "file-picker"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-forms 表单",
|
||||
url: "forms"
|
||||
},
|
||||
{
|
||||
name: "uni-goods-nav 商品导航",
|
||||
url: "goods-nav"
|
||||
},
|
||||
{
|
||||
name: "uni-grid 宫格",
|
||||
url: "grid"
|
||||
},
|
||||
{
|
||||
name: "uni-group 分组",
|
||||
url: "group"
|
||||
},
|
||||
{
|
||||
name: "uni-icons 图标",
|
||||
url: "icons"
|
||||
},
|
||||
{
|
||||
name: "uni-indexed-list 索引列表",
|
||||
url: "indexed-list"
|
||||
},
|
||||
{
|
||||
name: "uni-link 超链接",
|
||||
url: "link"
|
||||
},
|
||||
{
|
||||
name: "uni-list 列表",
|
||||
url: "list"
|
||||
},
|
||||
// #ifndef MP-JD
|
||||
{
|
||||
name: "uni-load-more 加载更多",
|
||||
url: "load-more"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-nav-bar 自定义导航栏",
|
||||
url: "nav-bar"
|
||||
},
|
||||
{
|
||||
name: "uni-notice-bar 通告栏",
|
||||
url: "notice-bar"
|
||||
},
|
||||
{
|
||||
name: "uni-number-box 数字输入框",
|
||||
url: "number-box"
|
||||
},
|
||||
{
|
||||
name: "uni-pagination 分页器",
|
||||
url: "pagination"
|
||||
},
|
||||
{
|
||||
name: "uni-popup 弹出层",
|
||||
url: "popup"
|
||||
},
|
||||
{
|
||||
name: "uni-rate 评分",
|
||||
url: "rate"
|
||||
},
|
||||
{
|
||||
name: "uni-row 布局-行",
|
||||
url: "row"
|
||||
},
|
||||
{
|
||||
name: "uni-search-bar 搜索栏",
|
||||
url: "search-bar"
|
||||
},
|
||||
{
|
||||
name: "uni-section 标题栏",
|
||||
url: "section"
|
||||
},
|
||||
{
|
||||
name: "uni-segmented-control 分段器",
|
||||
url: "segmented-control"
|
||||
},
|
||||
{
|
||||
name: "uni-steps 步骤条",
|
||||
url: "steps"
|
||||
},
|
||||
{
|
||||
name: "uni-swipe-action 滑动操作",
|
||||
url: "swipe-action"
|
||||
},
|
||||
{
|
||||
name: "uni-swiper-dot 轮播图指示点",
|
||||
url: "swiper-dot"
|
||||
},
|
||||
// #ifndef APP-NVUE || MP-TOUTIAO || MP-BAIDU
|
||||
{
|
||||
name: "uni-table 表格",
|
||||
url: "table"
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: "uni-tag 标签",
|
||||
url: "tag"
|
||||
},
|
||||
{
|
||||
name: "uni-title 章节标题",
|
||||
url: "title"
|
||||
},
|
||||
{
|
||||
name: "uni-tooltip 文字提示",
|
||||
url: "tooltip"
|
||||
},
|
||||
{
|
||||
name: "uni-transition 过渡动画",
|
||||
url: "transition"
|
||||
},
|
||||
]
|
||||
};
|
||||
},
|
||||
onLoad() {},
|
||||
onReady() {
|
||||
// #ifdef APP-NVUE
|
||||
uni.preloadPage({
|
||||
url: "/pages/extUI/calendar/calendar",
|
||||
success() {
|
||||
console.log("preloadPage /pages/extUI/calendar/calendar")
|
||||
},
|
||||
fail() {}
|
||||
})
|
||||
// #endif
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎体验uni-app',
|
||||
path: '/pages/tabBar/extUI/extUI'
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/about'
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
goDetailPage(path) {
|
||||
const url = '/pages/extUI/' + path + '/' + path
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '../../../common/uni-nvue.css';
|
||||
</style>
|
||||
58
pages/tabBar/extUI/extUI.test.js
Normal file
58
pages/tabBar/extUI/extUI.test.js
Normal file
@@ -0,0 +1,58 @@
|
||||
describe('pages/tabBar/extUI/extUI.nvue', () => {
|
||||
let page
|
||||
beforeAll(async () => {
|
||||
// 重新reLaunch至首页，并获取首页page对象（其中 program 是uni-automator自动注入的全局对象）
|
||||
page = await program.reLaunch('/pages/tabBar/extUI/extUI')
|
||||
if (process.env.UNI_PLATFORM === "h5") {
|
||||
await page.waitFor(1000)
|
||||
}
|
||||
if (process.env.UNI_PLATFORM === "mp-weixin" || process.env.UNI_PLATFORM === "mp-baidu") {
|
||||
await page.waitFor(10000)
|
||||
}
|
||||
|
||||
page = await program.currentPage()
|
||||
|
||||
})
|
||||
/**
|
||||
* 点击 u-link 组件
|
||||
*/
|
||||
it('u-link 点击', async () => {
|
||||
const helloLink = await page.$('.hello-link')
|
||||
// 检测首页u-link的文本内容
|
||||
expect(await helloLink.text()).toBe(
|
||||
'https://ext.dcloud.net.cn')
|
||||
})
|
||||
|
||||
/**
|
||||
* 检测列表长度,是否发生变化
|
||||
*/
|
||||
// it('.uni-panel 列表长度', async () => {
|
||||
// const lists = await page.$$('.uni-panel')
|
||||
// expect(lists.length).toBe(29)
|
||||
// })
|
||||
|
||||
/**
|
||||
* 检测打开列表第一个元素是否正确
|
||||
*/
|
||||
it('.uni-panel-h tap 打开 badge 组件', async () => {
|
||||
// 检测首个 panel 是视图容器
|
||||
expect(await (await page.$('.uni-panel-text')).text()).toBe(
|
||||
'uni-badge 数字角标')
|
||||
|
||||
const listHead = await page.$('.uni-panel-h')
|
||||
// 是否获取正确的元素
|
||||
expect(await listHead.attribute('class')).toContain(
|
||||
'uni-panel-h',
|
||||
)
|
||||
|
||||
// 点击第一个 item，验证打开的新页面是否正确
|
||||
await listHead.tap()
|
||||
await page.waitFor(2000)
|
||||
|
||||
expect((await program.currentPage()).path).toBe('pages/extUI/badge/badge')
|
||||
await page.waitFor(500)
|
||||
// 执行 navigateBack 验证是否返回
|
||||
expect((await program.navigateBack()).path).toBe('pages/tabBar/extUI/extUI')
|
||||
})
|
||||
|
||||
})
|
||||
210
pages/tabBar/template/template.nvue
Normal file
210
pages/tabBar/template/template.nvue
Normal file
@@ -0,0 +1,210 @@
|
||||
<template>
|
||||
<view class="uni-container">
|
||||
<view v-if="!hasLeftWin" class="uni-header-logo">
|
||||
<image class="uni-header-image" src="/static/templateIndex.png"></image>
|
||||
</view>
|
||||
<view v-if="!hasLeftWin" class="uni-hello-text">
|
||||
<text class="hello-text">以下是部分模板示例，更多模板见插件市场：</text>
|
||||
<u-link class="hello-link" href="https://ext.dcloud.net.cn" :text="'https://ext.dcloud.net.cn'"
|
||||
:inWhiteList="true"></u-link>
|
||||
</view>
|
||||
<view :class="{'pc-hide': hideList.indexOf(item.url) !== -1 && hasLeftWin}" class="uni-panel"
|
||||
v-for="(item, index) in list" :key="item.id">
|
||||
<view
|
||||
:class="{'left-win-active': leftWinActive === item.url && hasLeftWin, 'uni-panel-h-on': item.open}"
|
||||
class="uni-panel-h" @click="triggerCollapse(index, item.id)">
|
||||
<text class="uni-panel-text">{{item.name}}</text>
|
||||
<text class="uni-panel-icon uni-icon"
|
||||
:class="item.open ? 'uni-panel-icon-on' : ''">{{item.pages ? '' : ''}}</text>
|
||||
</view>
|
||||
<view class="uni-panel-c" v-if="item.open ">
|
||||
<view
|
||||
:class="{'left-win-active': leftWinActive === item2.url && hasLeftWin, 'pc-hide': hideList.indexOf(item2.url) !== -1 && hasLeftWin}"
|
||||
class="uni-navigate-item" v-for="(item2,key) in item.pages" :key="key" @click="goDetailPage(item2)">
|
||||
<text class="uni-navigate-text">{{item2.name ? item2.name : item2}}</text>
|
||||
<text class="uni-navigate-icon uni-icon"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
hasLeftWin: {
|
||||
type: Boolean
|
||||
},
|
||||
leftWinActive: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hideList: [
|
||||
'ucharts',
|
||||
'nav-city-dropdown'
|
||||
],
|
||||
list: [
|
||||
// #ifdef APP-PLUS || H5 || MP-ALIPAY
|
||||
{
|
||||
id: 'navbar',
|
||||
name: '顶部原生导航标题栏',
|
||||
open: false,
|
||||
pages: [
|
||||
// #ifdef APP-PLUS || H5
|
||||
{
|
||||
name: '导航栏带自定义按钮',
|
||||
url: 'nav-button'
|
||||
},
|
||||
{
|
||||
name: '导航栏带红点和角标',
|
||||
url: 'nav-dot'
|
||||
},
|
||||
{
|
||||
name: '导航栏带城市选择',
|
||||
url: 'nav-city-dropdown'
|
||||
},
|
||||
{
|
||||
name: '导航栏带搜索框',
|
||||
url: 'nav-search-input'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || H5 || MP-ALIPAY
|
||||
{
|
||||
name: '透明渐变样式',
|
||||
url: 'nav-transparent'
|
||||
},
|
||||
{
|
||||
name: '导航栏带图片',
|
||||
url: 'nav-image'
|
||||
}
|
||||
// #endif
|
||||
]
|
||||
},
|
||||
// #endif
|
||||
// #ifndef QUICKAPP-WEBVIEW || MP-KUAISHOU
|
||||
{
|
||||
name: '顶部选项卡',
|
||||
url: 'tabbar'
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: '组件通讯',
|
||||
url: 'component-communication'
|
||||
},
|
||||
// #ifndef MP-QQ || QUICKAPP-WEBVIEW
|
||||
// {
|
||||
// name: 'uCharts 图表',
|
||||
// url: 'ucharts'
|
||||
// },
|
||||
// #endif
|
||||
// #ifndef QUICKAPP-WEBVIEW
|
||||
{
|
||||
name: '列表到详情示例',
|
||||
url: 'list2detail-list'
|
||||
},
|
||||
// #endif
|
||||
// #ifndef VUE3
|
||||
// #ifdef APP-PLUS
|
||||
// {
|
||||
// name: '上下滑动切换视频',
|
||||
// url: 'swiper-vertical'
|
||||
// },
|
||||
// #endif
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
{
|
||||
name: 'swiper-list',
|
||||
url: 'swiper-list-nvue'
|
||||
},
|
||||
// #endif
|
||||
{
|
||||
name: 'GlobalData和vuex',
|
||||
url: 'global'
|
||||
},
|
||||
// #ifdef APP-PLUS
|
||||
{
|
||||
name: '问题反馈',
|
||||
url: '/platforms/app-plus/feedback/feedback'
|
||||
},
|
||||
{
|
||||
name: '打开外部应用',
|
||||
url: 'scheme'
|
||||
},
|
||||
// #endif
|
||||
// #ifdef APP-PLUS || MP-WEIXIN || MP-QQ || H5
|
||||
// {
|
||||
// name: '微信自定义组件示例（vant ui）',
|
||||
// url: 'vant-button'
|
||||
// }
|
||||
// #endif
|
||||
]
|
||||
}
|
||||
},
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '欢迎体验uni-app',
|
||||
path: '/pages/tabBar/template/template'
|
||||
}
|
||||
},
|
||||
onNavigationBarButtonTap(e) {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/about'
|
||||
});
|
||||
},
|
||||
// #ifdef H5
|
||||
watch: {
|
||||
$route: {
|
||||
immediate: true,
|
||||
handler(newRoute) {
|
||||
if (newRoute.matched.length) {
|
||||
let path = newRoute.path.split('/')[3]
|
||||
for (const item of this.list) {
|
||||
if (Array.isArray(item.pages)) {
|
||||
for (const page of item.pages) {
|
||||
if (page === path || page.url && page.url === path) {
|
||||
item.open = true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
// #endif
|
||||
methods: {
|
||||
triggerCollapse(e, id) {
|
||||
if (!this.list[e].pages) {
|
||||
this.goDetailPage(this.list[e].url);
|
||||
return;
|
||||
}
|
||||
for (var i = 0; i < this.list.length; ++i) {
|
||||
if (e === i) {
|
||||
this.list[i].open = !this.list[i].open;
|
||||
} else {
|
||||
this.list[i].open = false;
|
||||
}
|
||||
}
|
||||
},
|
||||
goDetailPage(e) {
|
||||
let path = e.url ? e.url : e;
|
||||
let url = ~path.indexOf('platform') ? path : '/pages/template/' + path + '/' + path;
|
||||
if (this.hasLeftWin) {
|
||||
uni.reLaunch({
|
||||
url: url
|
||||
})
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
})
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import '../../../common/uni-nvue.css';
|
||||
</style>
|
||||
Reference in New Issue
Block a user