first commit

2024-12-26 16:41:17 +08:00
commit f8abb65023
101 changed files with 15618 additions and 0 deletions
@@ -0,0 +1,45 @@
+<route lang="json5">
+{
+  style: {
+    navigationBarTitleText: '关于',
+  },
+}
+</route>
+
+<template>
+  <view
+    class="bg-white overflow-hidden pt-2 px-4"
+    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
+  >
+    <view class="text-center text-3xl mt-8">
+      鸽友们好，我是
+      <text class="text-red-500">菲鸽</text>
+    </view>
+    <view class="text-center mt-8 text-#fff">
+      <wd-button type="success" @click="gotoPage('i18n')">进入多语言页面</wd-button>
+    </view>
+    <RequestComp />
+    <UploadComp />
+  </view>
+</template>
+
+<script lang="ts" setup>
+import RequestComp from './components/request.vue'
+import UploadComp from './components/upload.vue'
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+const gotoPage = (path) => {
+  uni.navigateTo({
+    url: `/pages/about/${path}`,
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.test-css {
+  // mt-4=>1rem=>16px;
+  margin-top: 16px;
+}
+</style>
@@ -0,0 +1,56 @@
+<route lang="json5">
+{
+  layout: 'demo',
+  style: {
+    navigationBarTitleText: '请求',
+  },
+}
+</route>
+
+<template>
+  <view class="p-6 text-center">
+    <view class="my-2">使用的是 laf 云后台</view>
+    <view class="text-green-400">我的推荐码，可以获得佣金</view>
+
+    <!-- #ifdef H5 -->
+    <view class="my-2">
+      <a class="my-2" :href="recommendUrl" target="_blank">{{ recommendUrl }}</a>
+    </view>
+    <!-- #endif -->
+
+    <!-- #ifndef H5 -->
+    <view class="my-2 text-left text-sm">{{ recommendUrl }}</view>
+    <!-- #endif -->
+
+    <!-- http://localhost:9000/#/pages/index/request -->
+    <wd-button @click="run" class="my-6">发送请求</wd-button>
+    <view class="h-12">
+      <view v-if="loading">loading...</view>
+      <block v-else>
+        <view class="text-xl">请求数据如下</view>
+        <view class="text-green leading-8">{{ JSON.stringify(data) }}</view>
+      </block>
+    </view>
+    <wd-button type="error" @click="reset" class="my-6" :disabled="!data">重置数据</wd-button>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { getFooAPI, postFooAPI, IFooItem } from '@/service/index/foo'
+
+const recommendUrl = ref('http://laf.run/signup?code=ohaOgIX')
+
+// const initialData = {
+//   name: 'initialData',
+//   id: '1234',
+// }
+const initialData = undefined
+// 适合少部分全局性的接口————多个页面都需要的请求接口，额外编写一个 Service 层
+const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
+  immediate: true,
+  initialData,
+})
+const reset = () => {
+  data.value = initialData
+}
+</script>
@@ -0,0 +1,30 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationBarTitleText: '上传-状态一体化',
+  },
+}
+</route>
+
+<template>
+  <view class="p-4 text-center">
+    <wd-button @click="run">选择图片并上传</wd-button>
+    <view v-if="loading" class="text-blue h-10">上传...</view>
+    <template v-else>
+      <view class="m-2">上传后返回的接口数据：</view>
+      <view class="m-2">{{ data }}</view>
+      <view class="h-80 w-full">
+        <image v-if="data" :src="data || data" mode="scaleToFill" />
+      </view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts" setup>
+const { loading, data, run } = useUpload({ user: '菲鸽' })
+</script>
+
+<style lang="scss" scoped>
+//
+</style>
@@ -0,0 +1,97 @@
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "%app.name%"
+  }
+}
+</route>
+
+<template>
+  <view class="center flex-col mt-6">
+    <view class="text-red-500 p-4 leading-6">
+      经过我的测试发现，小程序里面会有2处BUG：
+      <view>
+        <text class="line-through">1. 页面标题多语言不生效</text>
+        <text class="ml-2 text-green-500">已解决</text>
+      </view>
+      <view>
+        <text class="line-through">2. 多语言传递的参数不生效，如下 heavy</text>
+        <text class="ml-2 text-green-500">已解决</text>
+        <view class="ml-2 text-green-500">把 $t 改为自定义的 t 即可</view>
+      </view>
+    </view>
+    <view class="text-green-500">多语言测试</view>
+    <view class="m-4">{{ $t('app.name') }}</view>
+    <view class="m-4">{{ $t('weight', { heavy: 100 }) }}</view>
+    <view class="m-4">{{ t('introduction', user) }}</view>
+
+    <view class="text-green-500 mt-12">切换语言</view>
+    <view class="uni-list">
+      <radio-group @change="radioChange" class="radio-group">
+        <label class="uni-list-cell uni-list-cell-pd" v-for="item in languages" :key="item.value">
+          <view>
+            <radio :value="item.value" :checked="item.value === current" />
+          </view>
+          <view>{{ item.name }}</view>
+        </label>
+      </radio-group>
+    </view>
+
+    <!-- http://localhost:9000/#/pages/index/i18n -->
+    <button @click="testI18n" class="mt-20 mb-44">测试弹窗</button>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import i18n, { t } from '@/locale/index'
+import { testI18n } from '@/utils/i18n'
+
+const current = ref(uni.getLocale())
+const user = { name: '张三', detail: { height: 178, weight: '75kg' } }
+const languages = [
+  {
+    value: 'zh-Hans',
+    name: '中文',
+    checked: 'true',
+  },
+  {
+    value: 'en',
+    name: '英文',
+  },
+]
+
+const radioChange = (evt) => {
+  // console.log(evt)
+  current.value = evt.detail.value
+  // 下面2句缺一不可！！！
+  uni.setLocale(evt.detail.value)
+  i18n.global.locale = evt.detail.value
+}
+</script>
+
+<style lang="scss">
+.uni-list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background-color: #fff;
+  border-radius: 12px;
+}
+
+.radio-group {
+  width: 200px;
+  margin: 10px auto;
+  border-radius: 12px;
+}
+
+.uni-list-cell {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #bcecd1;
+}
+</style>
@@ -0,0 +1,57 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
+<route lang="json5" type="home">
+{
+  style: {
+    navigationStyle: 'custom',
+    navigationBarTitleText: '首页',
+  },
+}
+</route>
+<template>
+  <view
+    class="bg-white overflow-hidden pt-2 px-4"
+    :style="{ marginTop: safeAreaInsets?.top + 'px' }"
+  >
+    <view class="mt-12">
+      <image src="/static/logo.svg" alt="" class="w-28 h-28 block mx-auto" />
+    </view>
+    <view class="text-center text-4xl main-title-color mt-4">unibest</view>
+    <view class="text-center text-2xl mt-2 mb-8">最好用的 uniapp 开发模板</view>
+
+    <view class="text-justify max-w-100 m-auto text-4 indent mb-2">{{ description }}</view>
+    <view class="text-center mt-8">
+      当前平台是：
+      <text class="text-green-500">{{ PLATFORM.platform }}</text>
+    </view>
+    <view class="text-center mt-4">
+      模板分支是：
+      <text class="text-green-500">i18n</text>
+    </view>
+  </view>
+  <tabbar />
+</template>
+
+<script lang="ts" setup>
+import PLATFORM from '@/utils/platform'
+
+defineOptions({
+  name: 'Home',
+})
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+const author = ref('菲鸽')
+const description = ref(
+  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
+)
+// 测试 uni API 自动引入
+onLoad(() => {
+  console.log(author)
+})
+</script>
+
+<style>
+.main-title-color {
+  color: #d14328;
+}
+</style>