概述

之前我们举行Wijmo系列的公开课，许多用户对Wijmo很不熟悉，今天我们做了一个Wijmo从下载到安装，再到第一个Wijmo应用程序上手的博客。

首先我们Wijmo官网上下载试用版本（如果您有正式版也是同样的操作）

你会得到一个压缩包如：

直接解压缩就ok了，现在我们就拿到了Wijmo企业版的试用版。

\dist 是Wijmo的库文件（controls），模块互操作文件（interop），样式\主题文件（styles）

\Intellisense 智能提示文件用来配置Visual Studio，VsCode

\NpmImages 各个模块扩展

\Samples 示例代码里面分为JS\TS,每个模块里面分为Angular、Angular2、Ionic、Knockout、PureJS、React、Vue、Vue2

\VsTemplates Visual Studio扩展插件工具

\Wijmo3 Wijmo3的核心文件

知道了这些文件分类以及作用，下来我们就来新建我们第一个Wijmo应用

首先我们新建三个文件:FirstWjApp.html、FirstWjApp.js、FirstWjApp.css到项目文件下WJApp

在html文件中：

   1:  <!DOCTYPE html>

   2:  <html>

   3:  <head>

   4:      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

   5:      <meta name="robots" content="noindex, nofollow"/>

   6:      <meta name="googlebot" content="noindex, nofollow"/>

   7:      <title>FlexGrid</title>

   8:      <link rel="stylesheet" type="text/css" href="http://demo.grapecity.com.cn/wijmo5/resources/bootstrap.min.css"/>

   9:      <link rel="stylesheet" type="text/css" href="http://demo.grapecity.com.cn/wijmo5/resources/wijmo.min.css"/>

  10:      <script type="text/javascript" src="http://demo.grapecity.com.cn/wijmo5/resources/wijmo.min.js"></script>

  11:      <script type="text/javascript" src="http://demo.grapecity.com.cn/wijmo5/resources/wijmo.grid.min.js"></script>

  12:      <link rel="stylesheet" type="text/css" href="FirstWjApp.css"/>

  13:  </head>

  14:  <body>

  15:  <div class="container">

  16:   <!--目标元素-->

  17:    <h1>

  18:      FlexGrid

  19:    </h1>

  21:    <div id="therGrid">

  22:    </div>

23:

  24:  </div>

  25:  <script type="application/javascript" src="FirstWjApp.js"></script>

  26:  </body>

  27:  </html>

在这里面我们需要把相应的FirstWjApp.css、FirstWjApp.js引用进来。这样页面就完成了。

下来我们来编写FirstWjApp.css样式文件：

   1:  .wj-flexgrid {

   2:    max-height: 250px;

   3:    margin-bottom: 12px;

   4:  }

   5:  .header {

   6:    display: inline-block;

   7:    width: 150px;

   8:    text-align: right;

   9:    font-weight: normal;

  10:  }

主要是针对表格控件的样式在这个文件里定义

最后我们来编写FirstWjApp.js脚本：

   1:  onload = function() {

2:

   3:    // create some random data

   4:    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),

   5:      data = [];

   6:    for (var i = 0; i < 200; i++) {

   7:      data.push({

   8:        id: i,

   9:        country: countries[i % countries.length],

  10:        active: i % 5 != 0,

  11:        downloads: Math.round(Math.random() * 200000),

  12:        sales: Math.random() * 100000,

  13:        expenses: Math.random() * 50000

  14:      });

  15:    }

  16:    // default grid

  17:    var therGrid = new wijmo.grid.FlexGrid('#therGrid', {

  18:      itemsSource: data,

  19:    });

  20:  }

这里面我们完成两部分功能，

1、构造数据源

2、关联宿主元素

到此为止我们的第一个Wijmo的程序就ok了。运行一下吧：

第一个Wijmo程序