### Using the setup Method with createApp Object Configuration in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/createApp - 🔥 ✨.md

This example illustrates the enhanced `createApp` functionality where the default object configuration now includes a `setup` method. Similar to the function argument, the `setup` method receives `LaunchShowOption` and allows for initialization logic, returning an object for property binding to the App instance.

```ts
import { createApp, ref } from '@52css/mp-vue3'


createApp({
  setup(option: WechatMiniprogram.App.LaunchShowOption) {
    console.log("🚀 ~ setup ~ option:", option)

    // 返回给 this[key] = value 绑定
    return {}
  }
})
```

--------------------------------

### Defining Page with Setup Method and Query Type Conversion in mp-vue3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/definePage - 🔥 ✨.md

This example illustrates defining a page using an object with a `setup` method, which is an extension to the default `definePage` behavior. It introduces the `queries` option for defining expected URL parameter types, enabling automatic conversion for `Boolean`, `Number`, `Object`, and `Array` types. Reactive data and methods are managed within `setup` and returned.

```TypeScript
import { definePage, ref, PropType } from '@52css/mp-vue3'

type User = {
  id: number;
  name: string;
}

definePage({
  // 如果这里定义了
  queries: {
    name: String, // 类型不处理
    a: Boolean, // 类型 Boolean 转换
    b: Number, // 类型 Number 转换
    user: Object as PropType<User>, // 类型 JSON.parse(decodeURIComponent(val)) 转换
    userList: Array as PropType<User[]>, // 类型 JSON.parse(decodeURIComponent(val)) 转换
  },
  setup(query) {
    // 原始类型 name=vendor&a=&b=123&user=%7B%22id%22%3A1%2C%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%7D&userList=%5B%7B%22id%22%3A1%2C%22name%22%3A%22%E5%BC%A0%E4%B8%89%22%7D%5D
    console.log("🚀 ~ setup ~ query:", query) // 转换类型 {name: "vendor", a: false, b: 123, user: {id: 1, name: '张三'}, userList: [{id: 1, name: '张三'}]}
    const count = ref(0)
    const onIncrease = () => {
      count.value++; // 数据变更，自动响应 this.data.count
    }

    // 所有的数据和方法需要返回
    return {
      count,
      onIncrease
    }
  }
})
```

--------------------------------

### Making GET Requests in mp-vue3 Page (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/请求 Request/request.md

This snippet illustrates how to use the `request` utility within a `definePage` setup function to perform a GET request. It shows a basic example of fetching user information from 'user/info' and logging the response to the console.

```TypeScript
import { definePage, request } from '@52css/mp-vue3'


definePage({
  queries: {
  },
  setup(query) {
    request.get('user/info').then(res => {
      console.log("🚀 ~ request.get ~ res:", res)
    })

    return {
    }
  }
})
```

--------------------------------

### Page Template for storeToRefs Example (WXML)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/storeToRefs.md

This WXML snippet provides the template structure for a Mini Program page, demonstrating how to bind UI elements to the reactive `count` property and the `increment`, `decrement`, and `asyncIncrement` methods exposed by the `definePage` setup. It allows users to interact with the counter directly from the page.

```HTML
<button bind:tap="decrement">-</button>
<button>{{ count }}</button>
<button bind:tap="increment">+</button>
<button bind:tap="asyncIncrement">++</button>
```

--------------------------------

### Initializing Pinia in mp-vue3 app.ts (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/createPinia.md

This snippet demonstrates how to initialize Pinia in an `mp-vue3` application's `app.ts` file. It shows the creation of a Pinia instance and its manual installation within the `setup` function, which serves as the `onLaunch` equivalent for `mp-vue3` applications.

```TypeScript
import { createApp, createPinia } from "@52css/mp-vue3";

const pinia = createPinia();

// app.ts
createApp({
  globalData: {},
  setup() {
    // 由于这里没有自动install环境，需要onLaunch手动install
    pinia.install();

    return {};
  }
});
```

--------------------------------

### Defining Component with Object API and Setup Method in mp-vue3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/defineComponent - 🔥 ✨.md

This example illustrates defining a component using the object-based API with an enhanced `setup` method. It demonstrates `properties` for prop definition with type inference (including `PropType` for complex types) and `emits` for event declaration. The `setup` method provides access to the component instance (`this`), reactive props, and an `emit` function for triggering events, along with `watch` support for prop changes.

