@mini-dev/hook
v0.4.0
Published
miniapp framework methods(App, Page, Component) hook
Maintainers
Readme
微信小程序 Hook
拦截并增强小程序组件(App, Page, Component)的 Option 方法,可以把公共或者兜底的方法(以及配置)进行统一配置,比如为每个页面都添加分享,一次配置,全页面生效。
Usage
开启微信小程序的 npm 支持: https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
npm install @mini-dev/hook⚠️ 注意:由于
@mini-dev/hook内部依赖object-hook,如果通过本地路径(如file:..)引用本仓库进行开发,微信开发者工具的 npm 构建不会自动递归打包该依赖,需要在你的小程序项目的package.json中显式声明object-hook依赖:"dependencies": { "@mini-dev/hook": "0.4.0", "object-hook": "^0.1.0" }安装依赖后,重新执行 工具 → 构建 npm 即可。
配置钩子
一个示例如下:
app.new.js
const { _App, _Page, _Component } = require('@mini-dev/hook');
_App.use({
onLaunch(appInstance) {
return {
before(options) {
console.log('App.onLaunch...... before 1', options);
},
afterReturn(res, options) {
console.log('App.onLaunch...... afterReturn 1', options);
}
};
}
});
_Page.use({
onLoad(pageInstance) {
return {
before(query) {
console.log(this.route, 'Page.onLoad...... before', this.data, query);
}
};
}
});
_Component.use({
'methods.onTap'(componentInstance) {
return {
before(e) {
wx.showModal({
content: 'newComponent.onTap'
});
}
};
}
});app.js
import { _App as App } from './app.new';
App({
onLaunch() {}
});使用已有的包装方法
如果你的小程序原本就已经包装了 App, Page 等框架方法,那么也可以创建自定义的包装器,以 App 为例:
app.new.js
import OldApp from './App.old';
const { _App } = require('@mini-dev/hook');
const newApp = _App.create(OldApp); // OldApp 是你自定义的App包装函数
newApp.use({
onLaunch() {
return {
before(option) {
console.log('App.onLaunch...... before 1', this.data, option);
}
};
}
});
export default newApp;app.js
import { _App as App } from './app.new';
App({
onLaunch() {}
});pages/sample/index.js
import { _Page as Page } from './page.new';
Page({
onLoad() {}
});替换全局方法
如果你觉得每个文件都要导入很麻烦,可以在 App 入口之前,直接替换掉全局的 App, Page 等方法:
newApp.mount('App');
newPage.mount('Page');
newComponent.mount('Component');以上调用默认会挂到 globalThis 上,如果想挂到别的对象,可以调用 mount 方法,传入一个对象。
newApp.mount('App', wx);
newPage.mount('Page', wx);
newComponent.mount('Component', wx);挂载完毕之后,就不用再导入了,可以无感使用。
提示:
由于 App,Page 等方法是框架内置的,不太建议覆盖框架的方法,指不定那天就出问题了。建议使用包装的方式创建新的构造函数。
Hook 语义
当前版本内部基于 object-hook,并以兼容模式运行:
- 缺失的方法路径会被自动补齐,便于给
onShareAppMessage这类可选方法统一加兜底逻辑; - 如果某个 builder 返回
false、null或undefined,当前路径会被跳过,不会创建 hook; before、afterReturn、afterThrow、after的语义与object-hook保持一致。
完整的例子
参见 sample 文件夹
ChangeLogs
0.4.0
- 增加 mount 方法;
- 补全 share 示例;
0.2.0
- 修正示例代码。
