{"id":17990831,"url":"https://github.com/1977474741/spa-custom-hooks","last_synced_at":"2025-04-12T15:36:19.954Z","repository":{"id":38354687,"uuid":"345626008","full_name":"1977474741/spa-custom-hooks","owner":"1977474741","description":"💯 业务层自定义钩子（异步任务通知解决方案），支持各种小程序和Vue架构（uni-app、wepy、mpvue等）","archived":false,"fork":false,"pushed_at":"2024-05-07T11:28:15.000Z","size":1865,"stargazers_count":556,"open_issues_count":6,"forks_count":57,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-04-03T18:15:48.739Z","etag":null,"topics":["h5","mpvue","uniapp","vue","wepy"],"latest_commit_sha":null,"homepage":"https://github.com/1977474741/spa-custom-hooks","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/1977474741.png","metadata":{"files":{"readme":"README.EN.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-08T11:02:34.000Z","updated_at":"2025-03-17T02:18:22.000Z","dependencies_parsed_at":"2024-05-07T12:38:10.161Z","dependency_job_id":"7fd8ee00-0307-4c5f-8e2b-228faa8b542e","html_url":"https://github.com/1977474741/spa-custom-hooks","commit_stats":{"total_commits":89,"total_committers":3,"mean_commits":"29.666666666666668","dds":0.101123595505618,"last_synced_commit":"61a75afeea047a37e4e981e2c03d9a15b9eb4537"},"previous_names":["1977474741/vue-custom-hooks"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fspa-custom-hooks","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fspa-custom-hooks/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fspa-custom-hooks/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1977474741%2Fspa-custom-hooks/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1977474741","download_url":"https://codeload.github.com/1977474741/spa-custom-hooks/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248590308,"owners_count":21129782,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["h5","mpvue","uniapp","vue","wepy"],"created_at":"2024-10-29T19:19:14.470Z","updated_at":"2025-04-12T15:36:19.927Z","avatar_url":"https://github.com/1977474741.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"https://photo.zastatic.com/images/common-cms/it/20220106/1641464912638_340742_t.png\"/\u003e\n\u003ch1 align=\"center\"\u003e spa-custom-hooks \u003c/h1\u003e\n\n[![license](https://img.shields.io/badge/license-%20MIT-blue.svg)](https://github.com/1977474741/spa-custom-hooks/blob/main/LICENSE) [![license](https://img.shields.io/npm/v/spa-custom-hooks?color=red)](https://www.npmjs.com/package/spa-custom-hooks) [![license](https://img.shields.io/bundlephobia/min/spa-custom-hooks)](https://www.npmjs.com/package/spa-custom-hooks) [![ license](https://img.shields.io/github/last-commit/1977474741/spa-custom-hooks)](https://github.com/1977474741/spa-custom-hooks/commits/main) [ ![license](https://img.shields.io/github/stars/1977474741?style=social)](https://github.com/1977474741)\n\n**Simplified Chinese | [English](./README.EN.md)**\n\n\u003c/div\u003e\n\n-   [What are spa-custom-hooks? ](#head1)\n-   [ what's it for? ](#head2)\n-   [Common application scenarios](#head3)\n-   [Usage example](#head4)\n-   [Registration parameter description](#head5)\n    -   [Register CustomHook](#head6)\n    -   [ diyHooks object description](#head7)\n-   [Rules for using hooks (must read for use)](#head8)\n-   [Built-in native hooks](#head9)\n-   [Demo QR code](#head10)\n-   [Join the group to communicate](#head11)\n\n## \u003cspan id=\"head1\"\u003eWhat are spa-custom-hooks? \u003c/span\u003e\n\n-   A tool that can customize page hooks. You can register global asynchronous tasks and define the triggering conditions of the hooks. When the conditions are met, the relevant hooks in the page can be automatically executed.\n-   Supports free use with Vue's native hooks created, mounted, etc.\n-   Supports Vue architecture (including uni-app, wepy, mpvue, etc.) and various small programs (WeChat, Alipay, Byte, etc.).\n-   The latest version supports the use of all native applet components, including lifetimes and pageLifetimes hooks, and has adapted the uniapp hook separately.\n\n## \u003cspan id=\"head2\"\u003e What is it used for? \u003c/span\u003e\n\n-   Handle the relationship between global data and intra-page logic in a simple and elegant way, mostly asynchronous issues.\n-   Enhance the combination of life cycle hooks to solve the problem of logical execution timing within the page.\n\n## \u003cspan id=\"head3\"\u003e Common application scenarios\u003c/span\u003e\n\n```javascript\nexport default {\n    name: 'Home',\n    onCreatedLogin() {\n        //Login successful (get token) \u0026\u0026 Page initialization completed\n        //Tips: Suitable for scenarios where the request sent by a page depends on token\n    },\n    onCreatedUserInfo() {\n        //Page initialization completed \u0026\u0026 Obtaining user information completed\n        //Tips: Suitable for scenarios where user information needs to be used to make judgments during page initialization before proceeding with page logic.\n    },\n    onMountedUserInfo() {\n        //dom rendering completed \u0026\u0026 obtaining user information completed\n        //Tips: Suitable for similar scenarios where the avatar needs to be rendered on canvas when entering the page for the first time.\n    },\n    onReadyShow() {\n        //Page rendering in the mini program is completed \u0026\u0026 page display\n        //Tips: Suitable for scenarios where mini program components or DOM need to be obtained and executed every time the page is displayed.\n    },\n};\n```\n\n## \u003cspan id=\"head4\"\u003e Usage example\u003c/span\u003e\n\n_[Click to view the code snippet of the mini program](https://developers.weixin.qq.com/s/pUQ4Xkma79xd)_\n\n```javascript\n//The first step is to install the plug-in:\nnpm install spa-custom-hooks --save\n\n//The second step is to register the plug-in in the entry file:\nimport CustomHook from 'spa-custom-hooks';\nconst diyHooks = {\n      'UserInfo':{\n         name:'UserInfo',\n         watchKey: ['userinfo'],\n         deep: true,\n         onUpdate(val){\n             //The nickName in userinfo is not empty, which means this hook is hit.\n             return !!val.nickName;\n         }\n     }\n}\n//1.Vue architecture registration method\nimport store from './store'\nVue.use(CustomHook, diyHooks, store)\n//2. Registration method of native mini program\n//Define globalData in advance\nconst globalData = {\n     userinfo: {\n         nickName: ''\n     }\n}\nCustomHook.install(diyHooks,globalData)\n\n//The third step, use the plug-in in the business page (can be used on any page, with low coupling and less repetitive code):\nonLoadUserInfo(){\n     //can render canvas\n     renderCanvas();\n}\n```\n\n## \u003cspan id=\"head5\"\u003e Registration parameter description\u003c/span\u003e\n\n#### \u003cspan id=\"head6\"\u003e Register CustomHook\u003c/span\u003e\n\n```javascript\n//vue architecture-main.js\nimport store from './store';\nimport CustomHook from 'spa-custom-hooks';\nVue.use(CustomHook, diyHooks, store);\n//Native applet architecture-app.js\nimport CustomHook from 'spa-custom-hooks';\nCustomHook.install(diyHooks, globalData);\n```\n\n#### \u003cspan id=\"head7\"\u003e diyHooks object description\u003c/span\u003e\n\n```javascript\n{\n     //1. Register attribute listening hook\n     //Registered hook name, first letter capitalized\n     'UserInfo':{\n         //name, the full name of the hook. If the monitoring attribute is the same as the key above, it is required.\n         name:'UserInfo',\n         //The attribute name in the store to be monitored by watchKey (equivalent to state.userinfo), required for attribute monitoring hook mode string | Array\u003cstring\u003e\n         watchKey: ['userinfo'],\n         //Whether it is hit by default, optional\n         hit: false,\n         //deepWhether deep monitoring is required, optional\n         deep: true,\n         //The callback executed when the onUpdate attribute changes, used to decide whether to hit this hook. It is optional. The default value is equivalent to returning !!val.\n         onUpdate(val){\n             //Here it means that if userinfo contains nickName, this hook will be hit. Note that asynchronous return is not allowed\n             return !!val.nickName;\n         }\n     },\n\n     //2. Register life cycle listening hook\n     //Registered hook name, first letter capitalized\n     'BeforeMount':{\n         //name, the name of the native hook to be monitored, used to hit this hook, required\n         name:'beforeMount',\n         //destroy, the opposite hook name, used to cancel the hit, event listening hook is required\n         destroy:'destroyed',\n         //Whether it is hit by default, optional\n         hit: false,\n         //Used to specify the execution order when conditions are met simultaneously with other life cycle hooks. The smaller value is executed first. Please refer to hooks.js\n         weightValue: 4,\n     }\n}\n```\n\n## \u003cspan id=\"head8\"\u003e Hook usage rules (must read for use)\u003c/span\u003e\n\n```javascript\n`on{UserInfo}{BeforeMount}{Login}{Position}...`; //All registered hooks can be matched at will. The order of arrangement does not affect the execution of the hooks. They are all related by \u0026\u0026\n```\n\n#### pay attention:\n\n-   The above rules apply to all custom hooks, including App, Page, Component, lifetimes and pageLifetimes in Component, all must be prefixed with on.\n-   There can only be one same custom hook in App, Page, and Component, and the one within lifetimes takes precedence.\n-   The use of custom hooks within Mixin on each platform is not supported.\n\n## \u003cspan id=\"head9\"\u003e Registered life cycle hook\u003c/span\u003e\n\n-   [Detailed configuration of registered hooks](https://github.com/1977474741/spa-custom-hooks/blob/main/lib/spa-custom-hooks/hooks.js)\n-   [ diyHooks object description](#head7)\n\n## \u003cspan id=\"head10\"\u003e Demo QR code\u003c/span\u003e\n\n![left image description here](https://photo.zastatic.com/images/common-cms/it/20220531/1653983381580_599944_t.png?imageMogr2/thumbnail/200x200)\n\n## \u003cspan id=\"head11\"\u003e Join the group to communicate\u003c/span\u003e\n\n![left image description here](https://pubser-res.zhenai.com/other/temp/202103/20/17024414117439.png?imageMogr2/thumbnail/203x203)\n\nIf you have any good suggestions, please submit issues or PR.\n\nIf you like it, click a star\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1977474741%2Fspa-custom-hooks","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1977474741%2Fspa-custom-hooks","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1977474741%2Fspa-custom-hooks/lists"}