XView小程序开源组件库

XView小程序开源组件库

• XView小程序组件库本着简单易用的原则封装组件，使用时只需要在json配置文件中引用即可
• 使用
• 组件库当中大致可分为一下三大类：
• 布局组件
• 基础组件
• 表单组件

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抽屉等，还有部分组件还在测试用，这里就不举例了。

1. geid 九宫格
2. cell单元格
3. nav标签栏
4. drawer标签栏
5. 商品导航：这个组件还在测试期，相信用不了多久就可以与大家见面了

基础组件

1. button 按钮
2. icon 图标
3. avatar 头像
4. steps 步骤条
5. search 搜索
6. notice-bar 通知栏
7. loading 底部加载提示
8. progress 进度条
9. count-down 倒计时

表单组件

1. input输入框
2. input-number数字输入框
3. rate评分组件
4. switch组件
5. upload组件
6. 还有一些组件在开发测试中