feat: 页面特性

src/pages.json

@@ -89,6 +89,49 @@
           "navigationStyle": "custom"
         }
       }
+    },
+    {
+      "path": "pages/index/demo/component-auto-import",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/mp-weixin-share",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/navbar",
+      "type": "page",
+      "style": {
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/index/demo/pages-auto-import",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/pinia",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/request",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/uni-ui-icons",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/uni-ui",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/unocss-icons",
+      "type": "page"
+    },
+    {
+      "path": "pages/index/demo/unocss",
+      "type": "page"
     }
   ],
   "subPackages": []

src/pages/index/components/pages-auto-import.vue

@@ -1,6 +1,5 @@
 <template>
   <view>
-    <view>demo</view>
     <view>测试是否会自动引入到pages，发现会，除非增加exclude配置</view>
     <view>需要在vite.config.ts（注意不是pages.config.ts）中UniPages()配置exclude</view>
     <view>配置如下: </view>

src/pages/index/demo/component-auto-import.vue

@@ -0,0 +1,6 @@
+<template>
+  <view class="m-4">
+    <fly-header></fly-header>
+    <fly-content :line="30"></fly-content>
+  </view>
+</template>

src/pages/index/demo/mp-weixin-share.vue

@@ -0,0 +1,27 @@
+<template>
+  <view class="m-10 text-center">
+    <view class="text-8">微信分享页</view>
+    <view class="text-6">请在微信小程序中打开</view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+/** 激活“分享给好友” */
+onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
+  console.log('options:', options)
+  return {
+    title: '自定义分享标题',
+    path: '/pages/index/index?id=xxx',
+    imageUrl:
+      'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
+  }
+})
+/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
+onShareTimeline((): Page.ShareTimelineContent => {
+  return {
+    title: '自定义分享标题',
+    query: 'a=1&b=2',
+  }
+})
+</script>

src/pages/index/demo/navbar.vue

@@ -0,0 +1,10 @@
+<template>
+  <fly-navbar />
+  <view class="m-4"> 需要设置页面 "navigationStyle": "custom" </view>
+</template>
+
+<route lang="json5">
+{
+  style: { navigationStyle: 'custom' },
+}
+</route>

src/pages/index/demo/pages-auto-import.vue

@@ -0,0 +1,6 @@
+<template>
+  <view class="m-4">
+    <view>vite.config.ts里面没有配置exclude的都会自动导入</view>
+    <view>测试是否会自动引入到pages，发现会，成功！</view>
+  </view>
+</template>

src/pages/index/demo/pinia.vue

@@ -0,0 +1,29 @@
+<template>
+  <view class="flex justify-center items-center text-blue-500 mt-4 mb-4">
+    <view class="w-20">Count: {{ countStore.count }}</view>
+    <button class="ml-2 mr-2" @click="countStore.decrement">-1</button>
+    <button class="ml-2 mr-2" @click="countStore.increment">+1</button>
+    <button class="ml-2 mr-2" @click="countStore.reset">重置</button>
+  </view>
+  <view class="m-8 text-4 leading-8">
+    <view class="text-center">{{ userStore.userInfo }}</view>
+    <view class="text-center">请观察小程序的store，可以看到是可以正常设置的</view>
+    <button @click="setUserInfo">设置UserInfo</button>
+    <button @click="clearUserInfo" class="mt-4">清除UserInfo</button>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { useCountStore, useUserStore } from '@/store'
+
+const countStore = useCountStore()
+
+const userStore = useUserStore()
+
+const setUserInfo = () => {
+  userStore.setUserInfo({ username: 'fly', token: 'abcdef' })
+}
+const clearUserInfo = () => {
+  userStore.clearUserInfo()
+}
+</script>

src/pages/index/demo/request.vue

@@ -0,0 +1,17 @@
+<template>
+  <view>
+    <button @click="handleRequest">请求</button>
+  </view>
+</template>
+<script lang="ts" setup>
+import { http } from '@/utils/http'
+import { UserItem } from '@/typings'
+
+const handleRequest = () => {
+  const res = http<UserItem[]>({
+    url: '/getUserList',
+    method: 'GET',
+  })
+  console.log(res)
+}
+</script>

