Skip to content

Commit 910f10b

Browse files
author
hughliu
committed
feat: readme修改
1 parent 0e9fb21 commit 910f10b

File tree

1 file changed

+12
-52
lines changed

1 file changed

+12
-52
lines changed
Lines changed: 12 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
# wxa-plugin-bind-hijack
1+
# wxa-plugin-tag-plugin
22

3-
[![NPM version](https://img.shields.io/npm/v/@wxa/lugin-bind-hijack.svg)](https://www.npmjs.com/package/@wxa/lugin-bind-hijack)
4-
5-
劫持小程序bind事件
3+
打包阶段批量修改wxml标签
64

75
## install
86
```
9-
npm install -S @wxa/plugin-bind-hijack
7+
npm install -S @wxa/plugin-tag-modify
108
```
119

1210

@@ -25,53 +23,15 @@ module.exports = {
2523
},
2624
use: ['babel', 'sass'],
2725
plugins: [
28-
// 指定拦截事件
29-
new BindHijackPlugin([
30-
'tap',
31-
'getuserinfo',
32-
]);
33-
34-
// 拦截所有事件
35-
new BindHijackPlugin();
26+
// 批量修改image标签,增加binderror属性、调整src
27+
new TagModifyPlugin([{
28+
target: 'image',
29+
operateFn: (attribs) => {
30+
if (!attribs.binderror) attribs.binderror = 'imageOnError';
31+
if (attribs.src) attribs.src = attribs.src.replace('WEB_STATIC_URL', '{{CDNBaseUrl}}');
32+
return attribs;
33+
}
34+
}])
3635
]
3736
}
3837
```
39-
40-
### 实现拦截函数
41-
在app.js中引入运行时组件,并实现钩子函数
42-
```javascript
43-
/**
44-
* wxa plugin
45-
*/
46-
import BindHijackPlugin from "@wxa/plugin-bind-hijack/runtime";
47-
48-
/**
49-
* 钩子函数名字为 before${event}或 after${event}
50-
* 事件首字母大写
51-
* 如: beforeTap、afterGetuserinfo
52-
*/
53-
wxa.use(BindHijackPlugin, {
54-
// tap事件之前调用
55-
beforeTap: function(e){
56-
console.log('beforeTap', e);
57-
},
58-
// getuserinfo事件之后调用
59-
afterGetuserinfo: function(e){
60-
console.log('afterGetuserinfo', e);
61-
},
62-
// 所有事件之前调用
63-
before: function(e){
64-
console.log('before', e);
65-
},
66-
// 所有事件之后调用
67-
after: function(e){
68-
console.log('after', e);
69-
},
70-
});
71-
72-
```
73-
74-
### 其他说明
75-
1. 拦截事件支持bind和catch(阻止冒泡),支持冒号写法(bind:tap
76-
2. 自动执行执行的事件也会触发拦截,如:swiper设置了autoplay时,bindchange事件会自动执行
77-
3. 事件对象的dataset中注入节点相关信息,包括:data、type、class、id,通过e.mark.id获取

0 commit comments

Comments
 (0)