```TypeScript
import { defineComponent, ref, PropType } from '@52css/mp-vue3'

type User = {
  id: number;
  name: string;
}

defineComponent({
  properties: {
    // 普通类型
    name: String,
    border: {
      type: Boolean,
      optionalTypes: [String],
      value: "12", // 类型 string | number; 有value根据`type` 和 `optionalTypes`推导对应类型
    },
    user: Object as PropType<User>,
    userList: Array as PropType<User[]>,
  },
  emits: {
    change: (_value: string | number) => true,
    test: () => true,
  },
  setup(props, { emit }) {
    console.log("🚀 ~ setup ~ this:", this); // 自动获取当前实例
    console.log("🚀 ~ setup ~ props:", props); // 转换成 shallowReactive(this.properties) 这样可以watch
    const count = ref(0)
    const onIncrease = () => {
      count.value++; // 数据变更，自动响应 this.data.count
      // 根据 options.emits 推导 emit
      emit('change', count.value) // 相当于调用 this.triggerEvent('change', {value: count.value})
      emit("test");
    }

    watch(
      () => props.name,
      (newVal) => {
        console.log("🚀 ~ watch ~ newVal:", newVal);
      }
    );

    // 所有的数据和方法需要返回
    return {
      count,
      onIncrease
    }
  }
})
```

--------------------------------

### Creating mp-vue3 App Instance (sfa)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Generates a basic `createApp` structure for an mp-vue3 application, including a `setup` function with `LaunchShowOption` for app lifecycle handling.

```TypeScript
import { createApp } from "@52css/mp-vue3";

createApp({
  setup(option: WechatMiniprogram.App.LaunchShowOption) {
    return {
    };
  },
});

```

--------------------------------

### Component Template for storeToRefs Example (WXML)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/storeToRefs.md

This WXML snippet defines the template for a Mini Program component, showcasing how to display the reactive `count` property and trigger the `increment`, `decrement`, and `asyncIncrement` methods. This template is designed to work with the component logic defined using `defineComponent` and `storeToRefs`.

```HTML
<button bind:tap="decrement">-</button>
<button>{{ count }}</button>
<button bind:tap="increment">+</button>
<button bind:tap="asyncIncrement">++</button>
```

--------------------------------

### Defining Page with 'this' in @52css/mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/this.md

This example illustrates the usage of `this` within the `setup` function when defining a page using `definePage` in `@52css/mp-vue3`. It logs the page instance, indicating `this` refers to the current page context.

```TypeScript
import { definePage } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    console.log("🚀 ~ definePage ~ instance:", this)
  }
});
```

--------------------------------

### Initializing App with 'this' in @52css/mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/this.md

This snippet demonstrates how `this` is accessible within the `setup` function of `createApp` in `@52css/mp-vue3`. It logs the current instance, showing that `this` refers to the application instance in this context.

```TypeScript
import { createApp } from '@52css/mp-vue3'

createApp({
  setup() {
    console.log("🚀 ~ createApp ~ instance:", this)
  }
});
```

--------------------------------

### Initializing App with onLaunch Hook in Vue 3 Mini-Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onLaunch.md

This snippet demonstrates how to use the `onLaunch` lifecycle hook within a Vue 3 mini-program application created with `@52css/mp-vue3`. It logs the `option` object, which contains launch details, to the console when the application starts. This allows developers to access initial launch parameters.

```TypeScript
import { createApp, onLaunch } from '@52css/mp-vue3'

createApp({
  setup() {
    onLaunch((option: WechatMiniprogram.App.LaunchShowOption) => {
      console.log("🚀 ~ onLaunch ~ option:", option)
    })
  }
});
```

--------------------------------

### Using storeToRefs in a Component (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/storeToRefs.md

This TypeScript snippet illustrates the usage of `storeToRefs` within a `defineComponent` setup function, similar to page usage. It enables destructuring reactive state from a Pinia store for use within a Mini Program component, ensuring reactivity is preserved. The component also exposes methods for state manipulation.

```TypeScript
import { defineComponent, storeToRefs } from "@52css/mp-vue3";
import { useCounterStore } from "../../../../store/counter";

defineComponent({
  properties: {
    xClass: String
  },
  setup() {
    const counterStore = useCounterStore();
    const { count } = storeToRefs(counterStore);
    console.log("🚀 ~ defineComponent ~ setup ~ count:", count);

    return {
      count,
      increment() {
        counterStore.increment();
      },
      decrement() {
        counterStore.decrement();
      },
      asyncIncrement() {
        counterStore.asyncIncrement();
      }
    };
  }
});
```

--------------------------------

### Adding Local Storage Persistence to a Store in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/defineStore - 🔥 ✨.md

This snippet extends the `defineStore` example by adding a `persist` option as the third parameter. This configuration ensures that the `count` state is automatically saved to and loaded from local storage, making the state persistent across browser sessions or application restarts.

