3.uniapp项目中引入小程序ui -vant weapp组件

项目需求：

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

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

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

在页面中使用

我对这句话的理解是：

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

>

微信小程序开发引入vant没反应是服务器崩溃造成的。微信小程序有很多，一部分是服务器不稳定的，如果在某个时间段有大量的人使用微信小程序，可能就会直接导致服务器崩溃。这种情况就是服务器崩溃造成的。

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

Github源码： >

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

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

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

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

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

}

},

    })

},

>

以上就是关于3.uniapp项目中引入小程序ui -vant weapp组件全部的内容，包括:3.uniapp项目中引入小程序ui -vant weapp组件、Vant小程序组件隐藏整条Tab标签 只显示内容、微信小程序开发引入vant没反应等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！