wechat_nuxt_001

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app/app.vue

@@ -0,0 +1,20 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage/>
+    </NuxtLayout>
+</template>
+<script setup lang="ts">
+    import "core-js";
+    import "element-plus/theme-chalk/dark/css-vars.css";
+
+
+    useHead({
+        title: "江苏六果",
+        script: [
+            {src: "https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js", type: "text/javascript"},
+        ],
+    });
+    onMounted(() => {
+        // navigateTo({name: "home"});
+    });
+</script>

app/assets/main.css

@@ -0,0 +1,53 @@
+html, body {
+    overflow: hidden;
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    /*width: 100vw;*/
+    word-break: break-all; /* 强制在任何字符处换行 */
+    /* 或者用 overflow-wrap: break-word; 效果类似但更智能 */
+    overflow-wrap: break-word;
+}
+
+/* 默认：浅色主题 这里定义的是变量 */
+:root {
+    --bg: #ffffff;
+    --text: #333333;
+    --primary: #1677ff;
+}
+
+body {
+    /*background: var(--bg);*/
+    /*color: var(--text);*/
+}
+
+html.dark {
+    /* 自定义深色背景颜色 */
+    --el-bg-color: #626aef;
+}
+
+/* 暗色主题：用户系统开启暗黑模式时生效 */
+/*@media (prefers-color-scheme: dark) {*/
+/*    :root {*/
+/*        --bg: #1a1a2e;*/
+/*        --text: #eaeaea;*/
+/*        --primary: #6ca6ff;*/
+/*    }*/
+/*}*/
+
+
+#__nuxt {
+    height: -webkit-fill-available;
+    height: calc(
+            100vh
+            - env(safe-area-inset-top)
+            - env(safe-area-inset-bottom)
+    );
+    overflow-y: auto;
+    overscroll-behavior-y: none;
+    -webkit-overflow-scrolling: touch;
+    /*border: #a855f7 1px dashed;*/
+    box-sizing: border-box;
+}

app/components/xiao-zizi.vue

@@ -0,0 +1,24 @@
+<style lang="scss" scoped>
+    div.root-home {
+        border: #a855f7 1px dashed;
+    }
+</style>
+
+<template>
+    <div class="root-home">子组件</div>
+</template>
+<script setup lang="ts">
+    // defineOptions({name: "zhong"});
+    import {useVModel} from "@vueuse/core";
+
+    interface definePropsType {
+       modelValue: number;// 对象类型的 prop
+    }
+
+    // 2. 使用 withDefaults 定义默认值
+    const props = withDefaults(defineProps<definePropsType>(), {});
+    const emit = defineEmits<{
+       (eventName: "update:modelValue", value: string): void
+    }>();
+    let data = useVModel(props, "modelValue", emit);
+</script>

app/components/通用组件.vue

@@ -0,0 +1,11 @@
+<style lang="scss" scoped>
+    div.root-home {
+    }
+</style>
+
+<template>
+    <div class="root-home">通用组件</div>
+</template>
+<script setup lang="ts">
+    defineOptions({name: "demo-xiao-zizi"});
+</script>

app/composables/useWeChat.ts