```ts
import { ref, defineStore } from "@52css/mp-vue3";

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  function decrement() {
    count.value--;
  }

  function asyncIncrement() {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        count.value++;
        resolve();
      }, 1000);
    });
  }

  return {
    count,
    increment,
    asyncIncrement,
    decrement,
  };
}, {
  persist: ['count']
});
```

--------------------------------

### Basic onShow Usage with definePage in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onShow - ✨.md

This snippet demonstrates the fundamental usage of the `onShow` lifecycle hook within a `definePage` setup function in `@52css/mp-vue3`. It registers a simple callback that executes and logs a message whenever the page becomes visible.

```TypeScript
import { definePage, onShow } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onShow(() => {
      console.log("🚀 ~ onShow ~ onShow:", onShow)
    })
  }
});
```

--------------------------------

### Using storeToRefs in a Page (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/storeToRefs.md

This TypeScript snippet demonstrates how to use `storeToRefs` within a `definePage` setup function to extract reactive properties like `count` from a Pinia store. It ensures that `count` remains reactive when destructured, allowing the template to automatically update. The snippet also exposes methods for incrementing, decrementing, and asynchronously incrementing the counter.

```TypeScript
import { definePage, storeToRefs } from "@52css/mp-vue3";
import { useCounterStore } from "../../store/counter";

definePage({
  setup() {
    const counterStore = useCounterStore();
    const { count } = storeToRefs(counterStore);
    console.log("🚀 ~ definePage ~ setup ~ count:", count);

    return {
      count,
      increment() {
        counterStore.increment();
      },
      decrement() {
        counterStore.decrement();
      },
      asyncIncrement() {
        counterStore.asyncIncrement();
      }
    };
  }
});
```

--------------------------------

### Handling Component Resize in Vue 3 Mini Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/resize.md

This snippet demonstrates how to use the `resize` hook within a `@52css/mp-vue3` component's `setup` function to respond to size changes. It logs the `size` option, which conforms to `WechatMiniprogram.Page.IResizeOption`, provided by the WeChat Mini Program `Component.resize` event.

```TypeScript
import { defineComponent, resize } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    resize((size: WechatMiniprogram.Page.IResizeOption) => {
      console.log("🚀 ~ resize ~ size:", size)
    })
  }
});
```

--------------------------------

### Using onReady Lifecycle Hook with mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onReady.md

This snippet illustrates how to register the `onReady` lifecycle hook using the `onReady` function provided by `@52css/mp-vue3` within a `definePage` setup. The callback function executes when the page is ready, typically after initial rendering, and logs a message to the console.

```TypeScript
import { definePage, onReady } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onReady(() => {
      console.log("🚀 ~ onReady ~ onReady:", onReady)
    })
  }
});
```

--------------------------------

### Accessing Route Information with useRoute in Vue 3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/路由 Router/useRoute.md

This snippet demonstrates how to use the `useRoute` hook within a `definePage` setup function to access current route details, including path and query parameters. It highlights the importance of defining `queries` within `definePage` to ensure proper type conversion for query parameters, and notes that `route.query.xx` is not reactive.

```TypeScript
import { definePage, ref, useRoute } from '@52css/mp-vue3'

definePage({
  queries: {
    a: Number,
    b: Number,
  },
  setup(query) {
    const route = useRoute();
    /**
     * 返回
     * {
     *   path: "pages/pinia/pinia",
     *   query: {a: 1, b: 2}, // ** 这个必须定义了queries才能正确转换格式 **
     * }
     */
    console.log("🚀 ~ setup ~ route:", route)
    

    return {
    }
  }
})
```

--------------------------------

### Defining Component with 'this' in @52css/mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/this.md

This snippet shows how `this` behaves inside the `setup` function of `defineComponent` in `@52css/mp-vue3`. It logs the component instance, confirming `this` refers to the current component context.

```TypeScript
import { defineComponent } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    console.log("🚀 ~ defineComponent ~ instance:", this)

    return {
    }
  }
});
```

--------------------------------

### Handling Page Load Queries in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onLoad - ✨.md

This snippet demonstrates the basic usage of the `onLoad` lifecycle hook within a `definePage` setup in `@52css/mp-vue3`. It shows how to access and log the `query` parameters passed to the page upon loading, which are typed as `Record<string, string | undefined>`.

```typescript
import { definePage, onLoad } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onLoad((query： Record<string, string | undefined>) => {
      console.log("🚀 ~ onLoad ~ query:", query)
    })
  }
});
```

--------------------------------

### Implementing onShareAppMessage in Vue 3 Mini Program

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onShareAppMessage.md

This snippet demonstrates how to use the `onShareAppMessage` hook within a `definePage` setup function in `@52css/mp-vue3`. It allows customizing the shared message's title and path, and showcases asynchronous title resolution using a Promise, which is useful for dynamic content.

