小程序中使用 vant-weapp

1、初始化(全部默认，一直按回车就行)：

npm init

2、构建npm模块：

npm install

根目录会生成两个新文件：

3、修改 project.config.json ：

"packNpmManually": true,
"packNpmRelationList": [
    {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
    }
],

注： 官方给的是 ./miniprogram/，实际上会报错，我们改成 ./ 就行。

4、安装 vant-weapp：

npm i @vant/weapp -S --production

5、在开发者工具中

(1)、找到顶部的项目 -> 重新打开此项目；

(2)、工具 -> 构建 npm;

即可完成在小程序端的 vant-weapp 安装。

 

---

 

以上传图片为例()：

index.wxml：

<van-uploader file-list="{{ fileList }}" deletable="{{ true }}" />

index.js：

fileList: [
    {
        url: 'https://img.yzcdn.cn/vant/leaf.jpg',
        name: '图片1',
    },
    {
        url: 'http://iph.href.lu/60x60?text=default',
        name: '图片2',
        isImage: true,
        deletable: true,
    },
],

 

单独引入(index.wxss)：

"usingComponents": {
    "van-uploader": "../../miniprogram_npm/@vant/weapp/uploader/index"
},

全局引入(app.json)：

"usingComponents": {
    "van-uploader": "@vant/weapp/uploader/index"
}

 

有一个说法，是app.json 中的 "style": "v2" 不删除样式会覆盖掉，但是我目前没看到有什么影响。