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

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

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

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

页面效果：

其中：

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

页面效果：

vant兼容app，uniapp是可以用vant的，因为vant ui有h5版和微信小程序版，而从“uni-app247”起，H5和QQ小程序也支持了微信小程序

vant ui有h5版和微信小程序版。其h5版只能用于h5，其微信小程序版（vant weapp）可用于微信和App，从uni-app 247起，H5和QQ小程序也支持了微信小程序组件。

vant 很多组件带自定义样式custom-class，方便使用者修改或者扩展。

本文以vant-cell修改背景色为例，说明自定义属性的使用。

xml引入vant-cell

原始效果如下图

xml申明custom-class属性

wxss实现具体的样式

效果如下图，背景色样式已经被修改了，

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('用户点击取消')

}

},

    })

},

话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp

Github源码： >

以上就是关于微信小程序使用iconfont及引入vant-icon使用iconfont全部的内容，包括:微信小程序使用iconfont及引入vant-icon使用iconfont、vant兼容app吗、微信小程序之vant组件自定义样式（外部样式）等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！