```TypeScript
import { definePage, onShareAppMessage } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onShareAppAppMessage((object: WechatMiniprogram.Page.IShareAppMessageOption) => {
      console.log("🚀 ~ onShareAppMessage ~ object:", object)
      const promise = new Promise(resolve => {
        setTimeout(() => {
          resolve({
            title: '自定义转发标题'
          })
        }, 2000)
      })
      return {
        title: '自定义转发标题',
        path: '/page/user?id=123',
        promise
      }
    })
  }
});
```

--------------------------------

### Getting Current Page Instance in Vue 3 Mini-Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/getCurrentPage.md

This snippet demonstrates how to retrieve the current page instance using the `getCurrentPage` utility from `@52css/mp-vue3`. It imports the function and then calls it to get the page object, logging it to the console. This is useful for accessing page-specific properties or methods within a mini-program context.

```TypeScript
import { getCurrentPage } from '@52css/mp-vue3'

const page = getCurrentPage();
console.log("🚀 ~ page:", page)
```

--------------------------------

### Implementing Page Routing with useRouter in Vue 3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/路由 Router/useRouter.md

This snippet demonstrates how to use the `useRouter` composition API within a `definePage` setup to handle page navigation. It illustrates three distinct methods for performing a `router.push` operation: using a structured object with `path` and `query` parameters, providing a complete URL string within an object, and directly passing a URL string, showcasing flexible navigation options.

```TypeScript
import { definePage, ref, useRouter } from '@52css/mp-vue3'

definePage({
  queries: {
  },
  setup(query) {
    const router = useRouter();
    // 跳转方式1，支持path和query
    const goPiniaTap = () => {
      router.push({
        path: '/pages/pinia/pinia',
        query: {
          a: 1,
          b: 2
        }
      })
    }
    // 跳转方式2，原生url
    const goPiniaTap2 = () => {
      router.push({
        url: '/pages/pinia/pinia?a=1&b=2',
      })
    }

    // 跳转方式3，支持string
    const goPiniaTap3 = () => {
      router.push('/pages/pinia/pinia?a=1&b=2')
    }

    return {
      goPiniaTap,
    }
  }
})
```

--------------------------------

### Implementing onReachBottom with mp-vue3 in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onReachBottom.md

This snippet demonstrates how to use the `onReachBottom` lifecycle hook within a `definePage` setup in `@52css/mp-vue3`. It registers a callback function that logs a message to the console when the user scrolls to the bottom of the page, mimicking the WeChat Mini Program's `onReachBottom` behavior.

```TypeScript
import { definePage, onReachBottom } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onReachBottom(() => {
      console.log("🚀 ~ onReachBottom ~ onReachBottom:", onReachBottom)
    })
  }
});
```

--------------------------------

### Customizing Share to Timeline in Vue 3 Mini-Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onShareTimeline.md

This snippet demonstrates how to use the `onShareTimeline` hook within a `definePage` setup function to customize the content shared to a WeChat mini-program's timeline. It allows setting a custom `title`, `imageUrl`, and `query` string for the shared link. The `onShareTimeline` function is called when the user initiates a share to their timeline, returning an object with the desired share configuration.

```TypeScript
import { definePage, onShareTimeline } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onShareTimeline(() => {
      console.log("🚀 ~ onShareTimeline ~ onShareTimeline:", onShareTimeline)
      return {
        title: '转发标题',
        imageUrl: '', // 图片 URL
        query: 'a=1&b=2'
      }
    })
  }
});
```

--------------------------------

### Performing Cleanup with attached Return Function in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/attached - ✨.md

This example illustrates how to perform cleanup operations when a component is detached by returning a function from the `attached` hook. The returned function acts as a `detached` hook, clearing an interval timer when the component is destroyed.

```TypeScript
import { defineComponent, attached } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    attached(() => {
      let count = 0;
      let timer = setInterval(() => {
        console.log(count++)
      }, 1000)
      return () => {
        clearInterval(timer)
      }
    })
  }
});
```

--------------------------------

### Registering onHide Callback in Vue 3 with @52css/mp-vue3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onHide.md

This TypeScript snippet illustrates how to use the `onHide` function, imported from `@52css/mp-vue3`, to register a callback within the `setup` function of a Vue 3 application. The provided callback function will be executed when the mini-program instance is sent to the background, mirroring the behavior of the WeChat Mini Program `App.onHide` event. It logs a message to the console upon execution.

```TypeScript
import { createApp, onHide } from '@52css/mp-vue3'

createApp({
  setup() {
    onHide(() => {
      console.log("🚀 ~ onHide ~ onHide:", onHide)
    })
  }
});
```

