WeUI学习总结(一)

WeUI 何求龙
文章标签: WeUI

前言

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事件

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :