1
- # wxa-plugin-bind-hijack
1
+ # wxa-plugin-tag-plugin
2
2
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标签
6
4
7
5
## install
8
6
```
9
- npm install -S @wxa/plugin-bind-hijack
7
+ npm install -S @wxa/plugin-tag-modify
10
8
```
11
9
12
10
@@ -25,53 +23,15 @@ module.exports = {
25
23
},
26
24
use: [' babel' , ' sass' ],
27
25
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
+ }])
36
35
]
37
36
}
38
37
```
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