src/pages/index/demo/uni-ui-icons.vue

@@ -0,0 +1,9 @@
+<template>
+  <view class="m-4">
+    <uni-icons type="contact" size="30"></uni-icons>
+    <uni-icons type="contact" size="30" color="red"></uni-icons>
+    <view class="text-blue-300"
+      >注意在微信小程序中，不支持改颜色，即设置了颜色也会变成默认的#333</view
+    >
+  </view>
+</template>

src/pages/index/demo/uni-ui.vue

@@ -0,0 +1,6 @@
+<template>
+  <uni-card>
+    <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
+  </uni-card>
+  <uni-badge text="1"></uni-badge>
+</template>

src/pages/index/demo/unocss-icons.vue

@@ -0,0 +1,13 @@
+<template>
+  <view class="m-4">
+    <view class="mb-2">
+      这里只装了carbon的图表库，网址：
+      <a href="https://icones.js.org/collection/carbon" target="_blank"
+        >https://icones.js.org/collection/carbon </a
+      >(非H5环境，请使用浏览器打开)
+    </view>
+    <view class="i-carbon-car" />
+    <view class="i-carbon-car text-red" />
+    <button class="i-carbon-sun dark:i-carbon-moon" />
+  </view>
+</template>

src/pages/index/demo/unocss.vue

@@ -0,0 +1,8 @@
+<template>
+  <view class="flex flex-col justify-center items-center text-5 h-8 leading-8 mt-20">
+    <view class="text-green-500">文字颜色 text-light-50</view>
+    <view class="text-red-500">文字颜色 text-red-500</view>
+    <view class="bg-green-500">背景色 bg-light-50</view>
+    <view class="bg-red-500">背景色 bg-red-500</view>
+  </view>
+</template>

src/pages/index/index.vue

@@ -6,80 +6,77 @@
 </route>
 
 <template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png" />
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
+  <view class="bg-slate-100">
+    <view class="bg-slate-100 w-full">
+      <view v-for="item in list" :key="item.url" class="mt-3">
+        <view
+          class="flex bg-white items-center justify-between p-3 mb-2"
+          @click="goDetailPage(item.url)"
+        >
+          <text class="flex-1 text-5 text-dark">{{ item.name }}</text>
+          <text class="i-carbon-chevron-right"></text>
         </view>
-    <button @click="setUserInfo">设置UserInfo</button>
-    <button @click="clearUserInfo">清除UserInfo</button>
-
-    <button @click="handleRequest">请求</button>
-    <view class="flex justify-center items-center text-blue-500">
-      Demo Count: {{ countStore.count }}
-      <button class="ml-2" @click="countStore.increment">新增</button>
       </view>
-    <uni-card>
-      <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
-    </uni-card>
-    <uni-icons type="contact" size="30" color="red"></uni-icons>
-    <uni-badge text="1"></uni-badge>
-    <!-- Sun in light mode, Moon in dark mode, from Carbon -->
-    <button class="i-carbon-sun dark:i-carbon-moon text-green-300" />
-    <fly-header></fly-header>
-    <navigator url="/pages/my/index" open-type="navigate" hover-class="navigator-hover">
-      <button type="primary">跳转到“我的”页面</button>
-    </navigator>
-    <demo />
+    </view>
+    <view class="m-4">
+      <text>测试配置exclude后，还会自动导入页面吗？</text>
+      <PagesAutoImport />
+    </view>
   </view>
 </template>
 
 <script setup lang="ts" name="TestIndex">
 import { ref } from 'vue'
-import { useCountStore, useUserStore } from '@/store'
-import { http } from '@/utils/http'
-import { UserItem } from '@/typings'
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
-import Demo from './components/demo.vue'
+import PagesAutoImport from './components/pages-auto-import.vue'
 
