您的位置首页百科知识

jquery weui的使用

jquery weui的使用

的有关信息介绍如下:

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实现一个文件上传的样式:

实现代码如下图所示:

刷新页面后的效果如图二所示,第一张图是完成上传的,第二种代表上传错误,第三张正在上传,第四个位置是上传位置