Skip to content

Commit b90a409

Browse files
feige996feige996
committed
feat: 把hello项目文件搬过来
1 parent 16694ca commit b90a409

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

45 files changed

+2398
-11
lines changed

‎pages.config.ts

+30
Original file line numberDiff line numberDiff line change
@@ -15,4 +15,34 @@ export default defineUniPages({
1515
'^uv-(.*)': '@climblee/uv-ui/components/uv-$1/uv-$1.vue',
1616
},
1717
},
18+
tabBar: {
19+
color: '#999999',
20+
selectedColor: '#018d71',
21+
backgroundColor: '#F8F8F8',
22+
borderStyle: 'black',
23+
height: '50px',
24+
fontSize: '10px',
25+
iconWidth: '24px',
26+
spacing: '3px',
27+
list: [
28+
{
29+
iconPath: 'static/tabbar/home.png',
30+
selectedIconPath: 'static/tabbar/homeHL.png',
31+
pagePath: 'pages/index/index',
32+
text: '首页',
33+
},
34+
{
35+
iconPath: 'static/tabbar/example.png',
36+
selectedIconPath: 'static/tabbar/exampleHL.png',
37+
pagePath: 'pages/demo/index',
38+
text: '示例',
39+
},
40+
{
41+
iconPath: 'static/tabbar/personal.png',
42+
selectedIconPath: 'static/tabbar/personalHL.png',
43+
pagePath: 'pages/my/index',
44+
text: '我的',
45+
},
46+
],
47+
},
1848
})

‎src/components/fly-header/fly-header.vue

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<template>
2+
<view class="text-green-500"> header </view>
3+
</template>

‎src/components/fly-login/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# fly-login
2+
3+
点击“点击显示微信头像”按钮后，出现的半屏登录弹窗，可以在任意页面引入。
4+
5+
仿“掘金小册”小程序。
6+
7+
![掘金小册登录](screenshot.png)

‎src/components/fly-login/defaultAvatar.png

1.87 KB
Loading

‎src/components/fly-login/fly-login.vue

+120
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
<template>
2+
<view class="fly-login" v-if="modelValue">
3+
<view class="fly-login-mask" />
4+
<view class="fly-login-content px-4">
5+
<view class="font-bold h-16 leading-16">获取您的昵称、头像</view>
6+
<view
7+
class="rounded-full bg-light-600 w-6 h-6 text-center absolute top-4 right-4"
8+
@click="onClose"
9+
>
10+
<view class="i-carbon-close text-gray-700" />
11+
</view>
12+
13+
<view
14+
class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-[1rpx]"
15+
>
16+
<text class="mr-4 flex-shrink-0">头像</text>
17+
<button
18+
class="bg-transparent flex items-center after:b-none w-full h-12 leading-12"
19+
open-type="chooseAvatar"
20+
@chooseavatar="onChooseAvatar"
21+
>
22+
<image class="w-8 h-8 rounded-full" :src="avatarUrl"></image>
23+
<text class="ml-auto i-carbon-chevron-right"></text>
24+
</button>
25+
</view>
26+
27+
<view
28+
class="flex items-center h-16 leading-16 border-b-gray-400 border-b-solid border-1 mt-4"
29+
>
30+
<text class="mr-4 flex-shrink-0">昵称</text>
31+
<input type="nickname" placeholder="请输入昵称" @change="onChange" @blur="onChange" />
32+
</view>
33+
34+
<button
35+
size="default"
36+
type="default"
37+
style="color: #fff; background-color: #1aad19; border-color: #1aad19"
38+
class="text-center leading-12 w-40 my-4"
39+
@click="onSubmit"
40+
>
41+
确定
42+
</button>
43+
</view>
44+
</view>
45+
</template>
46+
<script lang="ts" setup>
47+
import { useUserStore } from '@/store'
48+
import defaultAvatarUrl from './defaultAvatar.png'
49+
50+
const emit = defineEmits(['update:modelValue'])
51+
defineProps<{ modelValue: boolean }>()
52+
53+
const userStore = useUserStore()
54+
55+
const avatarUrl = ref(defaultAvatarUrl)
56+
const nickname = ref('')
57+
58+
const onClose = () => {
59+
emit('update:modelValue', false)
60+
}
61+
62+
const onChooseAvatar = (e) => {
63+
const { avatarUrl: url } = e.detail
64+
avatarUrl.value = url
65+
// 这里就要上传，加快速度，提升体验（用户多次选择头像就多次上传吧，总有取舍）
66+
console.log(url)
67+
}
68+
69+
const onChange = (e) => {
70+
const { value } = e.detail
71+
nickname.value = value
72+
console.log(value)
73+
}
74+
75+
const onSubmit = () => {
76+
// 1、上传刚刚的图片，并返回网络地址
77+
// 2、把用户信息存起来
78+
if (avatarUrl.value === defaultAvatarUrl) {
79+
uni.showToast({
80+
title: '请选择头像',
81+
icon: 'none',
82+
})
83+
return
84+
}
85+
if (!nickname.value) {
86+
uni.showToast({
87+
title: '请填写昵称',
88+
icon: 'none',
89+
})
90+
return
91+
}
92+
93+
emit('update:modelValue', false)
94+
console.log('保存用户信息')
95+
userStore.setUserInfo({ nickname: nickname.value, avatar: avatarUrl.value })
96+
}
97+
</script>
98+
99+
<style lang="scss" scoped>
100+
.fly-login {
101+
position: fixed;
102+
inset: 0;
103+
104+
.fly-login-mask {
105+
position: fixed;
106+
inset: 0;
107+
background-color: rgb(0 0 0 / 30%);
108+
}
109+
110+
.fly-login-content {
111+
position: fixed;
112+
right: 0;
113+
bottom: var(--window-bottom);
114+
left: 0;
115+
background-color: #fff;
116+
border-top-left-radius: 16px;
117+
border-top-right-radius: 16px;
118+
}
119+
}
120+
</style>

