index copy.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
  1. <!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
  2. <route lang="json5" type="home">
  3. {
  4. layout: 'tabbar',
  5. style: {
  6. // 'custom' 表示开启自定义导航栏,默认 'default'
  7. navigationStyle: 'custom',
  8. navigationBarTitleText: '首页',
  9. },
  10. }
  11. </route>
  12. <script lang="ts" setup>
  13. import PLATFORM from '@/utils/platform'
  14. defineOptions({
  15. name: 'Home',
  16. })
  17. // 获取屏幕边界到安全区域距离
  18. let safeAreaInsets
  19. let systemInfo
  20. // #ifdef MP-WEIXIN
  21. // 微信小程序使用新的API
  22. systemInfo = uni.getWindowInfo()
  23. safeAreaInsets = systemInfo.safeArea
  24. ? {
  25. top: systemInfo.safeArea.top,
  26. right: systemInfo.windowWidth - systemInfo.safeArea.right,
  27. bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
  28. left: systemInfo.safeArea.left,
  29. }
  30. : null
  31. // #endif
  32. // #ifndef MP-WEIXIN
  33. // 其他平台继续使用uni API
  34. systemInfo = uni.getSystemInfoSync()
  35. safeAreaInsets = systemInfo.safeAreaInsets
  36. // #endif
  37. const author = ref('菲鸽')
  38. const description = ref(
  39. 'unibest 是一个集成了多种工具和技术的 uniapp 开发模板,由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建,模板具有代码提示、自动格式化、统一配置、代码片段等功能,并内置了许多常用的基本组件和基本功能,让你编写 uniapp 拥有 best 体验。',
  40. )
  41. // 测试 uni API 自动引入
  42. onLoad(() => {
  43. console.log('项目作者:', author.value)
  44. })
  45. console.log('index')
  46. </script>
  47. <template>
  48. <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
  49. <view class="mt-10">
  50. <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
  51. </view>
  52. <view class="mt-4 text-center text-4xl text-[#d14328]">
  53. unibest
  54. </view>
  55. <view class="mb-8 mt-2 text-center text-2xl">
  56. 最好用的 uniapp 开发模板
  57. </view>
  58. <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
  59. {{ description }}
  60. </view>
  61. <view class="mt-4 text-center">
  62. 作者:
  63. <text class="text-green-500">
  64. 菲鸽
  65. </text>
  66. </view>
  67. <view class="mt-4 text-center">
  68. 官网地址:
  69. <text class="text-green-500">
  70. https://unibest.tech
  71. </text>
  72. </view>
  73. <view class="mt-6 h-1px bg-#eee" />
  74. <view class="mt-8 text-center">
  75. 当前平台是:
  76. <text class="text-green-500">
  77. {{ PLATFORM.platform }}
  78. </text>
  79. </view>
  80. <view class="mt-4 text-center">
  81. 模板分支是:
  82. <text class="text-green-500">
  83. i18n
  84. </text>
  85. </view>
  86. </view>
  87. <tabbar />
  88. </template>