用于微信公众号开发的 UI 库 jQuery WeUI

Love The Way You Lie 2022-05-20 06:47 390阅读 0赞

jQuery WeUI 详细介绍

jQuery WeUI 是 WeUI 的一个 jQuery 实现版本，除实现了官方插件之外，它还提供了如下拉刷新、日历、地址选择器等丰富的拓展组件。jQuery WeUI 中的 JS 组件均是以 jQuery 插件的形式提供，使用非常方便，并且可以和 React、Angular、Vue.js 之类的主流 JS 框架一起使用。

[WeUI ][WeUI]是微信官方团队针对微信提供的一个 H5 UI 库，它只提供了一组 CSS 组件。jQuery WeUI 中使用的是官方 WeUI 的 CSS 代码，并提供了 jQuery/Zepto 版本的 API 实现。因为直接使用了官方的 CSS，所以你不用担心跟官方版本的冲突。实际上 jQuery WeUI == WeUI + jQuery插件。

![113600_h5M0_2672425.png][]![113624_rWGT_2672425.png][]![113640_WY47_2672425.png][]![113655_AXc2_2672425.png][]

**简洁强大的 API**

如果你使用过 jQuery，那么你使用 jQuery WeUI 将没有任何障碍。所有的 JS 组件都是标准的 jQuery 插件：

//显示一个对话框
    $.alert("我是一个对话框");
    
    //弹出一个actionsheet
    $.actions({
      actions: [{
        text: "编辑",
        onClick: function() {
          //do something
        }
      },{
        text: "删除",
        onClick: function() {
          //do something
        }
      }]
    })

### 立刻使用 ###

推荐通过 npm 获取代码: npm install jquery-weui

依次引入如下文件后即可使用：

<link rel="stylesheet" href="/jquery-weui/dist/lib/weui.css">
    <link rel="stylesheet" href="/jquery-weui/dist/css/jquery-weui.css">
    
    
    <script src="/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
    <script src="/jquery-weui/dist/js/jquery-weui.js"></script>

其中 weui.css 是官方的版本，并未做任何修改。

建议自行 clone 并编译代码 [jQuery WeUI][]。

如果你不会编译，可以直接切换到 build 分支，其中的 dist 目录下就是全部编译好的代码。

或者点击这里直接下载 [jQuery WeUI][jQuery WeUI 1]。

[WeUI]: https://www.oschina.net/p/weui
[113600_h5M0_2672425.png]: http://static.oschina.net/uploads/space/2016/0324/113600_h5M0_2672425.png
[113624_rWGT_2672425.png]: http://static.oschina.net/uploads/space/2016/0324/113624_rWGT_2672425.png
[113640_WY47_2672425.png]: http://static.oschina.net/uploads/space/2016/0324/113640_WY47_2672425.png
[113655_AXc2_2672425.png]: /images/20220520/c4ca1ec8affb4727a68ed8a89e49b0ca.png
[jQuery WeUI]: https://github.com/lihongxun945/jquery-weui
[jQuery WeUI 1]: https://github.com/lihongxun945/jquery-weui/archive/build.zip