微信小程序导入Vant-Weapp组件库及出错处理

微信小程序导入Vant-Weapp组件库及出错处理
一、下载Node.js*
链接:https://nodejs.org/en/
推荐选择LST的8.0以上版本,下载安装即可,安装完成后可以进行验证
cmd打开终端,输入vant-v出现对应版本即为安装成功,也可输入npm -v查看对应的npm版本

二、在微信开发工具做对应操作

链接:https://youzan.github.io/vant-weapp/#/intro 后续可根据开发指南进行操作

三、安装Vant组件库
选中miniprogram文件,右键选择在终端打开,输入 npm i vant-weapp -S --production 进行安装
安装完成后,在微信开发者工具窗口,选择“工具”->“构建npm",构建成功后,

在miniprogram下会出现miniprogram_npm文件夹,对应的下面的就是vant组件库

选择微信开发工具的详情

勾选”使用npm模块“选项,才算完成

四、测试安装是否成功

比如要在pagës/indeks/indeks里添加一个组件库里的button
在index.json中加入代码

修改上述路径,最终代码为:
“usingComponents”: {
“van-button”: “vant-weapp//button”
}

再在index.wxml中加入代码

如加入一个危险按钮
危险按钮
按钮编译显示成功则安装成功

五、可能错误
可能报如下两个错误
1、jsEnginScriptError
Component is not found in path “pages/help/vant-weapp/dist/button” (using by “pages/help/help”)
Error: Component is not found in path “pages/help/vant-weapp/dist/button” (using by “pages/help/help”)

2、thirdScriptError sdk uncaught third Error module “miniprogram_npm/vant-weapp/picker/shared” is not defined Error: module “miniprogram_npm/vant-weapp/picker/shared” is not defined at require …

可能是安装错误,可以手动删除miniprogram_npm后重新安装,再次尝试,可能还会有第二个错误,进入项目文件夹下,将miniprogram下的node_modules里的vant-weapp下的dist复制到miniprogram_npm的vant-weapp下,问题解决。

-------------------------------------------------------以下实际项目安装步骤-------------------------------------------------------------------------------------------

原文地址:https://www.cnblogs.com/yehuisir/p/12266078.html

时间: 2024-08-07 12:10:14

微信小程序导入Vant-Weapp组件库及出错处理的相关文章

微信小程序引入Vant组件库

前期准备 Vant Weapp组件库:https://youzan.github.io/vant-weapp/#/intro 1.先在微信开发者工具中打开项目的终端: 然后初始化一个package.json文件:输入命令:npm init 然后一路回车默认的即可: npm init 项目就回产生一个package.json文件: { "name": "miniprogram", "version": "1.0.0", &quo

在小程序中使用第三方组件库里的组件

在小程序开发中 有时候有我用到第三方的组件,下面以Vant Weapp组件库为例 有两种方式: 一.直接去github下载他们的源代码. 具体看这位老哥的文章:https://www.jianshu.com/p/7c6a798c6d57 二.通过npm的方式 具体看这位老哥的文章:https://segmentfault.com/a/1190000016376876 原文地址:https://www.cnblogs.com/jervy/p/12026307.html

微信小程序开发-地图map组件上使用input组件

微信小程序开发-地图map组件上使用input组件 标签: 微信小程序 uni-app 原生组件层级关系 微信小程序在最高层级 在微信小程序中原生组件包括camera canvas input(仅在focus时表现为原生组件) live-player live-pusher map textarea video 在微信小程序开发中原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 后插入的原生组件可以覆盖之前的原生组件. 原生组件还无法在 pic

微信小程序——引入Vant组件库

背景 在微信小程序开发过程中,使用第三方组件库,高效便捷的使用 步骤 安装npm 右键小程序根目录,打开终端 输入:npm init Next 安装vant组件 右键小程序根目录,打开终端 输入:npm i @vant/weapp -S --production 构建npm 使用npm模块 完成 原文地址:https://www.cnblogs.com/zuiyue_jing/p/12260245.html

微信小程序开发05-日历组件的实现

接上文:微信小程序开发04-打造自己的UI库 github地址:https://github.com/yexiaochai/wxdemo 我们这里继续实现我们的日历组件,这个日历组件稍微有点特殊,算是相对复杂的组件了,然后一般的日历组件又会有很多的变化,所以我们这里实现最基本的标签即可: 1 let View = require('behavior-view'); 2 const util = require('../utils/util.js'); 3 4 // const dateUtil

微信小程序开发—快速掌握组件及API的方法---转载

微信小程序框架为开发者提供了一系列的组件和API接口. 组件主要完成小程序的视图部分,例如文字.图片显示.API主要完成逻辑功能,例如网络请求.数据存储.音视频播放控制,以及微信开放的微信登录.微信支付等功能. 组件 官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 对于开发文档,个人建议先了解其整体框架,了解其提供了哪些组件,再联想到这些组件会用在哪些产品的哪些功能.对于接口也是一样,整体了解,而不需要细看. 熟悉了文档的结构,

微信小程序导入微信聊天记录文件

最近看了篇文章https://mp.weixin.qq.com/s/6SGW87jeTNbT1rynCHr7GA了解到微信小程序可以将微信聊天记录里面的文件导入到小程序中使用,如下图,具体可到腾讯文档小程序中体验下. 没有经常关注小程序文档更新的小伙伴可能不知道这是用了哪个接口,传送门在这,其实是调用了wx.chooseMessageFile这个接口,有了这个接口,就可以很方便的处理微信中的文件了. 原文地址:https://www.cnblogs.com/yuanzp/p/10346866.h

微信小程序(3)——常用的组件

view: view是小程序中的视图容器之一,似于html中的<div>标签 <view class="section"> <view class="section__title">flex-direction: row</view> <view class="flex-wrp" style="flex-direction:row;"> <view class=

手摸手教你微信小程序开发之自定义组件

前言 相信大家在开发小程序时会遇到某个功能多次使用的情况,比如弹出框.这个时候大家首先想到的是组件化开发,就是把弹出框封装成一个组件,然后哪里使用哪里就调用,对,看来大家都是有思路的人,但是要怎样实现呢.可能你会去看官方文档,但是微信的官方文档也是说的不太清楚,所以写起来也是非常痛苦.今天就带大家手摸手开发微信组件,坐稳了,马路杀手要开车了. 具体实现 我们先实现个简单的弹窗组件,详情图如下: 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,