微信小程序UI框架之【weui】怎样使用

青旅半醒 2022-09-05 04:04 220阅读 0赞

## 介绍 ##

官网：  
[https://weui.io/][https_weui.io]  
这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]

## 官方文档： ##

[https://developers.weixin.qq.com/miniprogram/dev/extended/weui/][https_developers.weixin.qq.com_miniprogram_dev_extended_weui]

## 使用方法demo： ##

## 安装 ##

方法一：  
使用bower进行安装

bower install --save weui

方法二：  
使用npm进行安装

> npm install --save weui

## 开发 ##

git clone https://github.com/weui/weui.git
    cd weui
    npm install -g gulp
    npm install
    gulp -ws

## 运行 ##

运行gulp -ws命令，会监听src目录下所有文件的变更，并且默认会在8080端口启动服务器，然后在浏览器打开http://localhost:8080/example。

## 手机预览 ##

请用微信扫码

## 单页面 引入&使用： ##

代码下载  
[https://github.com/Tencent/weui-wxss][https_github.com_Tencent_weui-wxss]  
WeUI 官方 Github：[https://github.com/weui/weui][https_github.com_Tencent_weui-wxss]  
WeUI 官方 Releases：https://github.com/weui/weui/releases  
WeUI 官方 Wiki：https://github.com/weui/weui/wiki  
WeUI 是一个样式库，核心文件就是 weui.css，如果用于生产环境，建议使用官方提供的 CDN 或下载官方最新的 Releases 引入即可，CDN 地址可以在官方 Wiki 中找到，生产环境建议使用压缩后的 weui.min.css 。 来个简单的范例：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
        <title>WeUI</title>
        
        <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
    </head>
    <body ontouchstart>
        
        <a href="" class="weui_btn weui_btn_primary">绿色按钮</a>
    </body>
    </html>

注意：

viewport 那个 meta 标签不要忘了加  
body 标签内有个 ontouchstart 属性也不要忘了  
这样就搞定了，你可以任意使用各种组件了，关于组件怎么使用，去看官方 Wiki 就好了，或者 F12 去扒官方 Demo 把他们的代码复制过来就行了，就是这么简单粗暴！

资料：  
[https://www.cnblogs.com/jing-zhe/p/11000971.html][https_www.cnblogs.com_jing-zhe_p_11000971.html]

[https://www.jianshu.com/p/6c8e55fc501b][https_www.jianshu.com_p_6c8e55fc501b]

[https://blog.csdn.net/weixin\_45416217/article/details/100697854][https_blog.csdn.net_weixin_45416217_article_details_100697854]

[https_weui.io]: https://weui.io/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20220829/527db31f01ef4cbfaa41a94ada1c1bf9.png
[https_developers.weixin.qq.com_miniprogram_dev_extended_weui]: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/
[https_github.com_Tencent_weui-wxss]: https://github.com/Tencent/weui-wxss
[https_www.cnblogs.com_jing-zhe_p_11000971.html]: https://www.cnblogs.com/jing-zhe/p/11000971.html
[https_www.jianshu.com_p_6c8e55fc501b]: https://www.jianshu.com/p/6c8e55fc501b
[https_blog.csdn.net_weixin_45416217_article_details_100697854]: https://blog.csdn.net/weixin_45416217/article/details/100697854