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

注意事项

• 因为引入的是vant小程序版本，目前的最新稳定版本HBuilderX2.4.6还没有办法运行在H5端。会报错。 但是从HBuilderX2.4.7起，H5端也可以运行微信小程序组件。详细可以参考（https://uniapp.dcloud.io/frame?id=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81）
• 当在小程序端遇到报错时，先检查编译的目录结构中是否有wxcomponents/vant ，如果没有尝试关闭微信开发工具重新编译

引入方法

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

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

之后编辑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>

版权属于：ic翼

本文链接：https://bingyishow.top/Technical-article/166.html

您必须遵守 署名-非商业性使用-相同方式共享 CC BY-NC-SA 使用这篇文章