小程序安装第三方组件库 如:vant

小程序安装第三方组件库 如:vant,第1张

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#bu-zou-yi-tong-guo-npm-an-zhuang

vant 小程序组件

第一步 先npm init 回车 初始化新建package.json文件

如果微信开发者工具无法输入命令 打开cmd面板 cd d:/ 进入目录 cd users 知道进入小程序项目目录输入命令

第二步 ## 安装

将 app.json 中的 "style": "v2" 去除,小程序的 新版基础组件 强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

开发者工具创建的项目, miniprogramRoot 默认为 miniprogram , package.json 在其外部,npm 构建无法正常工作。

需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

注意: 由于目前新版开发者工具创建的小程序目录文件结构问题,npm构建的文件目录为miniprogram_npm,并且开发工具会默认在当前目录下创建miniprogram_npm的文件名,所以新版本的miniprogramNpmDistDir配置为'./'即可

打开微信开发者工具,点击 工具 ->构建 npm ,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

如果你使用 typescript 开发小程序,还需要做如下 *** 作,以获得顺畅的开发体验。

请将 path/to/node_modules/@vant/weapp 修改为项目的 node_modules 中 @vant/weapp 所在的目录。

使用时:

https://vant-contrib.gitee.io/vant-weapp/#/quickstart#yin-ru-zu-jian

vant小程序使用说明文档

在 app.json 或 index.json 中引入组件,详细介绍见 快速上手 。

"usingComponents": {

"van-button": "@vant/weapp/button/index"

}

小程序js中引入组件如一下步骤:

1、准备好外部想要引入的外部文件,命名为util.js,并且填充固定的文件内容(一般是固定的库)。

2、打开util.js,继续填写重要内容将要使用的方法用module.exports给暴露出来。

3、将外部js放在指定的文件夹utils里(utils规定存放js库和数字格式化文件)。

4、在想要用到这个方法的js里面require这个js,然后调用即可。

创建组件的方法:

步骤一

在小程序项目中添加一个components文件夹,里面存放自定义的组件,然后在components目录下新建一个customComponent文件夹,文件夹可以命名为自定义组件名字相关,用来存放自定义的组件。

在这个文件夹右键,选择新建组件,输入组件名,一个自定义组件由 json, wxml, wxss, js4个文件组成,此时将自动生成这四个文件。

步骤二

接下来进行组件的相关配置:

首先需要在 json 文件中进行自定义组件声明(将component 字段设为 true 可这一组文件设为自定义组件

步骤三

引用组件:

在父级中:“useingComponents”:{

“命名”:“子级路径”,

}


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11960118.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存