wechat_nuxt_001

2026-08-08 19:49:56 +08:00
commit a9b228510e
20 changed files with 5885 additions and 0 deletions
@@ -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>
@@ -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;
+}
@@ -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>
@@ -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>
@@ -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;
+}
+
@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <slot/>
+    </div>
+</template>
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+</script>
+<template>
+    <div>
+        xiaozizi布局
+        <slot/>
+    </div>
+</template>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -0,0 +1,12 @@
+import {defineStore} from "pinia";
+
+// 注册插件111111111111
+export const useMainXiaoStore = defineStore("counter", () => {
+    let someState = ref("222222");
+    return {someState};
+}, {
+    persist: {
+        pick: ["someState"]
+    }
+});
+