小程序 — 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打包,所以可以直接去源代码中修改。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学自动化测试

Selenium2+python自动化69-PhantomJS使用

前言 PhantomJS是一个没有界面的浏览器,本质上是它其实也就是一个浏览器,只是不在界面上展示。 PhantomJS非常适合爬虫方面,很多玩爬虫的都喜欢用这...

30440
来自专栏糊涂一二事

微信小程序文件上传下载应用场景

微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架、组件以及 API,在这个平台上面的想象空间很大。基于微信小程序轻便、快捷的特点,使用腾讯云简...

7.3K20
来自专栏张善友的专栏

Remoting: Server encountered an internal error

发生这个错误的原因是Remoting的一个配置项: <customErrors> 元素   指示此应用程序域中的服务器通道是否将经筛选的或完整的异常信息返回给本...

20370
来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

但需要注意的是在布局文件中,被引用的id要在引用位置的上面,否则会编译出错,如下:

13140
来自专栏无原型不设计

【Mockplus教程】复制/克隆

复制是将页面复制到内存中,克隆是直接创建一个和原页面内容一样的新页面。 1. 复制 选中需要复制的页面,鼠标右键单击,弹出的菜单中选择“复制”, 然后在...

32030
来自专栏DT乱“码”

微信小程序开发指引

官方文档教程1:http://bcoder.cn/wxopen/ 官方文档教程2:http://bing.aliaii.com/wxopen/  本文档将带你一...

571100
来自专栏Python

Git 忽略.idea/workspace.xml文件

在使用idea进行提交代码时,执行提交时一直出现modified:   .idea/workspace.xml 非常让人烦恼。

1.3K20
来自专栏猿人谷

相对路径和绝对路径的区别

在HTML里只要涉及文件的地方(如超级链接、图片等)就会涉及绝对路径与相对路径的概念。  1.绝对路径     绝对路径是指文件在硬盘上真正存在的路径。例如“b...

315100
来自专栏james大数据架构

jQuery打造智能提示插件二(可编辑下拉框)

在上一篇 jQuery打造智能提示插件 上改进,增加下拉按钮,修复点击下拉区域外不隐藏BUG 效果 ? js封装,注意红色部分为BUG修复,然后传入boxwid...

21850
来自专栏一“技”之长

AppleWatch开发入门三——代码交互与控制器生命周期

        在前两篇博客中,讨论了关于watch开发中框架与界面布局相关,然而主要的逻辑,终究还是要通过代码来实现的,在我们创建了项目之后,就会生成Inte...

8930

扫码关注云+社区

领取腾讯云代金券