银商小程序

weex-ui

开发银商小程序时，可以通过引入第三方UI库构建更为丰富多彩的界面。以下推荐 Weex-UI 的使用方式。

提示

银联商务脚手架工具 ums-toolkit v1.1.3 已经在项目初始化时默认配置好了 weex-ui ，开发者可以直接在项目中引用 weex-ui ，无需重复下载配置

Weex-UI 演示

Weex-UI是阿里推出一的套轻量级、高性能的UI组件库。银商小程序容器支持大部份Weex-UI组件。

在项目中安装Weex-UI

  • 安装 weex-ui
npm i weex-ui -S
  • 安装辅助插件
npm i babel-preset-stage-0 babel-plugin-component -D

babel-preset-stage-0 插件用于 babel 编译，babel-plugin-component 插件用于优化 weex-ui 包的组件引用。

  • 参数配置

添加 'state-0' 和 'babel-plugin-component' 到 .babelrc 文件中：

{
  "presets": ["es2015", "stage-0"],
  "plugins": [
    [
      "component",
      {
        "libraryName": "weex-ui",
        "libDir": "packages",
        "style": false
      }
    ]
  ]
}

使用Weex-UI

开发者可尝试修改小程序工程下的 src/index.vue 进行测试，使用Weex-UI示例代码如下：

<template>
  <div>
    <wxc-button text="Open Popup"
                @wxcButtonClicked="buttonClicked">
    </wxc-button>
    <wxc-popup width="500"
               pos="left"
               :show="isShow"
               @wxcPopupOverlayClicked="overlayClicked">
    </wxc-popup>
  </div>
</template>

<script>
  import { WxcButton, WxcPopup } from 'weex-ui';
  // or
  // import WxcButton from 'weex-ui/packages/wxc-button';
  // import WxcPopup from 'weex-ui/packages/wxc-popup';
  module.exports = {
    components: { WxcButton, WxcPopup },
    data: () => ({
      isShow: false
    }),
    methods: {
      buttonClicked () {
        this.isShow = true;
      },
      overlayClicked () {
        this.isShow = false;
      }
    }
  };
</script>

银商小程序容器支持的Weex-UI组件列表

Weex-UI组件列表如下：

  • 布局类组件
名称 类型 描述
wxc-button 按钮 支持4种基本类型button，可自定义样式
wxc-cell 单元格 可用作展示列表信息、链接或者表单等
* wxc-ep-slider 列表滑动 用于丰富slide功能，包括商品橱窗、图片列表等
wxc-lightbox 幻灯片 用于详情页面图片放大显示，支持一组图片的滑动
wxc-overlay 蒙层 支持蒙层动画配置
wxc-popup 弹层 用于筛选面板的包裹组件，支持四个方向的面板弹出
wxc-result 结果页 通用错误界面，用于包括通用错误、无商品、无网络等情况
wxc-slide-nav 视窗增大 用于上下滚动列表时，收起展开导航条
  • 页面导航类组件
名称 类型 描述
wxc-minibar 顶部导航栏 可以通过配置参数自定义导航栏功能
wxc-tab-bar 底部标签页 用于底部Tab切换页面，支持icon、text、iconFont形式的底栏
* wxc-tab-page 顶部标签页 用于顶部Tab切换页面，支持icon、text、iconFont形式的顶栏
  • 数据输入类型组件
名称 类型 描述
wxc-checkbox 复选框 建议以成组的方式出现
wxc-city 通用城市选择 可配置输入框、定位、热门城市、普通城市列表等
* wxc-slider-bar 滑动输入条 用于选择线性取值范围中某个具体值或者范围
wxc-countdown 倒计时 支持倒计时频率配置
wxc-radio 单选
wxc-stepper 步进器 常用于商品数量的小幅度修改
wxc-searchbar 输入框 一般可位于导航栏下方
  • 数据展示类型组件
名称 类型 描述
wxc-grid-select 多格筛选 网格形选择组件，支持单选，多选
wxc-icon 常用 iconFont
wxc-indexlist 索引列表 可通过索引快速定位列表内容
wxc-page-calendar 日历 支持单程、往返日历的选择，可显示节假日
wxc-rich-text 富文本 支持文件、图标、链接及标签形式的混排
wxc-simple-flow 简单流程图 支持主题色配置
wxc-tag 标签 支持实心标签、空心标签、特殊标签及图片标签
  • 反馈类型组件
名称 类型 描述
wxc-dialog 对话框 二次确认弹框组件，可以设置标题、内容、按钮定制等
wxc-loading 加载器 提示用户，界面正在加载中
wxc-mask 弹出层
wxc-progress 进度条 用于显示某个任务的当前进度
wxc-noticebar 通知栏 一般用于系统提示及活动提醒等
  • 游戏活动类型组件
名称 类型 描述
wxc-lottery-rain 红包雨游戏 通常在营销活动中使用
  • 服务类组件
名称 类型 描述
utils 功能函数 weex ui提供的公共函数服务

注意

上述组件中，标记 * 的，如 wxc-ep-slider,wxc-tab-page,wxc-slider-bar 这些富交互组件均依赖于 BindingX 特性，开发者在使用时应首先引入该解决方案。

← BindingX →