123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596 |
- <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
- <route lang="json5" type="home">
- {
- layout: 'tabbar',
- style: {
- // 'custom' 表示开启自定义导航栏,默认 'default'
- navigationStyle: 'custom',
- navigationBarTitleText: '首页',
- },
- }
- </route>
- <script lang="ts" setup>
- import PLATFORM from '@/utils/platform'
- defineOptions({
- name: 'Home',
- })
- // 获取屏幕边界到安全区域距离
- let safeAreaInsets
- let systemInfo
- // #ifdef MP-WEIXIN
- // 微信小程序使用新的API
- systemInfo = uni.getWindowInfo()
- safeAreaInsets = systemInfo.safeArea
- ? {
- top: systemInfo.safeArea.top,
- right: systemInfo.windowWidth - systemInfo.safeArea.right,
- bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
- left: systemInfo.safeArea.left,
- }
- : null
- // #endif
- // #ifndef MP-WEIXIN
- // 其他平台继续使用uni API
- systemInfo = uni.getSystemInfoSync()
- safeAreaInsets = systemInfo.safeAreaInsets
- // #endif
- const author = ref('菲鸽')
- const description = ref(
- 'unibest 是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp 拥有 best 体验。',
- )
- // 测试 uni API 自动引入
- onLoad(() => {
- console.log('项目作者:', author.value)
- })
- console.log('index')
- </script>
- <template>
- <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
- <view class="mt-10">
- <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
- </view>
- <view class="mt-4 text-center text-4xl text-[#d14328]">
- unibest
- </view>
- <view class="mb-8 mt-2 text-center text-2xl">
- 最好用的 uniapp 开发模板
- </view>
- <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
- {{ description }}
- </view>
- <view class="mt-4 text-center">
- 作者:
- <text class="text-green-500">
- 菲鸽
- </text>
- </view>
- <view class="mt-4 text-center">
- 官网地址:
- <text class="text-green-500">
- https://unibest.tech
- </text>
- </view>
- <view class="mt-6 h-1px bg-#eee" />
- <view class="mt-8 text-center">
- 当前平台是:
- <text class="text-green-500">
- {{ PLATFORM.platform }}
- </text>
- </view>
- <view class="mt-4 text-center">
- 模板分支是:
- <text class="text-green-500">
- i18n
- </text>
- </view>
- </view>
- <tabbar />
- </template>
|