--------------------------------

### Registering onPageNotFound Hook in Vue 3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onPageNotFound.md

This TypeScript snippet illustrates how to register the `onPageNotFound` lifecycle hook using `@52css/mp-vue3` within a Vue 3 application's `setup` function. The provided callback receives an `option` object, allowing developers to inspect details of the page not found event, such as the path and query, which can be used for logging or custom navigation.

```TypeScript
import { createApp, onPageNotFound } from '@52css/mp-vue3'\n\ncreateApp({\n  setup() {\n    onPageNotFound((option: WechatMiniprogram.App.PageNotFoundOption) => {\n      console.log("🚀 ~ onPageNotFound ~ option:", option)\n    })\n  }\n});
```

--------------------------------

### Implementing onPullDownRefresh Hook in Vue 3 Mini Program

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onPullDownRefresh.md

This snippet demonstrates how to use the `onPullDownRefresh` hook provided by `@52css/mp-vue3` within a `definePage` setup function. It registers a callback that executes when the user performs a pull-down refresh gesture on the page, logging a message to the console. This hook inherits its behavior from the WeChat Mini Program's `Page.onPullDownRefresh`.

```TypeScript
import { definePage, onPullDownRefresh } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onPullDownRefresh(() => {
      console.log("🚀 ~ onPullDownRefresh ~ onPullDownRefresh:", onPullDownRefresh)
    })
  }
});
```

--------------------------------

### Implementing moved Lifecycle Hook in Vue 3 Component (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/moved.md

This snippet demonstrates how to use the `moved` lifecycle hook provided by `@52css/mp-vue3` within a `defineComponent` setup. The callback function logs a message when the component is moved, inheriting behavior from WeChat Mini Program's `Component.moved`.

```TypeScript
import { defineComponent, moved } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    moved(() => {
      console.log("🚀 ~ moved ~ moved:", moved)
    })
  }
});
```

--------------------------------

### Implementing Component Hide Hook in Vue 3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/hide.md

This snippet illustrates how to use the `hide` function from `@52css/mp-vue3` within a Vue 3 component's `setup` method. The `hide` function registers a callback that will be executed when the component instance is hidden, mirroring the behavior of WeChat Mini Program's `Component.hide` lifecycle.

```TypeScript
import { defineComponent, hide } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    hide(() => {
      console.log("🚀 ~ hide ~ hide:", hide)
    })
  }
});
```

--------------------------------

### Extending createApp to Support Function Argument in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/createApp - 🔥 ✨.md

This snippet demonstrates how `createApp` can accept a `Function` as its argument. The function receives `LaunchShowOption` and can return an object whose properties will be bound to `this[key] = value` within the App instance. This provides a flexible way to initialize the application.

```ts
import { createApp, ref } from '@52css/mp-vue3'

createApp((option: WechatMiniprogram.App.LaunchShowOption) => {
  console.log("🚀 ~ createApp ~ option:", option)

  // 返回给 this[key] = value 绑定
  return {}
});
```

--------------------------------

### Defining mp-vue3 Store (sfs)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Generates a `defineStore` structure for an mp-vue3 store using a Pinia-like composition API syntax, including a reactive `count` variable.

```TypeScript
import { ref, defineStore } from "@52css/mp-vue3";

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);

  return {
    count,
  };
});
```

--------------------------------

### Defining mp-vue3 Page (sfp)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Generates a `definePage` structure for an mp-vue3 page, including common imports like `ref`, `computed`, `watch`, `onLoad`, and a `queries` definition for route parameters.

```TypeScript
import { ref, computed, watch, definePage, onLoad } from "@52css/mp-vue3";

definePage({
  queries: {
    query1: String
  },
  setup() {
    return {}
  }
});

```

--------------------------------

### Defining a Counter Store with defineStore in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/状态机 Pinia/defineStore - 🔥 ✨.md

This snippet defines a Pinia-like store named 'counter' using `@52css/mp-vue3`'s `defineStore`. It initializes a `count` ref, provides `increment`, `decrement`, and `asyncIncrement` functions to modify the state, and exposes these properties and methods for use throughout the application.

```ts
import { ref, defineStore } from "@52css/mp-vue3";

export const useCounterStore = defineStore("counter", () => {
  const count = ref(0);
  function increment() {
    count.value++;
  }
  function decrement() {
    count.value--;
  }

  function asyncIncrement() {
    return new Promise<void>((resolve) => {
      setTimeout(() => {
        count.value++;
        resolve();
      }, 1000);
    });
  }

  return {
    count,
    increment,
    asyncIncrement,
    decrement,
  };
});
```

--------------------------------

### Configuring Global Request Interceptors in mp-vue3 App (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/请求 Request/request.md

