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

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

1、安装

$ cnpm i vant-weapp -S --production

安装vant

2、引入并使用

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

引入并使用

• 在页面的config中使用原生usingComponents属性引入组件；

config = {
    navigationBarTitleText: '首页',
    usingComponents: {
        'van-button': '../components/van/button/index'
    }
};

• 然后就可以在页面中使用了。

<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：

$ wepy build --no-cache --watch

error报错

• 如何修改颜色大小等样式？
  很简单，因为引入这个vant小程序组件，没有像在vue中经过了webpack打包，所以可以直接去源代码中修改。