小程序引入第三方UI组件(vant-2)
在vant-1中提到在.wxml中直接使用组件,需要打开node_modules文件夹找到vant-weapp中的dist文件夹拷贝到miniprogram_npm文件夹下,同时把路径中的“path/to/”删除,其实没有那么麻烦,不需拷贝操作,正常的引入方式如下:
{ "navigationBarTitleText": "音乐播放器", "usingComponents": { "van-search": "/miniprogram_npm/vant-weapp/search/index", "van-button": "/miniprogram_npm/vant-weapp/button/index" } }
在wxml中的使用如下:
<van-search value="{{ value }}" placeholder="请输入搜索关键词" use-action-slot bind:search="onSearch"> <view slot="action" bind:tap="onSearch">搜索</view> </van-search> <view class='mytype'> <van-button plain type="primary">歌曲列表</van-button> <van-button plain type="default">我的最爱</van-button> <van-button plain type="default">搜索结果</van-button> </view>
效果如下:
当你微笑的时候,全世界都会对你微笑。