jquery weui的使用
的有关信息介绍如下:weui是一套基于微信的的css架构,使用它我们可以做出类似微信结构的页面,在微信小程序开发中它经常被使用。
jQuery WeUI 依赖weui.css和jQuery,使用jqueryweui时候要保证jquery的版本是V1.7.0以上。
jquery-weui的引入,如果想下载到本地使用可以使用:npm install jquery-weui下载 不过这样需要编译,建议直接下载官方编译好的包使用 https://github.com/lihongxun945/jquery-weui/archive/build.zip
如下图所示
还有更方便的方式那就是直接使用CDN,官方推荐的cdn地址如下,我们只需在网页中引入即可使用。
如下图所示,我将以上cdn添加进去
jquery weui有很多组件例如:按钮,表单,列表,对话框等等
我们先看看weui的九宫格的样式使用,如下所示图一就是九宫格效果
我们自己来写几个类似的格子,body代码如下:
具体代码如图一所示
注意img里面是个图片链接地址,为了不影响体验所以我这里空着
效果如图二所示:
weui的按钮也是经常用到的,如何用weui样式做个按钮呢?
如下class中加入weui-btn weui-btn_primary即可
除了这种按钮还有很多,只要加入相对的class样式即可,如下
刷新页面我们将看到这些按钮的样子,如图二所示,更多按钮样式可以仔细去阅读官方文档
Cell,列表视图,也就是页面的一些类容等等的展示
例如我们写一个,代表可以点开的标题列表
刷新页面我们将看到这两个列表,如图二
当然还有单选列表,复选列表等等,也是引入相对的样式即可实现。
最后我们在看一个图片上传的表单样式
如下我们通过weui实现一个文件上传的样式:
实现代码如下图所示:
刷新页面后的效果如图二所示,第一张图是完成上传的,第二种代表上传错误,第三张正在上传,第四个位置是上传位置