‎src/components/fly-login/screenshot.png

275 KB
Loading

‎src/components/fly-navbar/README.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# fly-navbar
2+
3+
建议本导航栏组件在设置 `"navigationStyle": "custom"` 的页面使用，目前支持微信小程序的页面滚动动画。

‎src/components/fly-navbar/fly-navbar.vue

+71
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<template>
2+
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
3+
<view class="fly-navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
4+
<!-- 1/3，多于1个页面，用返回图标 -->
5+
<navigator v-if="pages.length > 1" open-type="navigateBack" class="left-icon">
6+
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
7+
<button class="i-carbon-chevron-left text-white w-7 h-7"></button>
8+
</view>
9+
</navigator>
10+
<!-- 2/3，只有1个页面，如果不是tabbar，需要首页图标 -->
11+
<!-- 这种情况一般出现在用户直接打开分享出去的详情页面，或者使用redirectTo等API -->
12+
<navigator
13+
v-else-if="!isTabbar"
14+
open-type="switchTab"
15+
url="/pages/index/index"
16+
class="left-icon"
17+
>
18+
<view class="bg-gray-500/80 rounded-full w-8 h-8 flex items-center justify-center">
19+
<button class="i-carbon-home text-white w-6 h-6"></button>
20+
</view>
21+
</navigator>
22+
<!-- 3/3，如果当前页就是tabbar页，不用去首页，也就是什么图标都不需要 -->
23+
<view class="title">{{ title || '' }}</view>
24+
</view>
25+
</template>
26+
27+
<script lang="ts" setup>
28+
import { getIsTabbar } from '@/utils/index'
29+
30+
defineProps<{ title?: string }>()
31+
// 获取页面栈
32+
const pages = getCurrentPages()
33+
const isTabbar = getIsTabbar()
34+
console.log({ isTabbar, pagesLen: pages.length })
35+
36+
// 获取屏幕边界到安全区域距离
37+
const { safeAreaInsets } = uni.getSystemInfoSync()
38+
</script>
39+
40+
<style lang="scss" scoped>
41+
.fly-navbar {
42+
position: fixed;
43+
top: 0;
44+
left: 0;
45+
z-index: 9;
46+
width: 750rpx;
47+
color: #000;
48+
background-color: transparent;
49+
50+
.left-icon {
51+
position: absolute;
52+
left: 0;
53+
display: flex;
54+
align-items: center;
55+
justify-content: center;
56+
width: 44px;
57+
height: 44px;
58+
font-size: 44rpx;
59+
color: #000;
60+
}
61+
62+
.title {
63+
display: flex;
64+
align-items: center;
65+
justify-content: center;
66+
height: 44px;
67+
font-size: 32rpx;
68+
color: transparent;
69+
}
70+
}
71+
</style>