This snippet demonstrates how to set up global request and response interceptors, along with a base URL, within the `createApp` function of an `mp-vue3` application. It shows how to add an authorization token to requests and handle unauthorized responses by redirecting to a login page.

```TypeScript
import { createApp, request } from '@52css/mp-vue3'


createApp({
  setup(option: WechatMiniprogram.App.LaunchShowOption) {
    // 设置基础 URL
    request.setBaseUrl("https://api.example.com");

    // 设置请求拦截器
    request.setRequestInterceptor(async (options) => {
      // 例如，添加认证 token
      const token = wx.getStorageSync("token");
      options.header = {
        ...options.header,
        Authorization: `Bearer ${token}`,
      };
      return options;
    });

    // 设置响应拦截器
    request.setResponseInterceptor(async (response) => {
      // 例如，处理特定的状态码
      if (response.statusCode === 401) {
        // 处理未授权，如跳转登录页面
        wx.navigateTo({ url: "/pages/login/login" });
      }
      return response;
    });

    // 返回给 this[key] = value 绑定
    return {}
  }
})
```

--------------------------------

### Registering Basic onShow Callback in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onShow - ✨.md

This snippet demonstrates the basic usage of the `onShow` lifecycle hook in `@52css/mp-vue3`. It registers a callback function that executes when the mini-program application is shown, receiving launch options as a parameter. This is analogous to `App.onShow` in WeChat Mini Programs.

```TypeScript
import { createApp, onShow } from '@52css/mp-vue3'

createApp({
  setup() {
    onShow((option: WechatMiniprogram.App.LaunchShowOption) => {
      console.log("🚀 ~ onShow ~ option:", option)
    })
  }
});
```

--------------------------------

### Implementing Page Unload Cleanup via onLoad Return (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onLoad - ✨.md

This snippet illustrates how to perform cleanup actions when a page is unloaded by returning a function from the `onLoad` hook. The returned function acts as an `onUnload` handler, executing its logic (e.g., logging 'pageOnUnload') when the page is destroyed.

```typescript
import { definePage, onLoad } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onLoad(() => {
      console.log('pageOnLoad')
      return () => {
        console.log('pageOnUnload')
      }
    })
  }
});
```

--------------------------------

### Creating VS Code Code Region (region)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Generates VS Code region markers (`//#region` and `//#endregion`) for code folding and organization within source files.

```Plain Text
//#region $0
//#endregion
```

--------------------------------

### Implementing onResize Hook in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onResize.md

This snippet demonstrates how to integrate the `onResize` lifecycle hook within an `mp-vue3` page defined using `definePage`. The provided callback function receives an `IResizeOption` object, allowing developers to react to page dimension changes, such as device orientation shifts, and log the resize event details.

```TypeScript
import { definePage, onResize } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onResize((object: WechatMiniprogram.Page.IResizeOption) => {
      console.log("🚀 ~ onResize ~ object:", object)
    })
  }
});
```

--------------------------------

### Using ready Hook in mp-vue3 Component (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/ready.md

Demonstrates how to use the `ready` lifecycle hook within an `@52css/mp-vue3` component. This hook is invoked when the component is ready, similar to WeChat Mini Program's `Component.ready`, and is suitable for initialization logic.

```TypeScript
import { defineComponent, ready } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    ready(() => {
      console.log("🚀 ~ ready ~ ready:", ready)
    })
  }
});
```

--------------------------------

### Generating Random Image URL (picsum)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Provides a URL for generating a random image from Picsum Photos with specified dimensions, useful for placeholder content.

```Plain Text
https://picsum.photos/200/300?random=1
```

--------------------------------

### Implementing onRouteDone in Vue 3 Mini-Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onRouteDone.md

This snippet demonstrates how to use the `onRouteDone` lifecycle hook within a Vue 3 mini-program page defined using `@52css/mp-vue3`. It registers a callback function that executes when the page's routing process is complete, logging a message to the console.

```TypeScript
import { definePage, onRouteDone } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onRouteDone(() => {
      console.log("🚀 ~ onRouteDone ~ onRouteDone:", onRouteDone)
    })
  }
});
```

--------------------------------

### Defining Page with Function API in mp-vue3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/definePage - 🔥 ✨.md

This snippet demonstrates how to define a WeChat Mini Program page using the `definePage` function with a functional API. It utilizes `ref` from `@52css/mp-vue3` to create reactive data (`count`) and defines a method (`onIncrease`) that automatically updates `this.data.count` upon value change. All reactive data and methods must be returned from the function.