@@ -0,0 +1,49 @@
+// 创建一个响应式状态并设置默认值
+import type {SignatureData} from "@wecom/jssdk";
+
+
+import * as ww from "@wecom/jssdk";
+
+type 接口回调数据类型 = {}
+export const wechat_auth = async (): Promise<void> => {
+    if (ww.env.isWeChat) {
+        ww.register({
+            corpId: "wx654fffabd4b1f5cf",
+            jsApiList: ["chooseImage"],
+            getConfigSignature: async (url): Promise<SignatureData> => {
+                return await $fetch<SignatureData>(
+                    "https://six.sixgou.com/wechat/auth/signature/",
+                    {method: "post", body: {url}});
+            },
+            onConfigSuccess: async (e) => {
+                console.log("config 成功回调", e);
+            },
+            onConfigFail: async (e) => {
+                console.log("config 失败回调", e);
+            },
+            onConfigComplete: async (e) => {
+                console.log("config 完成回调", e);
+            },
+        });
+    }
+};
+
+export function wechat_完速的请求链接(params: {
+    appid?: string; redirectUri?: string; scope?: string; state?: string; agentid?: string;
+}): string {
+    const url = new URL("https://open.weixin.qq.com/connect/oauth2/authorize");
+    url.searchParams.set("appid", params.appid ?? "wx654fffabd4b1f5cf"); // 测试账号的🆔
+    // url.searchParams.set("appid", params.appid ?? "wwbe6369dc26a9d83a"); // 企业微信号 🆔
+    // url.searchParams.set("appid", params.appid ?? "wwbe6369dc26a9d83a"); // 服务号 🆔
+    url.searchParams.set("redirect_uri", params.redirectUri ?? "https://xiao.sixgou.com/wechat/auth/get_code/");
+    url.searchParams.set("scope", params.scope ?? "snsapi_userinfo");
+    url.searchParams.set("response_type", "code");
+    url.searchParams.set("state", params.state ?? "state");
+    if (params.agentid) {
+        url.searchParams.set("agentid", params.agentid); // 这里的值是 100025(元宝零售)
+    }
+    // 注意：微信要求 #wechat_redirect（单个 #），而非 ##
+    url.hash = "wechat_redirect";
+    return url.href;
+}
+

app/layouts/default.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <slot/>
+    </div>
+</template>

app/layouts/xiaozizi.vue

@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+<template>
+    <div>
+        xiaozizi布局
+        <slot/>
+    </div>
+</template>

app/pages/home/[name].vue

@@ -0,0 +1,20 @@
+<style lang="scss" scoped>
+    div.root-home {
+    }
+</style>
+
+<template>
+    <div class="root-home">
+        <div>
+            {{ useRequestURL().href }}
+        </div>
+        <div>
+            {{ useRequestURL().origin }}
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    // defineOptions({name: "zhong"});
+    import {ref} from "vue";
+
+</script>

app/pages/home/index.vue

@@ -0,0 +1,52 @@
+<style lang="scss" scoped>
+    div.root-home {
+        .div-grid {
+            width: 500px;
+            height: 500px;
+            display: grid;
+            border: #a855f7 1px dashed;
+            grid-template-columns: repeat(3, 100px);
+            grid-template-rows: repeat(3, 100px);
+            justify-content: flex-end;
+            justify-items: flex-start;
+            align-content: space-between;
+            align-items: center;
+
+            .grid-item {
+                border: #a855f7 1px dashed;
+                width: 50px;
+                height: 50px;
+            }
+        }
+    }
+</style>
+
+<template>
+    <div class="root-home">
+        <div class="div-grid">
+            <div class="grid-item">a</div>
+            <div class="grid-item">b</div>
+            <div class="grid-item">c</div>
+            <div class="grid-item">a</div>
+            <div class="grid-item">b</div>
+            <div class="grid-item">c</div>
+            <div class="grid-item">a</div>
+            <div class="grid-item">b</div>
+            <div class="grid-item">c</div>
+        </div>
+    </div>
+</template>
+<script setup lang="ts">
+    import {ref} from "vue";
+
+    defineOptions({name: "home"});
+    const demoFunc = async (): Promise<void> => {
+        nestedObject.value = nestedObject.value + "000";
+    };
+    let nestedObject = ref("222222222");
+    watchDeep(nestedObject, (updated) => {
+        // 这个对象,不管多少层,只要有一个值发生了变化就返回变化的完整的对象
+        console.log(updated);
+    },);
+
+</script>

app/pages/index.vue

@@ -0,0 +1,35 @@
+<style lang="scss" scoped>
+    div.root-home {
+        width: 100%;
+    }
+</style>
+
+<template>
+    <div class="root-home">
+        <div>这里是首页了吗?是的,这里是首页,已经在页面上显示了</div>
+        <div>
+            <el-button @click="websockted发送消息" type="danger">websockted发送消息</el-button>
+        </div>
+        <xiao-zizi v-model:modelValue="data_msg"></xiao-zizi>
+
+    </div>
+</template>
+<script setup lang="ts">
+    import {useWebSocket} from "@vueuse/core";
+    import XiaoZizi from "~/components/xiao-zizi.vue";
+
+    let data_msg = ref(1);
+    const counter = useState("counter", () => 0);
+    const {data, send, close} = useWebSocket("wss://six.sixgou.com/room/xiaozizi/", {
+        onMessage(_ws, event) {
+            console.log("Message:", event.data, typeof event.data);
+            console.log(JSON.parse(event.data));
+        },
+    });
+    const websockted发送消息 = async (): Promise<void> => {
+        send("websockted");
+    };
+    onUnmounted(() => {
+        // close();//关闭连接,消除实例
+    });
+</script>

