最近在学习微信小程序的使用,腾讯提供的原生控件已经可以满足大部分需求,但是目前很多效果以及控件没有办法满足当前需求,所以引入第三方就显得十分必要了。我这里引入的是第三方VantUI。在用vue写移动web的时候,踩了许多坑,所以这个第三方使用起来最为顺手。好在微信小程序目前最新的开发工具已经支持npm了,这无形中给我们提供了很大方便,但是配置起来我还是踩了很多坑,这里给大家出一个“踩坑实录”,旨在抛砖引玉。

  首先,第一步,新建项目:

  

项目名称大家随意。

第二步,按照微信小程序官方文档需要在小程序根目录下执行 (https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

npm install --production

但是我这边始终执行报错,仔细研究了一番报错,才发现是没有初始化项目,导致没有package.json文件导致报错。所以首先执行npm init 命令(信息都用默认的即可,一路回车到头):

第三步,执行官方要求的命令:

npm install --production

这里就安装成功了,环境准备好了,下面才是导入vantUI的步骤:

第四步:执行VantUI提供的安装命令:

npm i vant-weapp -S --production

这里我是用的是推荐的方式一,但是还是踩了坑(下面会继续说到)

第五步,启用npm,如图所示:

第六步,构建npm:

成功之后显示,并且可以看到多了一个:miniprogram_npm 目录(这里就是安装好的VantUI相关控件):

好的,这里我们就可以使用VantUI控件了,但是这里还有一些坑,我这边开始的时候一直报vantUI找不到控件的异常,仔细研究才发现npm需要更新了(确实版本比较老),执行命令:  npm install -g npm  

第七步,使用VantUI控件,首先进行导入:

"usingComponents": {
    "van-button": "miniprogram_npm/vant-weapp/button/index"
}

接下来使用控件:

可以看到,VantUI中的控件已经展示出来了!网上相关文章比较老旧,所以只能自己踩坑,现在分享出来,希望可以帮到大家!

Logo

前往低代码交流专区

更多推荐