微信小程序中使用vant UI组件所踩的坑

"Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。"

以上是在vant UI官网对vant UI的描述;

官网地址:https://youzan.github.io/vant-weapp/#/intro

在我注册完成小程序后,我就准备通过微信开发者工具来进行开发,之前并没有在微信小程序中引入第三方插件的经验,因此,我小心翼翼的按照官网的提示一步一步的进行,可是说真的,官网的使用步骤真的太粗略了,以至于我只能边看边摸索;

第一种方法      下载vant源码

1.直接通过 git 下载 Vant Weapp 源代码,并将dist目录拷贝到自己的项目中

git clone https://github.com/youzan/vant-weapp.git

我在我的项目根目录下新建了一个文件夹  vant-weapp,然后我把下载下来的dist文件夹拷贝的vant-weapp文件夹下

2.在需要使用的page中的json文件内引入组件

注意:引用路径以自己项目的实际路径为准

3.在index.wxml文件中使用组件

我将首页中获取用户授权的按钮换成了vant UI样式的按钮

第一种方法结束;

 

第二种方法     通过npm安装;

这种方法也是官方推荐的,可是这条路我却没有走通,在此我讲我的方法和遇到的问题列举出来,希望有能人志士可以为我指路;

1.新建小程序项目,我新建的项目名称为vantTest;

2.在小程序项目的更目录执行以下命令,来安装vant weapp

npm i vant-weapp -S --production

3.在微信开发者工具中->详情->项目设置中选中"使用npm模块"

4.在微信开发者工具->工具->构建npm

此时,控制台报错了,并且页面无法显示;

错误信息如下:

thirdScriptError 
 sdk uncaught third Error 
 module "miniprogram_npm/vant-weapp/common/utils" is not defined 
 Error: module "miniprogram_npm/vant-weapp/common/utils" is not defined
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718604)
    at http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718354
    at http://127.0.0.1:44143/appservice/miniprogram_npm/vant-weapp/badge-group/index.js:5:14
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718745)
    at <anonymous>:25:7
    at HTMLScriptElement.scriptLoaded (http://127.0.0.1:44143/appservice/appservice?t=1543388690933:3727:23)

此错误暂未解决,希望大神提供帮助;

猜你喜欢

转载自blog.csdn.net/qq_41725450/article/details/84584028