feat: 添加 webveiw 示例页

src/pages.json

@@ -10,21 +10,21 @@
 
         // === 示例 ===
         {
-            "path": "pages/example/mapbox/index",
+            "path": "pages/example/index",
             "style": {
-                "navigationBarTitleText": "Mapbox 地图示例"
+                "navigationBarTitleText": "示例中心"
             }
         },
         {
-            "path": "pages/example/linkedlist/index",
+            "path": "pages/example/mapbox/index",
             "style": {
-                "navigationBarTitleText": "LinkedList 大列表示例"
+                "navigationBarTitleText": "Mapbox 地图示例"
             }
         },
         {
-            "path": "pages/example/linkedlist-nvue/index",
+            "path": "pages/example/webview/index",
             "style": {
-                "navigationBarTitleText": "LinkedList 大列表示例 - NVUE"
+                "navigationBarTitleText": "Webview 示例"
             }
         },
 

src/pages/example/index.vue

 <script setup lang="ts">
+    import * as Pages from '@/utils/pages'
+
     // @unocss-include
     const data = reactive({
         items: [
@@ -8,23 +10,12 @@
                 page: '/pages/example/mapbox/index',
             },
             {
-                name: 'LinkedList 大列表示例',
-                icon: 'emojione-letter-z',
-                page: `/pages/example/linkedlist/index?multiple=true`,
-            },
-            // #ifdef APP-PLUS
-            {
-                name: 'LinkedList 大列表示例 - NVUE',
-                icon: 'emojione-letter-z',
-                page: `/pages/example/linkedlist-nvue/index?multiple=true`,
+                name: 'Webview 示例',
+                icon: 'logos-internetexplorer',
+                page: '/pages/example/webview/index',
             },
-            // #endif
         ],
     })
-
-    function goto(url: string) {
-        uni.navigateTo({ url })
-    }
 </script>
 
 <template>
@@ -38,7 +29,7 @@
                     marginTop="24"
                     v-for="(item, idx) in data.items"
                     :key="idx"
-                    @click="goto(item.page)"
+                    @click="Pages.to(item.page)"
                 >
                     <view class="fui-list__item fui-align__center">
                         <Icon :class="[`icon-${item.icon}`]" size="48" />

src/pages/example/webview/index.vue

+<script setup lang="ts">
+    const webviewStyles = reactive({
+        progress: {
+            color: '#FF3333',
+        },
+    })
+</script>
+
+<template>
+    <view>
+        <web-view :webview-styles="webviewStyles" src="https://uniapp.dcloud.io/static/web-view.html" />
+    </view>
+</template>

src/pages/index/index.vue

@@ -2,6 +2,7 @@
     import dayjs from 'dayjs'
     import { checkUpgrade } from '@/utils/upgrade'
     import { useRuntime } from '@/hooks/app/useRuntime'
+    import * as Pages from '@/utils/pages'
 
     const { app } = useRuntime()
     const year = ref(dayjs().year())
@@ -23,17 +24,6 @@
         Message.toast(`在手机上运行点击有惊喜~ ╰(*°▽°*)╯`)
         // #endif
     }
-
-    const animate = ref()
-    function handUp() {
-        if (animate.value) {
-            return
-        }
-
-        Message.toast('👋🏻')
-        animate.value = 'animate-swing'
-        setTimeout(() => (animate.value = null), 1500)
-    }
 </script>
 
 <template>
@@ -53,7 +43,10 @@
 
             <fui-divider />
 
-            <uni-icons type="hand-up" size="30" :class="[animate]" @click="handUp" />
+            <fui-button type="link" size="large" @click="Pages.to('/pages/example/index')">
+                <Icon icon="material-symbols:arrow-right-alt" size="48" color="gray" class="mr-1" />
+                <text class="color-gray">Examples</text>
+            </fui-button>
         </view>
         <fui-footer isFixed>
             <template #text>

src/utils/pages.ts

+export function to(url: string): void {
+    uni.navigateTo({
+        url,
+    })
+}

unocss.config.ts

@@ -20,7 +20,7 @@ const transformRules = {
     '=': '_eqe_',
 }
 
-const ICONS = ['emojione:globe-showing-europe-africa', 'emojione:letter-z']
+const ICONS = ['emojione:globe-showing-europe-africa', 'logos:internetexplorer', 'emojione:letter-z']
 
 export default defineConfig({
     presets: [