【2019.06.17】微信小程序WeUI应用实例——九宫格页面显示

1.GitHub下载WeUI源码并导入微信开发者工具

https://github.com/Tencent/weui-wxss
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

• 解压后使用微信开发者程序导入
  注：
  用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）
  
  导入成功后显示
  

2、在自己小程序中使用WeUI中的九宫格 实例

1. 将 WeUI源码中style路径下weui.wxss 复制到自己小程序中

新建一个thirdparty，将weui.wxss复制到该路径下

• WeUI
  
• 自己小程序
  
  在app.wxss 中添加引用@import 'thirdparty/weui.wxss';

/**app.wxss**/

@import 'thirdparty/weui.wxss';

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
} 

2、将WeUI项目中example/grid 路径下的gird.js和gird.wxml 复制到自己小程序中

在自己小程序项目pages目录下新建demogrid目录，将gird.js和gird.wxml复制到该路径下，并重命名demogird.js和demogird.wxml

• WeUI
  

• 自己小程序
  

3、在app.json进行配置

在 pages数组中添加"pages/demogrid/demogrid"
在新建的tarBar中添加{ "pagePath": "pages/demogrid/demogrid", "text": "九宫格" }]

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/demogrid/demogrid"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },
    {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    },
    {
      "pagePath": "pages/demogrid/demogrid",
      "text": "九宫格"
    }]
  }
}

4、结果展示

可以对demogird.js和demogird.wxml进行一定的修改
demogird.js 显示12个宫格

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

demogird.wxml 更改显示宫格的内容

<view class="page">
    <view class="page__hd">
        <view class="page__title">Grid</view>
        <view class="page__desc">九宫格</view>
    </view>
    <view class="page__bd">
        <view class="weui-grids">
            <block wx:for="{{grids}}" wx:key="*this">
                <navigator url="" class="weui-grid" hover-class="weui-grid_active">
                    <image class="weui-grid__icon" src="../images/icon_tabbar.png" />
                    <view class="weui-grid__label">Grid</view>
                </navigator>
            </block>
        </view>
    </view>
</view>

编译

结果

九宫格demo结束
如果有帮助到你
请点赞关注