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

最新推荐文章于 2024-03-15 17:07:37 发布

南北极之间

最新推荐文章于 2024-03-15 17:07:37 发布

阅读量2.7k

点赞数

分类专栏：前端开发小程序

本文链接：https://blog.csdn.net/qq_22182989/article/details/119740277

版权

前端开发同时被 2 个专栏收录

563 篇文章 44 订阅

订阅专栏

小程序

49 篇文章 3 订阅

订阅专栏

介绍

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

官方文档：

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
WeUI 官方 Github：https://github.com/weui/weui
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>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="http://res.wx.qq.com/open/libs/weui/0.4.0/weui.min.css">
</head>
<body ontouchstart>
    <!-- 使用 WeUI -->
    <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.jianshu.com/p/6c8e55fc501b

https://blog.csdn.net/weixin_45416217/article/details/100697854

南北极之间

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信小程序UI框架之【weui】怎样使用

介绍官网：https://weui.io/这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。官方文档：https://developers.weixin.qq.com/miniprogram/dev/extended/weui/使用方法demo：安装方法一：使用bower进行安装bower install --save weui方法二：使用npm进行安装n
复制链接

扫一扫