Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

使用wepy开发小程序,如何使用这个ui框架 #413

Closed
wisdomQiuqiu opened this issue Aug 13, 2018 · 21 comments

Comments

Projects
None yet
@wisdomQiuqiu
Copy link

commented Aug 13, 2018

使用wepy开发小程序,如何使用这个ui框架

@ityao

This comment has been minimized.

Copy link

commented Aug 13, 2018

同问, 按照说明引用好像不行,

CLI报错:找不到组件

@ityao

This comment has been minimized.

Copy link

commented Aug 13, 2018

写成这样在config里面声明好像可以用, 要重新启动wepy进行编译

export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '样例页面',
      usingComponents: {
        'van-button': '../components/vant/button/index'
      }
    }
@garvisjack

This comment has been minimized.

Copy link

commented Aug 22, 2018

同求,困扰很久
Component is not found in path "path/to/vant-weapp/dist/button/index" (using by "pages/main/index")

@aloneszjl

This comment has been minimized.

Copy link

commented Aug 22, 2018

1、跑 npm i vant-weapp -S --production
2、跑去node_modules/want-weapp 把 dist 文件夹copy到你项目src/components/dist里面去,这里我把dist名字换成van,所以是src/components/van
3、然后就可以用了,附上截图
image

@stone009

This comment has been minimized.

Copy link

commented Aug 23, 2018

button库好像一直提示找不到文件,大家有遇到吗?

image

这样直接也用不了

usingComponents: {
        'van-cell': '/components/van/cell/index',
        'van-cell-group': '/components/van/cell-group/index',
        'van-button': '/components/van/button/index'
      }

=====================================
更新,出现上面这个问题可能是由于缓存导致的。
执行以下命令,更新一下缓存就OK了。

wepy build --no-cache --watch

@chenjiahan chenjiahan added the question label Sep 19, 2018

@531431988

This comment has been minimized.

Copy link

commented Sep 21, 2018

1、跑 npm i vant-weapp -S --production
2、跑去node_modules/want-weapp 把 dist 文件夹copy到你项目src/components/dist里面去,这里我把dist名字换成van,所以是src/components/van
3、然后就可以用了,附上截图
image

你这种方式还用npm干嘛?直接down下载dist考进去不就完了,大家想问的应该都是如何不手动考如,如何配置

@wallowbear

This comment has been minimized.

Copy link

commented Sep 30, 2018

写成这样在config里面声明好像可以用, 要重新启动wepy进行编译

export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: '样例页面',
      usingComponents: {
        'van-button': '../components/vant/button/index'
      }
    }

可以用,但这种写在config里的方式是不是有点另类,能和wepy试试一样写在componet桔构里就好了

@chenjiahan chenjiahan changed the title 新增功能 使用wepy开发小程序,如何使用这个ui框架 使用wepy开发小程序,如何使用这个ui框架 Sep 30, 2018

@yurizhang

This comment has been minimized.

Copy link

commented Oct 10, 2018

@chenjiahan 这个官方有没有什么明确的方案啊?

@Robinbiao

This comment has been minimized.

Copy link

commented Oct 25, 2018

请问下怎么使用js触发的toast类组件 ???

@teo001

This comment has been minimized.

Copy link

commented Nov 5, 2018

能否全局引入?

@chaim1986

This comment has been minimized.

Copy link

commented Nov 6, 2018

其实可以参考下minui的做法 做个类似min命令,我觉得就很不错哦,期待vant-weapp更新下。

@yushengyuan1993

This comment has been minimized.

Copy link

commented Dec 21, 2018

同样使用wepy-cli快速生成的小程序,目前可以使用组件:

  1. 直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中
git clone https://github.com/youzan/vant-weapp.git
  1. 将dist/目录拷贝到项目src/components/目录下面(根据自己目录结构调整)。
  2. 在页面test.wpy中的config字段使用
config = {
  usingComponents: {
    'van-popup': '../../components/dist/popup/index'
  }
}
  1. 使用,页面中:
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>

@rex-zsd rex-zsd pinned this issue Dec 26, 2018

@echoisles

This comment has been minimized.

Copy link

commented Dec 27, 2018

在组件中如何使用呢 这个方法只能在 pages 中使用

@Eamonnzhang

This comment has been minimized.

Copy link

commented Dec 28, 2018

在组件中如何使用呢 这个方法只能在 pages 中使用

在组件所在的page里声明就好了

@jy1989

This comment has been minimized.

Copy link

commented Jan 2, 2019

在app.wpy 用usingComponents引入可正常使用

@AllenChinese

This comment has been minimized.

Copy link

commented Jan 5, 2019

screenshot 2019-01-05_15-18-04

1、通过 npm 安装 vant-weapp 后,会在 node_modules 出现 vant-weapp 文件夹

2、小程序开发工具中 ——> 工具栏 ——> 构建 npm, 成功后根路径生成 miniprogram_npm 文件夹

3、.json中引入 miniprogram_npm 中对应的组件,而非 node_modules 中的

"usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/button/index" }

@nyaapass

This comment has been minimized.

Copy link
Contributor

commented Mar 18, 2019

screenshot 2019-01-05_15-18-04

1、通过 npm 安装 vant-weapp 后,会在 node_modules 出现 vant-weapp 文件夹

2、小程序开发工具中 ——> 工具栏 ——> 构建 npm, 成功后根路径生成 miniprogram_npm 文件夹

3、.json中引入 miniprogram_npm 中对应的组件,而非 node_modules 中的

"usingComponents": { "van-button": "/miniprogram_npm/vant-weapp/button/index" }

这种引入方式好像只适用于原生, wepy 的情况下似乎不行:

小程序官方文档中有说不允许 node_modules 在小程序根目录外, 而 wepy 项目的 miniprogramRoot 是指向 dist 的, 除非在 dist 目录里重新 npm init 生成 node_modules, 不然点击 构建 npm 按钮肯定会报错:

没有找到 node_modules 目录。

@ctcx

This comment has been minimized.

Copy link

commented Mar 29, 2019

建议官方跟进,毕竟现在使用wepy开发小程序的越来越多了~

@rex-zsd

This comment has been minimized.

Copy link
Collaborator

commented Apr 2, 2019

建议官方跟进,毕竟现在使用wepy开发小程序的越来越多了~

vant-weapp是一个小程序原生的组件库,按照wepy官方的原生组件引入方式就可以了。
还是多给wepy提提issue让他们更好地支持原生组件吧。

@BruceLeung

This comment has been minimized.

Copy link

commented Apr 10, 2019

同样使用wepy-CLI快速生成的小程序,目前可以使用组件:

  1. 直接通过git 下载Vant Weapp源代码,并将dist目录拷贝到自己的项目中
git clone https://github.com/youzan/vant-weapp.git
  1. 将DIST /目录拷贝到项目的src /组件/目录下面(根据自己目录结构调整)。
  2. 在页面test.wpy中的配置字段使用
config = {
  usingComponents: {
    'van-popup': '../../components/dist/popup/index'
  }
}
  1. 使用,页面中:
<van-popup show="{{ show }}" bind:close="onClose">内容</van-popup>

请问你的onClose事件在哪里注册?我的写了说找不到这个方法,不论是写在methods = {}里面还是和methods = {}同级都不行

@vm0100

This comment has been minimized.

Copy link

commented Apr 12, 2019

我把wepy-plugin-iview 改成了wepy-plugin-vant 可以很轻松的引入vant的组件了了 哈哈哈
使用方式见 https://github.com/vm0100/wepy-plugin-vant.git

@chenjiahan chenjiahan closed this May 24, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.