前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序 — wepy中使用有赞的vant-weapp组件

小程序 — wepy中使用有赞的vant-weapp组件

作者头像
Ewall
发布2018-11-07 15:21:39
2.7K0
发布2018-11-07 15:21:39
举报
文章被收录于专栏:vue学习

说下在wepy框架中如何使用开源组件,以有赞的vant组件为例,学会了这个其它的开源组件引入使用方式都一个道理。

1、安装

代码语言:javascript
复制
$ cnpm i vant-weapp -S --production

安装vant

2、引入并使用

  • 下载完成以后进入node_modules/_vant_weapp下的dist文件夹复制一份到src/components文件夹下,并替换名称为vant

引入并使用

  • 在页面的config中使用原生usingComponents属性引入组件;
代码语言:javascript
复制
config = {
    navigationBarTitleText: '首页',
    usingComponents: {
        'van-button': '../components/van/button/index'
    }
};
  • 然后就可以在页面中使用了。
代码语言:javascript
复制
<template>
    <view class="home">
        <van-button type="default">默认按钮</van-button>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
    </view>
</template>

显示效果

3、问题

  • 如果出现提示一直找不到文件,有可能是由于缓存导致的,执行以下清空下缓存就ok:
代码语言:javascript
复制
$ wepy build --no-cache --watch

error报错

  • 如何修改颜色大小等样式? 很简单,因为引入这个vant小程序组件,没有像在vue中经过了webpack打包,所以可以直接去源代码中修改。
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.10.19 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、安装
  • 2、引入并使用
  • 3、问题
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档