Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/1977474741/spa-custom-hooks
💯 业务层自定义钩子（异步任务通知解决方案），支持各种小程序和Vue架构（uni-app、wepy、mpvue等）
https://github.com/1977474741/spa-custom-hooks
h5 mpvue uniapp vue wepy
Last synced: 15 days ago
JSON representation
💯 业务层自定义钩子（异步任务通知解决方案），支持各种小程序和Vue架构（uni-app、wepy、mpvue等）
- Host: GitHub
- URL: https://github.com/1977474741/spa-custom-hooks
- Owner: 1977474741
- License: mit
- Created: 2021-03-08T11:02:34.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-05-07T11:28:15.000Z (6 months ago)
- Last Synced: 2024-10-25T19:09:19.603Z (19 days ago)
- Topics: h5, mpvue, uniapp, vue, wepy
- Language: JavaScript
- Homepage: https://github.com/1977474741/spa-custom-hooks
- Size: 1.78 MB
- Stars: 582
- Watchers: 12
- Forks: 55
- Open Issues: 6
-
Metadata Files:
- Readme: README.EN.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
spa-custom-hooks
[](https://github.com/1977474741/spa-custom-hooks/blob/main/LICENSE) [](https://www.npmjs.com/package/spa-custom-hooks) [](https://www.npmjs.com/package/spa-custom-hooks) [](https://github.com/1977474741/spa-custom-hooks/commits/main) [ ](https://github.com/1977474741)
**Simplified Chinese | [English](./README.EN.md)**
- [What are spa-custom-hooks? ](#head1)
- [ what's it for? ](#head2)
- [Common application scenarios](#head3)
- [Usage example](#head4)
- [Registration parameter description](#head5)
- [Register CustomHook](#head6)
- [ diyHooks object description](#head7)
- [Rules for using hooks (must read for use)](#head8)
- [Built-in native hooks](#head9)
- [Demo QR code](#head10)
- [Join the group to communicate](#head11)
## What are spa-custom-hooks?
- 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.
- Supports free use with Vue's native hooks created, mounted, etc.
- Supports Vue architecture (including uni-app, wepy, mpvue, etc.) and various small programs (WeChat, Alipay, Byte, etc.).
- The latest version supports the use of all native applet components, including lifetimes and pageLifetimes hooks, and has adapted the uniapp hook separately.
## What is it used for?
- Handle the relationship between global data and intra-page logic in a simple and elegant way, mostly asynchronous issues.
- Enhance the combination of life cycle hooks to solve the problem of logical execution timing within the page.
## Common application scenarios
```javascript
export default {
name: 'Home',
onCreatedLogin() {
//Login successful (get token) && Page initialization completed
//Tips: Suitable for scenarios where the request sent by a page depends on token
},
onCreatedUserInfo() {
//Page initialization completed && Obtaining user information completed
//Tips: Suitable for scenarios where user information needs to be used to make judgments during page initialization before proceeding with page logic.
},
onMountedUserInfo() {
//dom rendering completed && obtaining user information completed
//Tips: Suitable for similar scenarios where the avatar needs to be rendered on canvas when entering the page for the first time.
},
onReadyShow() {
//Page rendering in the mini program is completed && page display
//Tips: Suitable for scenarios where mini program components or DOM need to be obtained and executed every time the page is displayed.
},
};
```
## Usage example
_[Click to view the code snippet of the mini program](https://developers.weixin.qq.com/s/pUQ4Xkma79xd)_
```javascript
//The first step is to install the plug-in:
npm install spa-custom-hooks --save
//The second step is to register the plug-in in the entry file:
import CustomHook from 'spa-custom-hooks';
const diyHooks = {
'UserInfo':{
name:'UserInfo',
watchKey: ['userinfo'],
deep: true,
onUpdate(val){
//The nickName in userinfo is not empty, which means this hook is hit.
return !!val.nickName;
}
}
}
//1.Vue architecture registration method
import store from './store'
Vue.use(CustomHook, diyHooks, store)
//2. Registration method of native mini program
//Define globalData in advance
const globalData = {
userinfo: {
nickName: ''
}
}
CustomHook.install(diyHooks,globalData)
//The third step, use the plug-in in the business page (can be used on any page, with low coupling and less repetitive code):
onLoadUserInfo(){
//can render canvas
renderCanvas();
}
```
## Registration parameter description
#### Register CustomHook
```javascript
//vue architecture-main.js
import store from './store';
import CustomHook from 'spa-custom-hooks';
Vue.use(CustomHook, diyHooks, store);
//Native applet architecture-app.js
import CustomHook from 'spa-custom-hooks';
CustomHook.install(diyHooks, globalData);
```
#### diyHooks object description
```javascript
{
//1. Register attribute listening hook
//Registered hook name, first letter capitalized
'UserInfo':{
//name, the full name of the hook. If the monitoring attribute is the same as the key above, it is required.
name:'UserInfo',
//The attribute name in the store to be monitored by watchKey (equivalent to state.userinfo), required for attribute monitoring hook mode string | Array
watchKey: ['userinfo'],
//Whether it is hit by default, optional
hit: false,
//deepWhether deep monitoring is required, optional
deep: true,
//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.
onUpdate(val){
//Here it means that if userinfo contains nickName, this hook will be hit. Note that asynchronous return is not allowed
return !!val.nickName;
}
},
//2. Register life cycle listening hook
//Registered hook name, first letter capitalized
'BeforeMount':{
//name, the name of the native hook to be monitored, used to hit this hook, required
name:'beforeMount',
//destroy, the opposite hook name, used to cancel the hit, event listening hook is required
destroy:'destroyed',
//Whether it is hit by default, optional
hit: false,
//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
weightValue: 4,
}
}
```
## Hook usage rules (must read for use)
```javascript
`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 &&
```
#### pay attention:
- The above rules apply to all custom hooks, including App, Page, Component, lifetimes and pageLifetimes in Component, all must be prefixed with on.
- There can only be one same custom hook in App, Page, and Component, and the one within lifetimes takes precedence.
- The use of custom hooks within Mixin on each platform is not supported.
## Registered life cycle hook
- [Detailed configuration of registered hooks](https://github.com/1977474741/spa-custom-hooks/blob/main/lib/spa-custom-hooks/hooks.js)
- [ diyHooks object description](#head7)
## Demo QR code
## Join the group to communicate
If you have any good suggestions, please submit issues or PR.
If you like it, click a star