引入前端类库

在插件开发过程中，我们经常会遇到要引入一些前端类库的情况，比如引入weui、jquery、vue之类的开源库。豆信提供了import_css和import_js两个钩子用于前端类库的引入，使用的是http://www.bootcdn.cn/ 的CDN服务。

用法示例

  1. {:hook('import_css', array('0.4.3'=>'weui'))}
  1. {:hook('import_js', array('jquery', 'vue'))}

使用import_css和import_js两个钩子引入前端资源时，hook的第二个参数为数组形式，可以一次性引入多个前端库，可以使用数组的键作为要引入资源的版本号。如果不指定版本号，则引入bootcdn上面的最新版本的类库。

当需要引入weui的时候，如果不指定版本号，则会引入bootcdn上面的最新版本的类库，而这个版本是不适用于微信官方文档上面的weui示例的。所以如果你是按照微信官方文档的教程来使用weui的，你需要指定要引入的weui版本为 0.4.3

DEMO

指定版本号为0.4.3

  1. <html>
  2. <head>
  3.   <title>豆信功能演示</title>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6.   {:hook('jssdk', false)}
  7.   {:hook('import_css', array('0.4.3'=>'weui'))}
  8.   <style>
  9.     .container {
  10.       padding: 20px;
  11.     }
  12.   </style>
  13. </head>
  14. <body>
  15.   <div class="container">
  16.     <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
  17.     <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>
  18.   </div>
  19.   {:hook('import_js', array('jquery', 'vue'))}
  20. </body>
  21. </html>

引入前端资源 - 图1

不指定版本号

<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">
    <!-- 当引入的weui版本为0.4.3的时候显示正常 -->
    <a href="javascript:;" class="weui_btn weui_btn_primary">按钮</a>
    <!-- 当不指定weui版本的时候显示正常 -->
    <a href="javascript:;" class="weui-btn weui-btn_primary">按钮</a>
  </div>
  {:hook('import_js', array('jquery', 'vue'))}
</body>
</html>

引入前端资源 - 图2