uni-app的使用分享(三)插件的使用

在vue中插件是我们非常喜欢的一个功能,它可以帮助我们快速开发我们的项目。在小程序中也有相应的功能。首先,我们先的了解一下什么是自定义组件

开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护。自定义组件在使用时与基础组件非常相似。

在uni-app中,引入方式则是需要在项目根目录下创建一个名字为wxcomponents的文件夹,在里面创建一个名为vant的文件夹,这里我们以vant组件为例子,介绍一下vant插件在uni-app中的使用。

首先,去vant官网下载小程序版本,然后能达到里面的dist文件夹,复制到vant文件夹下面。

然后,在page.json中配置,这里我们引入button

{
            "path" : "pages/index/index",
            "style" : {
                "navigationBarTitleText" : "首页",
                "enablePullDownRefresh" : true, //开启下拉刷新
                "onReachBottomDistance" : 50,
				"usingComponents" : {
				   "van-button" : "/wxcomponents/vant/dist/button/index",
				}
            }
        },

然后在index中使用,

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

此时就可以预览到效果啦。

 

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值