‎src/hooks/useNavbarWeixin.ts

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import { onReady } from '@dcloudio/uni-app'
2+
import { getIsTabbar } from '@/utils/index'
3+
4+
export default () => {
5+
// 获取页面栈
6+
const pages = getCurrentPages()
7+
const isTabbar = getIsTabbar()
8+
9+
// 页面滚动到底部时的操作，通常用于加载更多数据
10+
const onScrollToLower = () => {}
11+
// 获取屏幕边界到安全区域距离
12+
const { safeAreaInsets } = uni.getSystemInfoSync()
13+
14+
// #ifdef MP-WEIXIN
15+
// 基于小程序的 Page 类型扩展 uni-app 的 Page
16+
type PageInstance = Page.PageInstance & WechatMiniprogram.Page.InstanceMethods<any>
17+
// 获取当前页面实例，数组最后一项
18+
const pageInstance = getCurrentPages().at(-1) as PageInstance
19+
20+
// 页面渲染完毕，绑定动画效果
21+
onReady(() => {
22+
// 动画效果,导航栏背景色
23+
pageInstance.animate(
24+
'.fly-navbar',
25+
[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],
26+
1000,
27+
{
28+
scrollSource: '#scroller',
29+
timeRange: 1000,
30+
startScrollOffset: 0,
31+
endScrollOffset: 50,
32+
},
33+
)
34+
// 动画效果,导航栏标题
35+
pageInstance.animate(
36+
'.fly-navbar .title',
37+
[{ color: 'transparent' }, { color: '#000' }],
38+
1000,
39+
{
40+
scrollSource: '#scroller',
41+
timeRange: 1000,
42+
startScrollOffset: 0,
43+
endScrollOffset: 50,
44+
},
45+
)
46+
// 动画效果,导航栏返回按钮
47+
pageInstance.animate('.fly-navbar .left-icon', [{ color: '#fff' }, { color: '#000' }], 1000, {
48+
scrollSource: '#scroller',
49+
timeRange: 1000,
50+
startScrollOffset: 0,
51+
endScrollOffset: 50,
52+
})
53+
})
54+
// #endif
55+
56+
return {
57+
pages,
58+
isTabbar,
59+
onScrollToLower,
60+
safeAreaInsets,
61+
}
62+
}

‎src/hooks/useWeixinShare.ts

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
2+
3+
export default () => {
4+
return {
5+
/** 激活“分享给好友” */
6+
onShareAppMessage: onShareAppMessage(
7+
(options: Page.ShareAppMessageOption): Page.CustomShareContent => {
8+
console.log('options:', options)
9+
return {
10+
title: '自定义分享标题',
11+
path: '/pages/index/index?id=xxx',
12+
imageUrl:
13+
'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
14+
}
15+
},
16+
),
17+
/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
18+
onShareTimeline: onShareTimeline((): Page.ShareTimelineContent => {
19+
return {
20+
title: '自定义分享标题',
21+
query: 'a=1&b=2',
22+
}
23+
}),
24+
}
25+
}

‎src/pages/demo/base/mp-weixin-share.vue

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<route lang="json5">
2+
{
3+
layout: 'demo',
4+
style: { navigationBarTitleText: '微信分享' },
5+
}
6+
</route>
7+
8+
<template>
9+
<view class="text-green">微信分享页</view>
10+
<view class="text-green-500">请在微信小程序中体验，或者开发者工具</view>
11+
<view>1) 默认是不激活”发送给朋友“和”分享到朋友圈“的，如下图</view>
12+
<image
13+
src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-before.png"
14+
mode="widthFix"
15+
/>
16+
<view>2) 增加了onShareAppMessage和onShareTimeline后，就可以微信分享了，如下图</view>
17+
<image
18+
src="https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/fly/wx-share/wx-share-after.png"
19+
mode="widthFix"
20+
/>
21+
</template>
22+
23+
<script lang="ts" setup>
24+
import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
25+
/** 激活“分享给好友” */
26+
onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
27+
console.log('options:', options)
28+
return {
29+
title: '自定义分享标题',
30+
path: '/pages/index/index?id=xxx',
31+
imageUrl:
32+
'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
33+
}
34+
})
35+
/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
36+
onShareTimeline((): Page.ShareTimelineContent => {
37+
return {
38+
title: '自定义分享标题',
39+
query: 'a=1&b=2',
40+
}
41+
})
42+
</script>

‎src/pages/demo/base/navbar.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<route lang="json5">
2+
{
3+
style: { navigationBarTitleText: '自定义导航栏', navigationStyle: 'custom' },
4+
}
5+
</route>
6+
7+
<template>
8+
<fly-navbar />
9+
<view class="bg-green-300 min-h-20" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
10+
<view class="p-4"> 自定义导航栏，设置"navigationStyle":"custom" </view>
11+
<view class="p-4"> 通常页面顶部有一个图片或背景色 </view>
12+
</view>
13+
<fly-content :line="20" />
14+
</template>
15+
16+
<script lang="ts" setup>
17+
// 获取屏幕边界到安全区域距离
18+
const { safeAreaInsets } = uni.getSystemInfoSync()
19+
</script>

0 commit comments

Comments
 (0)