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

小灰灰 2022-10-02 01:57 341阅读 0赞

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

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

*  解压后使用微信开发者程序导入  
    注：  
    用微信web开发者工具打开dist目录（请注意，是dist目录，不是整个项目）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1]  
    导入成功后显示  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 2]

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

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

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

*  WeUI  
    ![在这里插入图片描述][20190617005105449.png]
 *  自己小程序  
    ![在这里插入图片描述][20190617005213444.png]  
    在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  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 3]
 *  自己小程序  
    ![在这里插入图片描述][20190617005711472.png]

# 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` 更改显示宫格的内容

编译

结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 4]  
九宫格demo结束  
如果有帮助到你  
请点赞关注

[https_github.com_Tencent_weui-wxss]: https://github.com/Tencent/weui-wxss
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70]: /images/20220113/28caeafb977f40e8a9177b101b7246e7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 1]: /images/20220113/57ffeb9b8257435283bae63afb6d1267.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 2]: /images/20220113/f4563ab593e64acb8b32b038a2c97fd9.png
[20190617005105449.png]: /images/20220113/d2df4b04acb849fe99aed12f4d53d5d0.png
[20190617005213444.png]: /images/20220113/179c210a796c448d9c7551df69390ee4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 3]: /images/20220113/191c4b6b86e743e9a974d858eda7610d.png
[20190617005711472.png]: /images/20220113/b8c0925022ab44b7ae7d602f93f952b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NTM0MTA3_size_16_color_FFFFFF_t_70 4]: /images/20220113/986272f07d0041699e5f950efab985f3.png