初始化仓库
This commit is contained in:
wangxiaowei
84
src/pages/about/about.vue
Normal file
84
src/pages/about/about.vue
Normal file
@ -0,0 +1,84 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import RequestComp from './components/request.vue'
|
||||
|
||||
// 奇怪：同样的代码放在 vue 里面不会校验到错误，放在 .ts 文件里面会校验到错误
|
||||
// const testOxlint = (name: string) => {
|
||||
// console.log('oxlint')
|
||||
// }
|
||||
// testOxlint('oxlint')
|
||||
console.log('about')
|
||||
|
||||
function gotoAlova() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/alova',
|
||||
})
|
||||
}
|
||||
function gotoVueQuery() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/about/vue-query',
|
||||
})
|
||||
}
|
||||
function gotoSubPage() {
|
||||
uni.navigateTo({
|
||||
url: '/pages-sub/demo/index',
|
||||
})
|
||||
}
|
||||
// uniLayout里面的变量通过 expose 暴露出来后可以在 onReady 钩子获取到（onLoad 钩子不行）
|
||||
const uniLayout = ref()
|
||||
onLoad(() => {
|
||||
console.log('onLoad:', uniLayout.value) // onLoad: undefined
|
||||
})
|
||||
onReady(() => {
|
||||
console.log('onReady:', uniLayout.value) // onReady: Proxy(Object)
|
||||
console.log('onReady:', uniLayout.value.testUniLayoutExposedData) // onReady: testUniLayoutExposedData
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="mt-8 text-center text-xl text-gray-400">
|
||||
组件使用、请求调用、unocss
|
||||
</view>
|
||||
<RequestComp />
|
||||
<view class="mb-6 h-1px bg-#eee" />
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoAlova">
|
||||
前往 alova 示例页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoVueQuery">
|
||||
vue-query 示例页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="gotoSubPage">
|
||||
前往分包页面
|
||||
</button>
|
||||
</view>
|
||||
<view class="mt-6 text-center text-sm">
|
||||
<view class="inline-block w-80% text-gray-400">
|
||||
为了方便脚手架动态生成不同UI模板，本页的按钮统一使用UI库无关的原生button
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.test-css {
|
||||
// 16rpx=>0.5rem
|
||||
padding-bottom: 16rpx;
|
||||
// mt-4=>1rem=>16px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
56
src/pages/about/alova.vue
Normal file
56
src/pages/about/alova.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Alova 请求演示"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRequest } from 'alova/client'
|
||||
import { foo } from '@/api/foo-alova'
|
||||
|
||||
const initialData = undefined
|
||||
|
||||
const { loading, data, send } = useRequest(foo, {
|
||||
initialData,
|
||||
immediate: true,
|
||||
})
|
||||
console.log(data)
|
||||
function reset() {
|
||||
data.value = initialData
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
|
||||
发送请求
|
||||
</button>
|
||||
<view class="h-16">
|
||||
<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 class="text-red">
|
||||
{{ data?.id }}
|
||||
</view>
|
||||
</view>
|
||||
<button type="default" size="mini" class="my-6 w-160px" @click="reset">
|
||||
重置数据
|
||||
</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
54
src/pages/about/components/request.vue
Normal file
54
src/pages/about/components/request.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script lang="ts" setup>
|
||||
import type { IFooItem } from '@/api/foo'
|
||||
import { getFooAPI } from '@/api/foo'
|
||||
|
||||
// const initialData = {
|
||||
// name: 'initialData',
|
||||
// id: '1234',
|
||||
// }
|
||||
const initialData = undefined
|
||||
|
||||
const { loading, error, data, run } = useRequest<IFooItem>(() => getFooAPI('菲鸽'), {
|
||||
immediate: true,
|
||||
initialData,
|
||||
})
|
||||
|
||||
function reset() {
|
||||
data.value = initialData
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<view class="my-2">
|
||||
pages 里面的 vue 文件会扫描成页面，将自动添加到 pages.json 里面。
|
||||
</view>
|
||||
<view class="my-2 text-green-400">
|
||||
但是 pages/components 里面的 vue 不会。
|
||||
</view>
|
||||
|
||||
<view class="my-4 text-center">
|
||||
<button type="primary" size="mini" class="w-160px" @click="run">
|
||||
发送请求
|
||||
</button>
|
||||
</view>
|
||||
<view class="h-16">
|
||||
<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>
|
||||
<view class="my-4 text-center">
|
||||
<button type="warn" size="mini" class="w-160px" :disabled="!data" @click="reset">
|
||||
重置数据
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
53
src/pages/about/vue-query.vue
Normal file
53
src/pages/about/vue-query.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<route lang="jsonc" type="page">
|
||||
{
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": "Vue Query 请求演示"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useQuery } from '@tanstack/vue-query'
|
||||
import { foo } from '@/api/foo'
|
||||
import { getFooQueryOptions } from '@/api/foo-vue-query'
|
||||
|
||||
// 简单使用
|
||||
onShow(async () => {
|
||||
const res = await foo()
|
||||
console.log('res: ', res)
|
||||
})
|
||||
|
||||
// vue-query 版
|
||||
const {
|
||||
data,
|
||||
error,
|
||||
isLoading: loading,
|
||||
refetch: send,
|
||||
} = useQuery(getFooQueryOptions('菲鸽-vue-query'))
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="p-6 text-center">
|
||||
<button type="primary" size="mini" class="my-6 w-160px" @click="send">
|
||||
发送请求
|
||||
</button>
|
||||
<view class="h-16">
|
||||
<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>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
122
src/pages/index/index.vue
Normal file
122
src/pages/index/index.vue
Normal file
@ -0,0 +1,122 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
|
||||
<route lang="jsonc" type="home">
|
||||
{
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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>
|
||||
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="mt-4 text-center">
|
||||
<a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
|
||||
新手请看必看章节1：
|
||||
</a>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mt-4 text-center">
|
||||
新手请看必看章节1：
|
||||
<text class="text-green-500">
|
||||
https://unibest.tech/base/3-plugin
|
||||
</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef H5 -->
|
||||
<view class="mt-4 text-center">
|
||||
<a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
|
||||
新手请看必看章节2：
|
||||
</a>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef MP-WEIXIN -->
|
||||
<view class="mt-4 text-center">
|
||||
新手请看必看章节2：
|
||||
<text class="text-green-500">
|
||||
https://unibest.tech/base/14-faq
|
||||
</text>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<view class="mt-4 text-center">
|
||||
<wd-button type="primary">
|
||||
UI组件按钮
|
||||
</wd-button>
|
||||
</view>
|
||||
<view class="mt-4 text-center">
|
||||
UI组件官网：<text class="text-green-500">
|
||||
https://wot-design-uni.cn
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
Reference in New Issue
Block a user