talkingdata / iview-weapp

一套高质量的微信小程序 UI 组件库

iView Weapp

一套高质量的微信小程序 UI 组件库

文档

http://inmap.talkingdata.com/wx/index_prod.html

体验

使用微信扫一扫体验小程序组件示例

快速上手

使用之前

在开始使用 iView Weapp 之前，你需要先阅读 微信小程序自定义组件 的相关文档。

如何使用

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己的项目中。然后按照如下的方式使用组件，以 Button 为例，其它组件在对应的文档页查看：

1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {
    "i-button": "../../dist/button/index"
}

2. 在 wxml 中使用组件：

<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>

预览所有组件

我们内置了所有组件的示例，您可以扫描右侧的小程序码体验，或按以下方式在微信开发者工具中查看：

# 从 GitHub 下载后，安装依赖
npm install

# 编译组件
npm run dev

然后，将 examples 目录在微信开发者工具中打开即可。

License

MIT

Copyright (c) 2018-present, TalkingData

iview-weapp's Issues

下载之后测试无法运行

您好，我将github仓库上所有代码打包下载到本地。解压iview-weapp-master之后，我将dist文件夹拷贝到example文件夹中。然后使用PC端的开发者工具是可以打开示例的。然而，当我使用远程调试的时候，在手机端是无法查看例子的，即页面没有渲染出来。并且在控制台显示：
WXMLRT_$gwx:./pages/icon/index.wxml:view:2:6: Now you can provide attr wx:key for a wx:for to improve performance.

我的微信和开发者工具均为最新版，手机型号为iphone6s和华为。

在官网上的二维码进入demo是没有问题的，文档中的npm方式未尝试。

请问这是什么问题呢？

Demo 跑的时候有错误

执行完 npm install
在执行 npm run dev的时候编译卡住。

i-button 微信开放能力bug

i-button open-type为getuserinfo时 无法绑定获取用户信息的事件 bindgetuserinfo无效

`mpvue`引入`iview-weapp`示例，组件直接引入，修改较少源码

目前没发现什么大问题，仅供参考
项目改写自官方示例，除特殊情况外(文档有详细说明)不需要修改源码

项目地址
插件地址

i-class不能改变i-button的color和background

i-class和行内style都不能改变i-button样式

index.wxml中应该是“ActionSheet 动作面板”，不是“ActionSheer 动作面板”

应该是个笔误

i-tab-bar 和 i-tar-bar-item

使用i-tab-bar和i-tab-bar-item的时候怎么定义每个tab要显示的页面，每个 tab显示的页面怎么与 i-tab-bar组件关联起来

TabBar与Tabs的点击触发区域太小

使用手机扫码预览组件示例的时候发现TabBar与Tabs的切换区域太小..好像只有文字部分被点击才能触发, 实际上假如一个标签栏被分成4个标签项时, 每个标签项的受点击区域应该是宽25%, 高100%才比较好用吧..

另外Input组件在获取/失去焦点时, placeholder会有闪烁现象...

是直接用开发者工具打开嘛

用小程序开发者工具加载，报错了！

关于i-tab-bar和i-tab-bar-item的问题

请问，使用i-tab-bar和i-tab-bar-item的时候怎么定义每个tab要显示的页面？我看了一下这两个组件，并没有设置tab页面的功能，如果是点击tab的时候用navigateTo方法跳转到指定的页面的话，跳转到页面是没有tabbar，我也想过在每个tab页面上都加个tabbar，但是tabbar会跟页面一起滑动，而且这样的做法太low了，所以很郁闷，不知道设计这两个组件的目的是什么？

想请问下，怎样在i-icon中增加自己的图标呢？想加入部分iconfont里的图标

在wepy的component自定义组件中可以引用iview吗

试了两种方法：
一种是使用官网指南usingComponents属性，但是wepy 的组件component实例中没有config这个属性，自然也就没有usingComponents；
另一种是使用import方法，但是iview的组件没有export；

是不是现阶段就不可以在自定义组件引用iview？？

`i-tab-bar`父级绑定`tap`事件，开发工具报错

i-tab-bar父级绑定tap事件，点击切换图标

