新建一个空白的小程序工程，选择新建项目，填写项目名称、appId、项目目录之后，
就进入小程序的开发页面。
image.png
新建了小程序工程之后，我们就可以在这个工程上使用 WeUI 了。
使用 WeUI 进行开发可以简单分为两个步骤

1、导入 weui.wxss 文件
2、 参照 WeUI 提供的例子使用 WeUI 组件

接下来我们按步骤尝试。

第一步：导入 weui.wxss 文件

因为 weui.wxss 是样式文件，所以导入需要在工程的样式文件进行导入，在这里因为我 们是在项目全局使用 WeUI 的，所以在项目根目录的 app.wxss 文件进行导入。

weui.wxss 文件位于项目的 dist/style 目录下，我们在工程下创建 thirdparty 目录，把weui.wxss 文件拷贝进去

接着，在 app.wxss 导入 weui.wxss 文件。在 app.wxss 增加 import这一行的代码

  1. /**app.wxss**/ 
  2. @import 'thirdparty/weui.wxss';
  3. .container { 
  4.   height: 100%;
  5.   display: flex;
  6.   flex-direction: column;
  7.   align-items: center;
  8.   justify-content: space-between;
  9.   padding: 200rpx 0;
  10.   box-sizing: border-box;
  11. }

第二步：参照 weui 提供的例子使用 weui 组件

我们可以在 example 目录找到对应组件的视图层代码和逻辑层代码，比如我们要使用的九宫格，就位于 example 目录下的 grid。我们可以直接拷贝使用里面的代码。

为了演示我们自己依赖 weui 实现的九宫格，我们在上面创建的工程新建一个页面weuidemo，置于 pages 目录下
image.png
然后在 app.json 下增加一个 tabbar 相关配置，使得我们可以通过 tabbar 访问到这个页面

  1. { 
  2.   "pages": [ 
  3.     "pages/index/index", 
  4.     "pages/logs/logs", 
  5.     "pages/weuidemo/weuidemo" 
  6.   ],
  7.   "window": { 
  8.     "backgroundTextStyle": "light", 
  9.     "navigationBarBackgroundColor": "#fff", 
  10.     "navigationBarTitleText": "WeChat", 
  11.     "navigationBarTextStyle": "black" 
  12.   }, 
  13.   "tabBar": { 
  14.     "list": [ 
  15.       { 
  16.         "pagePath": "pages/index/index", 
  17.         "text": "首页", 
  18.         "iconPath": "", 
  19.         "selectedIconPath": "" 
  20.       }, 
  21.       { 
  22.         "pagePath": "pages/weuidemo/weuidemo", 
  23.         "text": "weuidemo", 
  24.         "iconPath": "", 
  25.         "selectedIconPath": "" 
  26.       } 
  27.     ] 
  28.   } 
  29. }

接着把 grid 目录下的 grid.wxml 代码拷贝到 weuidemo.wxml 文件

  1. <view class="page">
  2.   <view class="page__hd">
  3.     <view class="page__title">Grid</view>
  4.     <view class="page__desc">九宫格</view>
  5.   </view> <view class="page__bd">
  6.   <view class="weui-grids">
  7.     <block wx:for="{{grids}}" wx:key="*this">
  8.       <navigator url="" class="weui-grid" hover-class="weui-grid_active">
  9.         <image class="weui-grid__icon" src="../images/icon_tabbar.png" />
  10.                 <view class="weui-grid__label">Grid</view>
  11.       </navigator>
  12.     </block>
  13.   </view>
  14.   </view>
  15. </view>

对 grid.js 文件内容也拷贝到 weuidemo.wxml 文件

  1. Page({
  2.   data: {
  3.     grids: [0, 1, 2, 3, 4, 5, 6, 7, 8] 
  4.   } 
  5. });

然后点击重新编译，就能看到九宫格的初步效果
image.png