小程序引入第三方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>

效果如下：

转载于:https://www.cnblogs.com/liruoruo/articles/10130672.html