app/pages/商品页面/index.vue

@@ -0,0 +1,14 @@
+<style lang="scss" scoped>
+    div.root-home {
+    }
+</style>
+
+<template>
+    <div class="root-home">商品页面</div>
+</template>
+<script setup lang="ts">
+    defineOptions({name: "goods"});
+    definePageMeta({
+        layout: "xiaozizi" // 使用 xiaozizi 的布局
+    });
+</script>

app/stores/index.ts

@@ -0,0 +1,12 @@
+import {defineStore} from "pinia";
+
+// 注册插件111111111111
+export const useMainXiaoStore = defineStore("counter", () => {
+    let someState = ref("222222");
+    return {someState};
+}, {
+    persist: {
+        pick: ["someState"]
+    }
+});
+

nuxt.config.ts

@@ -0,0 +1,46 @@
+// // https://nuxt.com/docs/api/configuration/nuxt-config
+// export default defineNuxtConfig({
+//   compatibilityDate: '2025-07-15',
+//   devtools: { enabled: true }
+// })
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+    compatibilityDate: "2025-07-15",
+    devtools: {enabled: false},
+    modules: [
+        "@element-plus/nuxt", "@vueuse/nuxt", "@pinia/nuxt",
+        "pinia-plugin-persistedstate/nuxt",
+    ],
+    piniaPluginPersistedstate: {
+        storage: "localStorage"
+    },
+    elementPlus: {themes: ["dark"], importStyle: "scss", globalConfig: {size: "default"}, components: ["ElSubMenu"]},
+    vite: {
+        server: {
+            allowedHosts: ["wechat.sixgou.com",]
+        },
+    },
+    css: ["~/assets/main.css"],
+    devServer: {
+        host: "0.0.0.0", port: 3000
+    },
+    app: {
+        head: {
+            htmlAttrs: {class: "dark"},
+            meta: [
+                {
+                    name: "viewport",
+                    content: "width=device-width,\n" +
+                        "initial-scale=1,\n" +
+                        "viewport-fit=cover,\n" +
+                        "interactive-widget=resizes-visual" // 关键配置
+                }
+            ],
+            script: [
+                {
+                    src: "//at.alicdn.com/t/c/font_5198345_wkrp5t5dyz.js"
+                },
+            ]
+        }
+    }
+});

package.json

@@ -0,0 +1,30 @@
+{
+    "name": "wechat_nuxt",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare"
+    },
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.3.2",
+        "@element-plus/nuxt": "^1.1.5",
+        "@pinia/nuxt": "^0.11.3",
+        "@vueuse/core": "^14.3.0",
+        "@vueuse/nuxt": "^14.3.0",
+        "@wecom/jssdk": "^2.4.2",
+        "core-js": "^3.49.0",
+        "element-plus": "^2.14.2",
+        "nuxt": "^4.4.8",
+        "pinia": "^3.0.4",
+        "pinia-plugin-persistedstate": "^4.7.1",
+        "vue": "^3.5.38",
+        "vue-router": "^5.1.0"
+    },
+    "devDependencies": {
+        "sass-embedded": "^1.100.0"
+    }
+}

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

tsconfig.json

@@ -0,0 +1,18 @@
+{
+    // https://nuxt.com/docs/guide/concepts/typescript
+    "files": [],
+    "references": [
+        {
+            "path": "./.nuxt/tsconfig.app.json"
+        },
+        {
+            "path": "./.nuxt/tsconfig.server.json"
+        },
+        {
+            "path": "./.nuxt/tsconfig.shared.json"
+        },
+        {
+            "path": "./.nuxt/tsconfig.node.json"
+        }
+    ]
+}