<view bindtap="bindViewTap">
  <i-tab-bar current="{{ current }}" bindchange="handleChange">
      <i-tab-bar-item key="homepage" icon="homepage" current-icon="homepage_fill" title="Home"></i-tab-bar-item>
      <i-tab-bar-item key="group" icon="group" current-icon="group_fill" title="Friends"></i-tab-bar-item>
      <i-tab-bar-item key="remind" icon="remind" current-icon="remind_fill" count="3" title="Notice"></i-tab-bar-item>
      <i-tab-bar-item key="mine" icon="mine" current-icon="mine_fill" dot title="My"></i-tab-bar-item>
  </i-tab-bar>
</view>

点击切换tab，开发工具报错

iViewUI小程序Modal 对话框 打开普通对话框样式有问题

iViewUI小程序->Modal 对话框-> 打开 普通对话框 样式有问题，下方的两个圆角被覆盖了

编译的时候总出错

Finished 'default' 到这里就不动了。用开发者工具打开就提示no such file or directory \examples\game.json

UI引入后报错，这是为什么？

input输入框组件中发现几个小问题

1、收货人和联系电话的内容在获取焦点时位置会比之前低2px，视觉上像是抖动了一下
2、详细地址内容填完后，焦点切换到联系人再切换回详细地址，点输入法中的删除按键无效，点输入法左上角“完成”后，一切又正常

微信6.6.7 vivo x7 plus 搜狗输入法

请问这个UI框架只能用在微信小程序里吗？能否用来开发公众号的H5网页？

如题，谢谢！

对话框i-modal的大小如何调整？

没看到具体参数！

不知道怎么回事，设置了 show-ok、show-cancel 为 false，依然显示
<i-modal title="今天干了啥" visible="{{ dayDialogVisible }}" show-ok="false" show-cancel="false" bind:cancel="closeDialog" i-class="modal-style"> <i-row> <i-button...../> </i-row> </i-modal>

昨天我测试了一下，小程序也支持组件驼峰式命名，这样就可以和iview保持一致了

示例：

"usingComponents": {
    "iButton": "../../dist/button/index"
}

<iButton type="primary" bind:click="handleClick">这是一个按钮</iButton>

i-tabs的i-class设置背景颜色无效？

提供一种直接引入 src 的使用方式，可以方便修改自定义和修改主题样式

链接地址：
https://github.com/tolerance-go/weapp-start

直接拷贝src下的样式和组件

我的 weapp.config 配置方案，我项目主样式语言是 stylus，

module.exports = {
  plugins: [
    [
      'weapp-plugin-filter',
      {
        throw: /styles\/.*\.less$|\.styl$/, // 过滤了 iview 的样式主题文件
      },
    ],
    'weapp-plugin-eslint',
    [
      'weapp-plugin-babel',
      {
        ignore: /we7\/(util|base64|htmlToWxml|md5|underscore|webview)\.js$/,
      },
    ],
    'weapp-plugin-require',
    'weapp-plugin-stylus',
    [
      'weapp-plugin-less',
      {
        match: /\.less$/,
      },
    ],
    [
      'weapp-plugin-replace',
      {
        match: /\.wxss$/,
        config: {
          find: /([0-9.]+)px/gi,
          replace: (match, count) => {
            return count * 2 + 'rpx';
          },
        },
      },
    ],
    'weapp-plugin-pug',
  ],
  env: {
    production: {
      plugins: [
        [
          'weapp-plugin-jsmin',
          {
            extra: true,
            ignore: /we7\/(util|base64|htmlToWxml|md5|underscore|webview)\.js$/,
          },
        ],
        'weapp-plugin-filemin',
        'weapp-plugin-imgmin',
        [
          'weapp-plugin-postcss',
          {
            plugins: [
              require('autoprefixer')({
                browsers: ['Android >= 2.3', 'Chrome > 20', 'iOS >= 6'],
              }),
            ],
          },
        ],
      ],
    },
  },
};

组件库的构建工具也可以从 gulp 换成 weapp-start

未来会提供mp-vue版本的兼容吗

加个日历插件就完美了

最近刚看到小程序版的iview，如果加个日历插件就完美了，单选，多选，可以有不同的颜色，

请给一个在 wepy 中使用的例子。。谢谢

请给一个在 wepy 中使用的例子。。谢谢

hi 请问官方文档站点的源码存放在哪边？

hi 请问官方文档站点的源码存放在哪边？

这个支持wepy吗？