```TypeScript
import { definePage, ref } from '@52css/mp-vue3'

definePage((query, context) => {
  const count = ref(0)
  const onIncrease = () => {
    count.value++; // 数据变更，自动响应 this.data.count
  }

  // 所有的数据和方法需要返回
  return {
    count,
    onIncrease
  }
});
```

--------------------------------

### Defining mp-vue3 Component (sfc)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/通用 Common/代码片段.md

Generates a `defineComponent` structure for an mp-vue3 component, including `properties` for props and `emits` definitions with type annotations for custom events.

```TypeScript
import { ref, computed, watch, defineComponent } from "@52css/mp-vue3";

defineComponent({
  properties: {
    prop1: String
  },
  emits: {
    event1: (_name: string) => true,
  },
  setup() {
    return {
    };
  },
});

```

--------------------------------

### Handling Add to Favorites Event in Vue 3 MiniProgram (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onAddToFavorites.md

This snippet demonstrates how to use the `onAddToFavorites` lifecycle hook within a Vue 3-based WeChat MiniProgram page. It allows customizing the shared content when a user adds the page to their favorites, including title, image, and query parameters. It logs the event object and specifically the `webViewUrl` for webview pages.

```TypeScript
import { definePage, onAddToFavorites } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onAddToFavorites((object: WechatMiniprogram.Page.IAddToFavoritesOption) => {
      console.log("🚀 ~ onAddToFavorites ~ object:", object)
      // webview 页面返回 webViewUrl
      console.log('webViewUrl: ', object.webViewUrl)
      return {
        title: '自定义标题',
        imageUrl: 'http://demo.png',
        query: 'name=xxx&age=xxx'
      }
    })
  }
});
```

--------------------------------

### Implementing onHide Lifecycle Hook in Vue 3 Mini Program

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onHide.md

This snippet demonstrates how to use the `onHide` lifecycle hook within a Vue 3 mini-program page defined using `@52css/mp-vue3`. The `onHide` function registers a callback that is executed when the page is hidden, typically when navigating away or the mini-program enters the background. It's useful for performing cleanup or saving state before the page becomes inactive.

```ts
import { definePage, onHide } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onHide(() => {
      console.log("🚀 ~ onHide ~ onHide:", onHide)
    })
  }
});
```

--------------------------------

### Handling Component Show Event in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/show.md

This snippet demonstrates how to use the `show` lifecycle hook within an `mp-vue3` component. It registers a callback function that executes when the component becomes visible, logging a message to the console. This is useful for actions that need to occur upon component display.

```TypeScript
import { defineComponent, show } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    show(() => {
      console.log("🚀 ~ show ~ show:", show)
    })
  }
});
```

--------------------------------

### Handling Component Hide Event with Return Function in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/show.md

This snippet extends the `show` hook by returning a cleanup function, which will be executed when the component is hidden (equivalent to a `hide` event). This pattern allows for proper resource cleanup or state reset when a component is no longer visible, ensuring efficient lifecycle management.

```TypeScript
import { defineComponent, show } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    show(() => {
      console.log('onPageShow')
      return () => {
        console.log('pageOnHide')
      }
    })
  }
});
```

--------------------------------

### Using routeDone Hook in mp-vue3 Component (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/routeDone.md

This snippet demonstrates how to use the `routeDone` lifecycle hook within a `@52css/mp-vue3` component. The `routeDone` function registers a callback that executes when the component's route is considered 'done' or ready, similar to WeChat Mini Program's `Component.routeDone`. It logs a message to the console when triggered.

```TypeScript
import { defineComponent, routeDone } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    routeDone(() => {
      console.log("🚀 ~ routeDone ~ routeDone:", routeDone)
    })
  }
});
```

--------------------------------

### Handling onShow with Cleanup (onHide) in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onShow - ✨.md

This snippet illustrates how to perform cleanup actions when the application hides, by returning a function from the `onShow` callback. The returned function will be executed when the `onHide` event occurs, providing a mechanism to manage resources or state changes upon application backgrounding.

```TypeScript
import { createApp, onShow } from '@52css/mp-vue3'

createApp({
  setup() {
    onShow(() => {
      console.log('onAppShow')
      return () => {
        console.log('onAppHide')
      }
    })
  }
});
```

--------------------------------

### Implementing onUnload Hook in Vue 3 Mini Program

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onUnload.md

This snippet demonstrates how to use the `onUnload` lifecycle hook within a Vue 3 mini-program page defined using `@52css/mp-vue3`. The `onUnload` callback is executed when the page is unloaded, typically used for cleanup operations. It logs a message to the console upon execution, confirming the hook's invocation.

```TypeScript
import { definePage, onUnload } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onUnload(() => {
      console.log("🚀 ~ onUnload ~ onUnload:", onUnload)
    })
  }
});
```

--------------------------------

