Skip to content

Commit 9a71be6

Browse files
gimmyhehegimmyhehe
authored
feat: add mobile demo preview (opentiny#2807)
1 parent 83d7df5 commit 9a71be6

File tree

7 files changed

+115
-7
lines changed

7 files changed

+115
-7
lines changed

‎examples/sites/env/.env.mobile

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ VITE_APP_MODE='mobile'
66

77
VITE_APP_BUILD_BASE_URL='/'
88
VITE_PLAYGROUND_URL=/playground.html
9+
VITE_MOBILE_URL=/mobile.html

‎examples/sites/env/.env.mobilealpha

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
55
VITE_APP_MODE='mobile'
66

77
VITE_APP_BUILD_BASE_URL=https://test-static-resource.obs.cn-north-7.ulanqab.huawei.com/tiny-vue-mobile-doc/${staticReleaseVersion}/
8-
VITE_PLAYGROUND_URL=/vue-playground
8+
VITE_PLAYGROUND_URL=/vue-playground
9+
VITE_MOBILE_URL=/vue-mobile-preview

‎examples/sites/env/.env.mobileprod

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,5 @@ VITE_BUILD_TARGET='inner'
55
VITE_APP_MODE='mobile'
66

77
VITE_APP_BUILD_BASE_URL=//res.hc-cdn.com/tiny-vue-mobile-doc/
8-
VITE_PLAYGROUND_URL=/vue-playground
8+
VITE_PLAYGROUND_URL=/vue-playground
9+
VITE_MOBILE_URL=/vue-mobile-preview

‎examples/sites/mobile.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>TinyVueMobile 演示</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/mobile/main.ts"></script>
12+
</body>
13+
</html>

‎examples/sites/mobile/App.vue

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<template>
2+
<div>
3+
<component :is="showComponent" />
4+
</div>
5+
</template>
6+
7+
<script setup lang="tsx">
8+
import { shallowRef, onMounted, onBeforeUnmount } from 'vue'
9+
import { TinyLoading } from '@opentiny/vue-mobile'
10+
import { vueComponents } from '@/views/components/cmp-config'
11+
12+
const showComponent = shallowRef(null)
13+
const notFoundDemo = (demoPath) => <div>{`${demoPath}示例资源不存在，请检查文件名是否正确？`}</div>
14+
const getComponent = async (demoPath) => {
15+
if (vueComponents[demoPath]) {
16+
const cmp = (await vueComponents[demoPath]()).default
17+
return cmp
18+
} else {
19+
return notFoundDemo(demoPath)
20+
}
21+
}
22+
23+
let loadingService
24+
const showLoading = () => {
25+
if (!loadingService) {
26+
loadingService = TinyLoading.service({
27+
lock: true
28+
})
29+
}
30+
}
31+
const closeLoading = () => {
32+
if (loadingService) {
33+
loadingService.close()
34+
loadingService = null
35+
}
36+
}
37+
38+
const receiveMessage = ({ data }) => {
39+
const { from, component, demo } = data || {}
40+
if (!['tiny-vue-site'].includes(from)) {
41+
return
42+
}
43+
showLoading()
44+
const demoPath = `${component}/${demo}`
45+
getComponent(demoPath).then((cmp) => {
46+
showComponent.value = cmp
47+
closeLoading()
48+
})
49+
}
50+
51+
onMounted(() => {
52+
const searchObj = new URLSearchParams(location.search)
53+
const component = searchObj.get('component')
54+
const demo = searchObj.get('demo')
55+
window.addEventListener('message', receiveMessage, false)
56+
if (component && demo) {
57+
showLoading()
58+
const demoPath = `${component}/${demo}`
59+
getComponent(demoPath).then((cmp) => {
60+
showComponent.value = cmp
61+
closeLoading()
62+
})
63+
}
64+
})
65+
66+
onBeforeUnmount(() => {
67+
window.removeEventListener('message', receiveMessage)
68+
})
69+
</script>
70+
71+
<style>
72+
html,
73+
body {
74+
margin: 0;
75+
padding: 0;
76+
}
77+
</style>

‎examples/sites/mobile/main.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
const app = createApp(App)
5+
app.mount('#app')

‎examples/sites/vite.config.ts

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export default defineConfig((config) => {
4545
const isSaas = env.VITE_TINY_THEME === 'saas'
4646
const isPlus = env.VITE_APP_MODE === 'plus'
4747
const isInner = env.VITE_BUILD_TARGET === 'inner'
48+
const isMobile = env.VITE_APP_MODE === 'mobile'
4849
const demosPath = isPlus ? '../plusdocs/pc' : `./demos/${env.VITE_APP_MODE}`
4950
const apisPath = isPlus ? '../plusdocs/apis' : './demos/apis'
5051
const menuPath = isSaas ? path.resolve('./demos/saas') : path.resolve(demosPath)
@@ -64,6 +65,19 @@ export default defineConfig((config) => {
6465
dest: '@demos/mobile-first'
6566
})
6667
}
68+
69+
const buildInput = () => {
70+
// design-server中一个路由对应一个页面
71+
const input = {
72+
index: path.resolve(__dirname, './index.html'),
73+
playground: path.resolve(__dirname, './playground.html')
74+
}
75+
if (isMobile) {
76+
input.mobile = path.resolve(__dirname, './mobile.html')
77+
}
78+
return input
79+
}
80+
6781
const viteConfig = {
6882
envDir: './env',
6983
base: env.VITE_APP_BUILD_BASE_URL || '/tiny-vue/',
@@ -125,11 +139,7 @@ export default defineConfig((config) => {
125139
optimizeDeps: getOptimizeDeps(3),
126140
build: {
127141
rollupOptions: {
128-
input: {
129-
index: path.resolve(__dirname, './index.html'),
130-
// design-server中添加一个专门路由指向 playground.html
131-
playground: path.resolve(__dirname, './playground.html')
132-
}
142+
input: buildInput()
133143
}
134144
},
135145
resolve: {

0 commit comments

Comments
 (0)