XView小程序组件库本着简单易用的原则封装组件,使用时只需要在json配置文件中引用即可
官方链接:https://xview.weapp.xwzj88.cn/
下载地址:https://github.com/xwzj12138/Xview
- 基于微信小程序自定义组件封装
- 核心功能组件化
- 简化使用
- 18个常用组件
使用
到 GitHub 下载 xview 的代码,将 packages 目录拷贝到自己的项目中。然后按照如下的方式使用组件,以 Button 为例,其它组件在对应的文档页查看:
1,添加需要的组件。在页面的 json 中配置(路径根据自己项目位置配置):
{
"usingComponents": {
"x-button": "/packages/button/index"
}
}
2,在 wxml 中使用组件
<view class='title'>行内按钮</view>
<view>
<x-button bind:click="handleClick" inline>默认按钮</x-button>
<x-button bind:click="handleClick" type="error" long="true" inline>联通两边按钮</x-button>
<x-button bind:click="handleClick" type="primary" inline>Primary</x-button>
<x-button bind:click="handleClick" type="ghost" inline>Ghost</x-button>
<x-button bind:click="handleClick" type="info" inline>Info</x-button>
<x-button bind:click="handleClick" type="success" inline>Success</x-button>
<x-button bind:click="handleClick" type="warning" inline>Warning</x-button>
<x-button bind:click="handleClick" type="error" inline>Error</x-button>
</view>
我们内置了所有组件的示例,您可以扫描下方的小程序码体验
组件库当中大致可分为一下三大类:
布局组件
内置常用的布局组件。如:grid九宫格,cell单元格,nav标签栏,drawer抽屉等,还有部分组件还在测试用,这里就不举例了。
- geid 九宫格
- cell单元格
- nav标签栏
- drawer标签栏
-
商品导航:这个组件还在测试期,相信用不了多久就可以与大家见面了
基础组件
- button 按钮
- icon 图标
- avatar 头像
- steps 步骤条
- search 搜索
- notice-bar 通知栏
- loading 底部加载提示
- progress 进度条
- count-down 倒计时
表单组件
- input输入框
- input-number数字输入框
- rate评分组件
- switch组件
- upload组件
- 还有一些组件在开发测试中