引入前端资源 · 豆信开发手册

## 引入前端类库在插件开发过程中，我们经常会遇到要引入一些前端类库的情况，比如引入`weui`、`jquery`、`vue`之类的开源库。豆信提供了`import_css`和`import_js`两个钩子用于前端类库的引入，使用的是http://www.bootcdn.cn/ 的CDN服务。 ### 用法示例 ``` {:hook('import_css', array('0.4.3'=>'weui'))} ``` ``` {:hook('import_js', array('jquery', 'vue'))} ``` 使用`import_css`和`import_js`两个钩子引入前端资源时，`hook`的第二个参数为数组形式，可以一次性引入多个前端库，可以使用数组的键作为要引入资源的版本号。如果不指定版本号，则引入`bootcdn`上面的最新版本的类库。 >[info] 当需要引入weui的时候，如果不指定版本号，则会引入bootcdn上面的最新版本的类库，而这个版本是不适用于微信官方文档上面的weui示例的。所以如果你是按照[微信官方文档](http://http://mp.weixin.qq.com/wiki/2/ae9782fb42e47ad79eb7b361c2149d16.html)的教程来使用weui的，你需要指定要引入的weui版本为 **0.4.3** ### DEMO 指定版本号为0.4.3 ``` <html> <head> <title>豆信功能演示</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> {:hook('jssdk', false)} {:hook('import_css', array('0.4.3'=>'weui'))} <style> .container { padding: 20px; } </style> </head> <body> <div class="container"> <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a> </div> {:hook('import_js', array('jquery', 'vue'))} </body> </html> ``` ![](https://box.kancloud.cn/d537721338e281b3f013d81e58f45291_411x729.png) 不指定版本号 ``` <html> <head> <title>豆信功能演示</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> {:hook('jssdk', false)} {:hook('import_css', array('weui'))} <style> .container { padding: 20px; } </style> </head> <body> <div class="container">  <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>  <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a> </div> {:hook('import_js', array('jquery', 'vue'))} </body> </html> ``` ![](https://box.kancloud.cn/ee5ae1eb874c4089e238af80cfb4cf1b_368x654.png)