create-vite-taro 0.3.1 → 0.3.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -18,7 +18,7 @@ export function NavigationBar({ title }: NavigationBarProps) {
|
|
|
18
18
|
const sideStyle: CSSProperties = { flexBasis: px(menuInfo.width), width: px(menuInfo.width) }
|
|
19
19
|
|
|
20
20
|
return (
|
|
21
|
-
<View className="flex w-full flex-col text-white
|
|
21
|
+
<View className="flex w-full flex-col bg-slate-950 text-white" style={containerStyle}>
|
|
22
22
|
<View className="shrink-0" style={statusBarStyle} />
|
|
23
23
|
<View className="flex w-full flex-1 flex-row items-center" style={contentStyle}>
|
|
24
24
|
<View className="flex h-full shrink-0" style={sideStyle} />
|
|
@@ -1,27 +1,167 @@
|
|
|
1
1
|
import Taro from 'virtual:taro/api'
|
|
2
|
-
import { Button, Text, View } from 'virtual:taro/components'
|
|
2
|
+
import { Button, ScrollView, Text, View } from 'virtual:taro/components'
|
|
3
|
+
import { useState } from 'react'
|
|
3
4
|
import { NavigationBar } from '../../components/navigation-bar/navigation-bar.tsx'
|
|
4
5
|
|
|
6
|
+
const features = [
|
|
7
|
+
{
|
|
8
|
+
number: '01',
|
|
9
|
+
title: 'Instant feedback',
|
|
10
|
+
description: 'Enjoy a fast Vite-powered development loop on every target.'
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
number: '02',
|
|
14
|
+
title: 'One React UI',
|
|
15
|
+
description: 'Share components and state between H5 and WeChat Mini Program.'
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
number: '03',
|
|
19
|
+
title: 'Native ready',
|
|
20
|
+
description: 'Reach Taro APIs and components without giving up modern tooling.'
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
|
|
5
24
|
function IndexPage() {
|
|
25
|
+
const [count, setCount] = useState(0)
|
|
26
|
+
|
|
6
27
|
return (
|
|
7
|
-
<View className="flex flex-col
|
|
28
|
+
<View className="flex h-screen flex-col overflow-hidden bg-slate-950 text-slate-950">
|
|
8
29
|
<NavigationBar title="Vite Taro App" />
|
|
9
|
-
<
|
|
10
|
-
<View className="
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
30
|
+
<ScrollView scrollY className="flex min-h-0 flex-1 flex-col bg-slate-50">
|
|
31
|
+
<View className="relative flex shrink-0 flex-col items-center overflow-hidden bg-slate-950 px-6 pb-16 pt-10">
|
|
32
|
+
<View className="relative flex w-full max-w-4xl flex-col gap-6">
|
|
33
|
+
<View className="flex flex-row">
|
|
34
|
+
<View className="flex flex-row items-center gap-2 rounded-full border border-slate-700 bg-slate-900 px-3 py-2">
|
|
35
|
+
<Text className="text-xs leading-none text-emerald-400">●</Text>
|
|
36
|
+
<Text className="text-xs font-semibold tracking-widest text-slate-300">
|
|
37
|
+
VITE × TARO
|
|
38
|
+
</Text>
|
|
39
|
+
</View>
|
|
40
|
+
</View>
|
|
41
|
+
|
|
42
|
+
<View className="flex flex-col">
|
|
43
|
+
<Text className="block text-4xl font-bold leading-tight text-white">One codebase.</Text>
|
|
44
|
+
<Text className="block text-4xl font-bold leading-tight text-blue-400">Every screen.</Text>
|
|
45
|
+
</View>
|
|
46
|
+
|
|
47
|
+
<Text className="block max-w-xl text-base leading-7 text-slate-300">
|
|
48
|
+
A modern React starter for building polished H5 and WeChat experiences without duplicating
|
|
49
|
+
work.
|
|
50
|
+
</Text>
|
|
51
|
+
|
|
52
|
+
<View className="flex flex-row gap-3">
|
|
53
|
+
<View className="flex items-center rounded-xl bg-white px-4 py-2">
|
|
54
|
+
<Text className="text-sm font-bold text-slate-950">WeChat Mini Program</Text>
|
|
55
|
+
</View>
|
|
56
|
+
<View className="flex items-center rounded-xl border border-slate-700 bg-slate-900 px-4 py-2">
|
|
57
|
+
<Text className="text-sm font-bold text-white">H5</Text>
|
|
58
|
+
</View>
|
|
59
|
+
</View>
|
|
60
|
+
</View>
|
|
61
|
+
</View>
|
|
62
|
+
|
|
63
|
+
<View className="relative z-10 flex shrink-0 flex-col items-center px-5">
|
|
64
|
+
<View className="-mt-10 flex w-full max-w-4xl flex-col rounded-3xl shadow-xl">
|
|
65
|
+
<View className="flex w-full flex-col gap-6 overflow-hidden rounded-3xl border border-slate-200 bg-white p-6">
|
|
66
|
+
<View className="flex flex-row items-start justify-between gap-4">
|
|
67
|
+
<View className="flex min-w-0 flex-1 flex-col gap-2">
|
|
68
|
+
<Text className="block text-xs font-bold tracking-widest text-blue-600">
|
|
69
|
+
LIVE DEMO
|
|
70
|
+
</Text>
|
|
71
|
+
<Text className="block text-xl font-bold text-slate-950">
|
|
72
|
+
A tiny shared counter
|
|
73
|
+
</Text>
|
|
74
|
+
<Text className="block text-sm leading-6 text-slate-500">
|
|
75
|
+
Change the counter, then edit this page to see hot reload update both targets.
|
|
76
|
+
</Text>
|
|
77
|
+
</View>
|
|
78
|
+
<View className="flex items-center justify-center rounded-2xl bg-blue-50 px-4 py-3">
|
|
79
|
+
<Text className="text-3xl font-bold text-blue-600">{count}</Text>
|
|
80
|
+
</View>
|
|
81
|
+
</View>
|
|
82
|
+
|
|
83
|
+
<View className="flex flex-col gap-3">
|
|
84
|
+
<View className="flex flex-row gap-3">
|
|
85
|
+
<View className="flex flex-1">
|
|
86
|
+
<Button
|
|
87
|
+
className="flex w-full items-center justify-center rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 after:border-0"
|
|
88
|
+
onClick={() => setCount((currentCount) => currentCount - 1)}
|
|
89
|
+
>
|
|
90
|
+
Decrease
|
|
91
|
+
</Button>
|
|
92
|
+
</View>
|
|
93
|
+
<View className="flex flex-1">
|
|
94
|
+
<Button
|
|
95
|
+
className="flex w-full items-center justify-center rounded-xl bg-blue-600 px-4 py-3 text-sm font-semibold text-white after:border-0"
|
|
96
|
+
onClick={() => setCount((currentCount) => currentCount + 1)}
|
|
97
|
+
>
|
|
98
|
+
Increase
|
|
99
|
+
</Button>
|
|
100
|
+
</View>
|
|
101
|
+
</View>
|
|
102
|
+
<Button
|
|
103
|
+
className="flex w-full items-center justify-center rounded-xl bg-slate-100 px-4 py-3 text-sm font-semibold text-slate-600 after:border-0"
|
|
104
|
+
onClick={() => Taro.showToast({ title: 'Hello from Taro!' })}
|
|
105
|
+
>
|
|
106
|
+
Show toast
|
|
107
|
+
</Button>
|
|
108
|
+
</View>
|
|
109
|
+
</View>
|
|
110
|
+
</View>
|
|
111
|
+
</View>
|
|
112
|
+
|
|
113
|
+
<View className="flex shrink-0 flex-col items-center px-5 pb-10 pt-10">
|
|
114
|
+
<View className="flex w-full max-w-4xl flex-col gap-6">
|
|
115
|
+
<View className="flex flex-col gap-2">
|
|
116
|
+
<Text className="block text-xs font-bold tracking-widest text-blue-600">
|
|
117
|
+
BUILT FOR MOMENTUM
|
|
118
|
+
</Text>
|
|
119
|
+
<Text className="block text-2xl font-bold text-slate-950">
|
|
120
|
+
Everything you need to start.
|
|
121
|
+
</Text>
|
|
122
|
+
</View>
|
|
123
|
+
|
|
124
|
+
<View className="flex flex-col overflow-hidden rounded-3xl border border-slate-200 bg-white">
|
|
125
|
+
{features.map((feature, index) => (
|
|
126
|
+
<View
|
|
127
|
+
key={feature.number}
|
|
128
|
+
className={`flex flex-row gap-4 p-5 ${index < features.length - 1 ? 'border-b border-slate-200' : ''}`}
|
|
129
|
+
>
|
|
130
|
+
<View className="flex shrink-0 self-center items-center justify-center rounded-xl bg-slate-950 px-3 py-3">
|
|
131
|
+
<Text className="text-xs font-bold text-white">{feature.number}</Text>
|
|
132
|
+
</View>
|
|
133
|
+
<View className="flex min-w-0 flex-1 flex-col gap-1">
|
|
134
|
+
<Text className="block text-base font-bold text-slate-950">
|
|
135
|
+
{feature.title}
|
|
136
|
+
</Text>
|
|
137
|
+
<Text className="block text-sm leading-6 text-slate-500">
|
|
138
|
+
{feature.description}
|
|
139
|
+
</Text>
|
|
140
|
+
</View>
|
|
141
|
+
</View>
|
|
142
|
+
))}
|
|
143
|
+
</View>
|
|
144
|
+
|
|
145
|
+
<View className="flex flex-col gap-5 rounded-3xl bg-blue-600 p-6">
|
|
146
|
+
<View className="flex flex-col gap-2">
|
|
147
|
+
<Text className="block text-2xl font-bold text-white">Make it yours.</Text>
|
|
148
|
+
<Text className="block text-sm leading-6 text-blue-100">
|
|
149
|
+
Edit this page, add your routes, and ship your next idea everywhere.
|
|
150
|
+
</Text>
|
|
151
|
+
</View>
|
|
152
|
+
<View className="flex self-end rounded-xl bg-white px-4 py-3">
|
|
153
|
+
<Text className="text-sm font-bold text-blue-600">Ready to build →</Text>
|
|
154
|
+
</View>
|
|
155
|
+
</View>
|
|
156
|
+
|
|
157
|
+
<View className="flex flex-col px-2 pt-2">
|
|
158
|
+
<Text className="block text-center text-xs font-medium tracking-widest text-slate-400">
|
|
159
|
+
VITE 8 · REACT 19 · TARO
|
|
160
|
+
</Text>
|
|
161
|
+
</View>
|
|
162
|
+
</View>
|
|
23
163
|
</View>
|
|
24
|
-
</
|
|
164
|
+
</ScrollView>
|
|
25
165
|
</View>
|
|
26
166
|
)
|
|
27
167
|
}
|