### onShow with Cleanup Function (onHide support) in TypeScript

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onShow - ✨.md

This snippet illustrates how to use `onShow` to not only perform actions when a page becomes visible but also to define a cleanup function. By returning a function from the `onShow` callback, you can execute logic when the page hides, effectively supporting `onHide`-like behavior.

```TypeScript
import { definePage, onShow } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onShow(() => {
      console.log('pageOnShow')
      return () => {
        console.log('pageOnHide')
      }
    })
  }
});
```

--------------------------------

### Defining Component with Function API in mp-vue3

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/defineComponent - 🔥 ✨.md

This snippet demonstrates how to define a WeChat Mini Program component using the functional API of `defineComponent` from `@52css/mp-vue3`. It utilizes `ref` for reactive data (`count`) and defines a method (`onIncrease`) that automatically updates `this.data.count`. All reactive data and methods must be returned from the function.

```TypeScript
import { defineComponent, ref } from '@52css/mp-vue3'

defineComponent((props, context) => {
  const count = ref(0)
  const onIncrease = () => {
    count.value++; // 数据变更，自动响应 this.data.count
  }

  // 所有的数据和方法需要返回
  return {
    count,
    onIncrease
  }
});
```

--------------------------------

### Registering Global Error Handler with mp-vue3 onError (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/小程序 App/onError.md

This snippet demonstrates how to register a global error handler using the `onError` hook provided by `@52css/mp-vue3`. It logs any unhandled application errors to the console, similar to WeChat Mini Program's `App.onError`.

```TypeScript
import { createApp, onError } from '@52css/mp-vue3'

createApp({
  setup() {
    onError((error: string) => {
      console.log("🚀 ~ onError ~ error:", error)
    })
  }
});
```

--------------------------------

### Registering onSaveExitState Hook in Vue 3 Mini Program

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onSaveExitState.md

This snippet demonstrates how to register the `onSaveExitState` lifecycle hook within a Vue 3 mini-program page using `@52css/mp-vue3`. The hook is triggered when the page is about to be exited, allowing for state saving. It logs a message to the console when invoked, showing its execution.

```TypeScript
import { definePage, onSaveExitState } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onSaveExitState(() => {
      console.log("🚀 ~ onSaveExitState ~ onSaveExitState:", onSaveExitState)
    })
  }
});
```

--------------------------------

### Using attached Lifecycle Hook in mp-vue3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/attached - ✨.md

This snippet demonstrates the basic usage of the `attached` lifecycle hook within an `@52css/mp-vue3` component. It logs a message to the console when the component is attached to the DOM, similar to WeChat Mini Program's `Component.attached`.

```TypeScript
import { defineComponent, attached } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    attached(() => {
      console.log("🚀 ~ attached ~ attached:", attached)
    })
  }
});
```

--------------------------------

### Handling Page Scroll Events in Vue 3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/页面 Page/onPageScroll.md

This snippet demonstrates how to use the `onPageScroll` hook within a Vue 3 mini-program page defined by `@52css/mp-vue3`. It logs the scroll event object, which includes the `scrollTop` property, to the console. This hook is useful for implementing scroll-dependent UI behaviors such as sticky headers or scroll-to-top buttons.

```TypeScript
import { definePage, onPageScroll } from '@52css/mp-vue3'

definePage({
  queries: {},
  setup() {
    onPageScroll((object: WechatMiniprogram.Page.IPageScrollOption) => {
      console.log("🚀 ~ onPageScroll ~ object:", object)
    })
  }
});
```

--------------------------------

### Handling Component Errors in Vue 3 Mini Program (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/error.md

This snippet demonstrates how to register an error handler using the `error` lifecycle hook within an `@52css/mp-vue3` component. The `error` function receives an `Error` object, allowing for custom logging or error reporting when a runtime error occurs in the component's lifecycle.

```TypeScript
import { defineComponent, error } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    error((err: Error) => {
      console.log("🚀 ~ error ~ err:", err)
    })
  }
});
```

--------------------------------

### Implementing detached Lifecycle Hook in Vue 3 (TypeScript)

Source: https://github.com/52css/mp-vue3/blob/main/apps/docs/框架接口/组件 Component/detached.md

This snippet illustrates how to use the `detached` lifecycle hook within a Vue 3 component defined with `@52css/mp-vue3`. The `detached` function registers a callback that executes when the component instance is removed from the page, mirroring the behavior of WeChat Mini Program's `Component.detached` hook.

```TypeScript
import { defineComponent, detached } from '@52css/mp-vue3'

defineComponent({
  properties: {},
  setup() {
    detached(() => {
      console.log("🚀 ~ detached ~ detached:", detached)
    })
  }
});
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.