RT

建议增加一个简单的富文本组件，支持文字、emojj表情等

缺一个PICKER

缺一个PICKER

开发者工具（版本号1.02.1806120）中使用 i-input 组件无法输入

开发者工具（版本号1.02.1806120），调试基础库 2.0.9，使用官方文档中的示例代码，在开发者工具中无法输入，无任何报错，使用真机预览正常

关于使用 ... 操作符的问题

小程序官方提供的是ES6转ES5，但是这样使用Promise将会出现问题。如果关闭ES6转ES5， ... 操作符将无法通过编译，能否提供一个方案解决这个问题呢？我目前是使用关闭ES6转ES5，并把 ... 操作都改掉的方法。

请问下作者，我可以借用这个ui框架 改写成一套使用mpvue的框架么

现在是不是只能在原生小程序里面用啊

现在是不是只能在原生小程序里面用啊

tab-bar怎么固定到页面底部呢？滚动的时候不变位置

建议

ui库非常好用，文件也很小，单位建议使用rpx ，建议加入Datetime组件

会开放设计资源么

scketch模板之类的

希望文档中可以加入图片实例

文档中的插件只有代码没有图片实例，希望可以加入图片实例

Drawer抽屉 建议添加上方弹出与下方弹出

执行npm run dev出现编译错误，这个是什么问题？

但是我在package.json目录下执行，出现了编译错误。这个是什么原因呀？
JovinsdeMacBook-Pro:iview-weapp Jovins$ npm run dev

[email protected] dev /Users/Jovins/Desktop/小程序/iview-weapp
gulp --gulpfile build/build-dev.js

sh: gulp: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] dev: gulp --gulpfile build/build-dev.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Jovins/.npm/_logs/2018-06-13T10_40_07_697Z-debug.log

[feature] document should be add a demo for mpvue

document should be add a demo for mpvue

文档中应当添加一个使用 mpvue 的例子

按钮没有操作反馈

按钮按下没有反馈

请问可以和mpvue集成使用吗？

有没有相关的示例代码呢？

编译之后 微信开发工具查看examples失败

(unknown) Error: ENOENT: no such file or directory, open 'E:\下载\iview-weapp-master\iview-weapp-master\examples\game.json'

input输入框，有时候下方没有分隔线，真机和开发工具上都没有

这个ui真的不错，目前发现个小问题，input输入框，下方有时候没有分隔线，真机和开发工具上都没有，看demo也有这个现象，收货人和联系电话之间没有分隔线。

目前Message等组件无法在组件中使用

目前组件中代码中默认从当前page中获取组件，导致无法在组件中使用

function getCtx (selector) {
const pages = getCurrentPages();
const ctx = pages[pages.length - 1];

const componentCtx = ctx.selectComponent(selector);

if (!componentCtx) {
    console.error('无法找到对应的组件，请按文档说明使用组件');
    return null;
}
return componentCtx;

}，

能否添加一个参数， 可以将ctx设置成当前组件

npm run dev在哪个根目录下执行的？

但是我在package.json目录下执行，出现了编译错误。这个是什么原因呀？
JovinsdeMacBook-Pro:iview-weapp Jovins$ npm run dev

[email protected] dev /Users/Jovins/Desktop/小程序/iview-weapp
gulp --gulpfile build/build-dev.js

sh: gulp: command not found
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! [email protected] dev: gulp --gulpfile build/build-dev.js
npm ERR! spawn ENOENT
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm WARN Local package.json exists, but node_modules missing, did you mean to install?

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/Jovins/.npm/_logs/2018-06-13T10_40_07_697Z-debug.log

搜索条

建议新增一个搜索条，这个还是比较常用的。

可不可添加一个表格，可以配置固定第一或者固定标题不动！！

i-tab-bar的使用场景问题

如果使用该组件替换官方的tabbar，那么该组件如何在全局使用呢？难道要在底部的4个page中都引入该组件吗？

请问如何在form里面使用i-button

<form bindsubmit="formSubmit" bindreset="formReset">
    ...
    <button formType="submit">提交申请</button>
    <i-button bind:click="formSubmit"  type="primary">Primary</i-button>
</form>

请问这种情况下ibutton怎么使用呀，直接调用formSubmit e.detail 是undefined。Panel properties里面也没有formType呢，谢谢。