因为项目需要引入vant 的小程序版本,引入成功后有一些问题总结一下。

注意事项

引入方法

首先在github中下载 vant weapp。
地址:https://github.com/youzan/vant-weapp.git
然后解压找到dist文件夹准备下一步复制。

然后在你的项目根目录建立文件夹: wxcomponents/vant 。将vant weapp中dist目录粘贴到这里。结构如下。

1

之后编辑pages.json

{
    "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
// 你可以对某个pages进行单独使用
                "usingComponents": {
                  "van-button": "/wxcomponents/vant/dist/button/index"
                }
                
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
// 也可以这样全局使用,根据需要选择
        "usingComponents": {
          "van-button": "/wxcomponents/vant/dist/button/index"
        }
    }
}

然后打开index.vue文件,使用button组件

<van-button type="primary">按钮</van-button>

现在可以运行在微信开发工具查看效果了,未来2.4.7之后的版本应该可以在H5端运行。


注意变化

以search为例,在uni-app中使用需要修改原有vant的运行代码

原版

<van-search  
  value="{{ value }}"  
  placeholder="请输入搜索关键词"  
  show-action  
  bind:search="onSearch"  
  bind:cancel="onCancel"  
/>

uni-app版

<van-search 
:value="value" 
placeholder="请输入搜索关键词" 
show-action 
@search="onSearch"  
@cancel="onCancel"
></van-search>
最后修改:2019 年 12 月 27 日 08 : 13 PM
生活需要一些仪式感,比如手冲一杯咖啡:)