-const countStore = useCountStore()
-const title = ref('Hello')
-
-const uniLayout = ref()
-console.log(uniLayout)
-
-const userStore = useUserStore()
-
-const setUserInfo = () => {
-  userStore.setUserInfo({ username: 'fly', token: 'abcdef' })
-}
-const clearUserInfo = () => {
-  userStore.clearUserInfo()
-}
-const handleRequest = () => {
-  const res = http<UserItem[]>({
-    url: '/getUserList',
-    method: 'GET',
+const list = ref([
+  {
+    name: 'UnoCSS',
+    url: 'unocss',
+  },
+  {
+    name: 'UnoCSS Icons',
+    url: 'unocss-icons',
+  },
+  {
+    name: 'UniUI',
+    url: 'uni-ui',
+  },
+  {
+    name: 'UniUI Icons',
+    url: 'uni-ui-icons',
+  },
+  {
+    name: 'Pinia+持久化',
+    url: 'pinia',
+  },
+  {
+    name: '微信分享',
+    url: 'mp-weixin-share',
+  },
+  {
+    name: '自定义导航栏',
+    url: 'navbar',
+  },
+  {
+    name: '自定义导航栏渐变',
+    url: 'navbar-plus',
+  },
+  {
+    name: '请求封装+请求拦截器',
+    url: 'request',
+  },
+  {
+    name: 'page自动引入',
+    url: 'pages-auto-import',
+  },
+])
+const goDetailPage = (path: string) => {
+  const url = `/pages/index/demo/${path}`
+  uni.navigateTo({
+    url,
   })
-  console.log(res)
 }
-/** 激活“分享给好友” */
-onShareAppMessage((options: Page.ShareAppMessageOption): Page.CustomShareContent => {
-  console.log('options:', options)
-  return {
-    title: '自定义分享标题',
-    path: '/pages/index/index?id=xxx',
-    imageUrl:
-      'https://cip-shopping-page-0eysug01066a9e-1302818703.tcloudbaseapp.com/pretty-girl.png',
-  }
-})
-/** 激活“分享到朋友圈”， 注意：需要先激活“分享给好友” */
-onShareTimeline((): Page.ShareTimelineContent => {
-  return {
-    title: '自定义分享标题',
-    query: 'a=1&b=2',
-  }
-})
 </script>
 
 <style>

src/store/count.ts

@@ -9,9 +9,17 @@ export const useCountStore = defineStore(
     const increment = () => {
       count.value++
     }
+    const decrement = () => {
+      count.value--
+    }
+    const reset = () => {
+      count.value = 0
+    }
     return {
       count,
+      decrement,
       increment,
+      reset,
     }
   },
   {

uni-pages.d.ts

@@ -8,19 +8,29 @@ interface NavigateToOptions {
        "pages/demo/index" |
        "pages/my/index" |
        "pages/throughout/index" |
-       "pages/throughout2/index";
+       "pages/throughout2/index" |
+       "pages/index/demo/component-auto-import" |
+       "pages/index/demo/mp-weixin-share" |
+       "pages/index/demo/navbar" |
+       "pages/index/demo/pages-auto-import" |
+       "pages/index/demo/pinia" |
+       "pages/index/demo/request" |
+       "pages/index/demo/uni-ui-icons" |
+       "pages/index/demo/uni-ui" |
+       "pages/index/demo/unocss-icons" |
+       "pages/index/demo/unocss";
 }
 interface RedirectToOptions extends NavigateToOptions {}
 
 interface SwitchTabOptions {
-  url: "pages/index/index" | "pages/throughout/index"
+  url: 'pages/index/index' | 'pages/throughout/index'
 }
 
-type ReLaunchOptions = NavigateToOptions | SwitchTabOptions;
+type ReLaunchOptions = NavigateToOptions | SwitchTabOptions
 
 declare interface Uni {
-  navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void;
-  redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void;
-  switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void;
-  reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void;
+  navigateTo(options: UniNamespace.NavigateToOptions & NavigateToOptions): void
+  redirectTo(options: UniNamespace.RedirectToOptions & RedirectToOptions): void
+  switchTab(options: UniNamespace.SwitchTabOptions & SwitchTabOptions): void
+  reLaunch(options: UniNamespace.ReLaunchOptions & ReLaunchOptions): void
 }