前言:
WeUI 是微信官方设计团队为微信 Web 开发量身打造的一个 UI 样式库,你可以把它理解为一个前端框架,类似于 Bootstrap 的那种。 由于是微信官方出品,所以对微信的兼容性基本没有太大问题,而且各组件的样式和微信一样,能够和微信很好的融合在一起,给用户较好的体验。
一、准备工作
1.获取WeUI库
1.1 可以直接获取核心文件weui.css,获取该文件后在页面引入即可使用WeUI的组件。
//res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css 微信官方1.1.3版本
//res.wx.qq.com/open/libs/weui/0.4.3/weui.min.css 微信官方0.4.3版本
//cdn.bootcss.com/weui/0.4.3/style/weui.css BootCDN 0.4.3版本
//cdnjs.cloudflare.com/ajax/libs/weui/0.4.3/style/weui.css cdnjs 0.4.3版本
1.2 也可以使用npm进行下载,npm依赖于Node.js环境,要使用npm进行下载请确保你的电脑安 装了Node.js环境。
npm命令:npm install --save weui
2.搭建开发环境
2.1 在<head>标签里加入
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
2.2 导入weui.css
<link rel="stylesheet" type="text/css" href="../dist/style/weui.css" />
2.3 在<body>标签加上ontouchstart事件