微信小程序使用iconfont及引入vant-icon使用iconfont

（此步骤时可以精简文件，只复制保留iconfontwxss文件到assets/iconfont文件下，其余文件删除，依然会正常显示图标）

准备工作到此已经完成，接下来进入项目配置使用；

可以使用view text等标签引入iconfont；

页面效果：

其中：

引入VantUI组件内容可参考 VantUI官网快速上手 进行配置；

页面效果：

Vant 是轻量、可靠的移动端 Vue 组件库，是 有赞前端团队开发的产品。

通过vue-cli3创建项目，用vue ui 命令打开图形化界面，点击安装依赖按钮，然后搜索vant，安装。

安装完vant后，引入组件，才能使用。这里我选择自动按需引入组件，这也是官方推荐的一种引入方式。

babel-plugin-import  是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

# 安装插件

npm:   npm i babel-plugin-import -D

yarn:  yarn add babel-plugin-import --dev

然后，在 babelconfigjs 中配置

plugins: [

    ['import', {

      libraryName: 'vant',

      libraryDirectory: 'es',

      style: true    }, 'vant']

  ]

最后，就可以再组件中直接引入，使用vant组件了：

OK，完成！

wxml部分

<van-uploader file-list="{{ picture_list }}" preview-full-image="{{false}}" max-size="2048000" max-count="9" multiple="{{true}}" bind:after-read="afterRead" bind:delete="deleteImg" />

js部分

afterRead:function(event) {

const { file } = eventdetail;

    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式

    var obj={}

objpath=file;

    thisuploadimg(obj);

},

uploadimg:function(data) {

wxshowLoading({

title:'上传中',

        mask:true,

    })

var that =this,

        i = datai datai :0,

        success = datasuccess datasuccess :0,

        fail = datafail datafail :0;

    let userInfo=wxgetStorageSync('userInfo');

    let peopleId=userInfopeopleId;

    var picture_list = thatdatapicture_list;

    wxuploadFile({

url: baseUrl +'impl/uploadImg',

        filePath: datapath[i]path,

        name:'file',

        formData: {

'type':1,

            'peopleId':peopleId,

        },

        success: (res) => {

wxhideLoading();

            success++;

            let obj =  JSONparse(resdata)data;

            if(objhasOwnProperty('url')){

picture_listpush({

url:objurl,

                    id:objid

                });

                thatsetData({

picture_list

})

}

},

        fail: (err) => {

wxhideLoading();

            wxshowToast({

title:'上传失败!',

                icon:'none'

            })

fail++;

        },

        complete: () => {

i++;

            if (i == datapathlength) {//当传完时，停止调用

            }else {//若还没有传完，则继续调用函数

                datai = i;

                datasuccess = success;

                datafail = fail;

                thatuploadimg(data);//递归，回调自己

            }

}

});

},

deleteImg(e) {

let index=edetailindex;

    consolelog(index);

    let {picture_list}=thisdata;

    let that=this;

    wxshowModal({

content:'确定删除？',

        success: (res) => {

if (resconfirm) {

picture_listsplice(index,1);

                thatsetData({

picture_list

                })

consolelog(thatdatapicture_list);

            }else if (rescancel) {

consolelog('用户点击取消')

}

},

    })

},

拟设计一个设备故障状况选择器，需要三级联动，第一级：设备大类；第二级：设备细类；第三级：故障描述，如下图：

1、需要引入vant-picker，需要定制一个数组，包含三级即[一级，一级内容，子类[二级，二级内容，子类[三级，三级内容]]]，如下图

2、在vant-picker的onChange事件中，对上面数组进行分级控制。

3、难点，需要把数组按三级拆分出来，放到picker的三列中，控制不好就会各种报错。

1、json，引入vant-picker

2、wxml

绑定change confirm 2个必须事件

3、js文件

31 定义选项内容，需要分成三级

32 data 中实现picker3列

33 onChange 事件实现

34 常见问题

341 最后一级如果没有内容，vant-picker会报错，所以需要做一个空判断，如果为空，赋值一个常量

342 是使用value，还是选择使用自己定义的常量，需要调试看。value值已经获取到了三列数据，但是容易出错。我最后还是选择使用原来定义常量proSelectList。

41 三级数据齐全的选择

42 第三级如果为空，第三列使用默认数据

构建完会生成一个miniprogram_npm文件夹

（构建完如果编译报错，再构建一次就好了）

1、需要在想相对应的json文件里添加配置：

2、然后就可以在WXML文件里直接使用

Vant 是 有赞前端团队 开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。

目前 Vant 官方提供了 Vue 2 版本 、 Vue 3 版本 和 微信小程序版本 ，并由社区团队维护 React 版本 和 支付宝小程序版本 。

点击开发者工具中的菜单栏：工具 --> 构建 npm

vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。

官方地址： vant UI 组件库

将 appjson 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。

工具 -> 构建 npm

效果：

内置样式：>

项目需求：

想要知道如何在uniapp项目中引入使用小程序ui-vant weapp组件，首先得了解如果在uniapp项目中使用小程序组件

微信小程序组件 需要放在项目特殊文件夹 wxcomponents 。

在 pagesjson 对应页面的 style -> usingComponents 引入组件：

在页面中使用

我对这句话的理解是：

而我们想在uniapp项目中使用vant weapp微信小程序组件的诉求，其实是想在项目中任何位置都可以使用vant组件，所以我们需要全局注册vant小程序组件

>

以上就是关于微信小程序使用iconfont及引入vant-icon使用iconfont全部的内容，包括:微信小程序使用iconfont及引入vant-icon使用iconfont、vant的安装和使用步骤、微信小程序，引用vant-weapp库，上传组件uploader，支持多选等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！