本文目录
- 小程序安装第三方组件库 如：vant
- 详解mpvue中使用vant时需要注意的onChange事件的坑
- 微信小程序－vant-weapp日历组件的使用（年月日）
- 微信小程序使用 Vant Weapp 的步骤
- 小程序的 iview Weapp 组件库的使用
- vant weapp的使用
- 微信小程序如何使用npm，使用vant组件
- 小程序使用 vant 快速创建页面
小程序安装第三方组件库 如：vant
***隐藏网址***
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 所在的目录。
使用时：
***隐藏网址*** vant小程序使用说明文档 在 app.json 或 index.json 中引入组件，详细介绍见 快速上手 。
"usingComponents": { "van-button": "@vant/weapp/button/index" }
详解mpvue中使用vant时需要注意的onChange事件的坑
最近用了一下VantWeapp组件库，但是由于我是用mpvue写的，所以自然跟小程序引用不一样，比如我最近引用了vant里面的collapse折叠面板，官网文档里面介绍的使用方法是这样的1.在app.json或index.json中引入组件"usingComponents":{"van-collapse":"path/to/vant-weapp/dist/collapse/index","van-collapse-item":"path/to/vant-weapp/dist/collapse-item/index"}2.通过value控制展开的面板列表，activeNames为数组格式《van-collapsevalue="{{activeNames}}"》《van-collapse-itemtitle="有赞微商城"name="1"》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle="有赞零售"name="2"》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle="有赞美业"name="3"disabled》线上拓客，随时预约，贴心顺手的开单收银《/van-collapse-item》《/van-collapse》Page({data:{activeNames:},onChange(event){this.setData({activeNames:event.detail});}});但是在mpvue里面不能直接这样引入下面是我的代码《van-collapse:value="activeNames"@change="onChange($event)"》《van-collapse-itemtitle="有赞微商城"name="1"》提供多样店铺模板，快速搭建网上商城《/van-collapse-item》《van-collapse-itemtitle="有赞零售"name="2"》网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失《/van-collapse-item》《van-collapse-itemtitle="有赞美业"name="3"disabled》线上拓客，随时预约，贴心顺手的开单收银《/van-collapse-item》《/van-collapse》exportdefault{data(){return{activeName:’1’}},methods:{onChange(event){console.log(event)this.activeName=event.mp.detail}}}得把原生小程序使用方式为改为mpvue使用方式首先是数据绑定方式value="{{activeNames}}"改为v-bind:value="activeNames"//或者:value="activeNames"然后是事件监听在van-collapse组件里加个监听事件@change="onChange($event)"mpvue中获取event值也与原生小程序有所不同：onChange(event){//获取表单组件filed的值console.log(event.mp.detail)//注意加入mp}以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。您可能感兴趣的文章:详解如何搭建mpvue框架搭配vant组件库的小程序项目mpvue+vantapp搭建微信小程序的方法步骤
微信小程序－vant-weapp日历组件的使用（年月日）
话不多说，记录一下这个框架的使用~小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp***隐藏网址******隐藏网址*** 1：打开微信开发者工具，填写自己的appid和项目名称，选择不使用云服务，新建一个项目。 2：右击在选择在终端打开 进入项目的根目录底下，注意，一定要进入根目录哦，使用cd ../返回上一级目录~ 3：小程序已经支持使用 npm 安装第三方包， 这里通过 npm 安装 这里需要注意一下 npm i vant-weapp -S --production或者npm i @vant/weapp -S --production 引入的区别 使用npm i vant-weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径 使用npm i @vant/weapp安装的时候，到时候在在app.json或index.json中引入组件，需要使用这样的路径（推荐，因为这个可以直接抄文档，不需要改变引入路径的~） 4：在微信开发工具执行npm 构建，点击工具里面，构建npm 构建过程需要等待一会儿，不要捉急 构建完会生成一个miniprogram_npm文件夹 如果构建完如果编译报错，再构建一次就好了 日历文档参照一下 5：使用vant-weapp日历组件 我这里对日期的处理，是需要这样的格式YYYY-MM-dd 所以在对选中的日期做了一些处理和判断~ wxml js json
微信小程序使用 Vant Weapp 的步骤
***隐藏网址*** ***隐藏网址*** ***隐藏网址*** ***隐藏网址*** 1、在根目录中，打开终端命令，cd到你的项目miniprogram目录下； 2、npm 初始化，如果你的小程序项目没有安装过npm包的话，你需要先初始化npm， npm init 3、# 通过 npm 安装 npm i @vant/weapp -S --production 4、 5、修改该配置项构建npm时，会在node_modules的同级目录中创建一个miniprogram_npm；miniprogram_npm包才是小程序真正使用的npm包；原理介绍 为了帮助大家更好的理解发布 npm 包中提到的各种要求，这里简单介绍一下原理： 首先 node_modules 目录不会参与编译、上传和打包中，所以小程序想要使用 npm 包必须走一遍“构建 npm”的过程，在每一份 miniprogramRoot 内开发者声明的 package.json 的最外层的 node_modules 的同级目录下会生成一个 miniprogram_npm 目录，里面会存放构建打包后的 npm 包，也就是小程序真正使用的 npm 包。 构建打包分为两种：小程序 npm 包会直接拷贝构建文件生成目录下的所有文件到 miniprogram_npm 中；其他 npm 包则会从入口 js 文件开始走一遍依赖分析和打包过程（类似 webpack）。 寻找 npm 包的过程和 npm 的实现类似，从依赖 npm 包的文件所在目录开始逐层往外找，直到找到可用的 npm 包或是小程序根目录为止。 下面简单介绍下构建打包前后的目录情况，构建之前的结构：
小程序的 iview Weapp 组件库的使用
iview 这个 UI 框架想必大家都很熟了，这个搞 Vue 框架的基本素养。下面来看看小程序版的。商城小程序必备的数字输入框。 在 .json 中引入组件 在 .wxml 中引入 下面是运行的效果，总的来看还是不错的。 还有个常用的动作面板。 从底部弹出的模态框，提供和当前场景相关的 2 个以上的操作动作，也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。 在 .json 中引入组件 在 .wxml 中引入组件 这个动作面板和微信小程序原生的动作面板有啥视觉的区别，一起来看看：总的来讲 iview 还比较好看的。***隐藏网址*** 另外有赞出品的 vant 框架小程序版，使用方法去看 小程序如何使用 npm 工具
vant weapp的使用
***隐藏网址***
Vant 是 有赞前端团队 开源的移动端组件库，于 2017 年开源，已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务，对外服务十多万开发者，是业界主流的移动端组件库之一。
目前 Vant 官方提供了 Vue 2 版本 、 Vue 3 版本 和 微信小程序版本 ，并由社区团队维护 React 版本 和 支付宝小程序版本 。
在小程序根目录打开终端
将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。
在setting选项中，找到"packNpmManually" 和"packNpmRelationList",并修改为
以Picker选择器为例，找到官网相应组件的文档如下
微信小程序如何使用npm，使用vant组件
新建一个微信小程序，在小程序目录下 输入命令：npm init（记得以管理员身份运行开发工具）,然后一直回车，直至在小程序目录下，生成package.json文件 通过 npm 安装 npm i @vant/weapp -S --production 通过 yarn 安装 yarn add @vant/weapp --production ***隐藏网址***
小程序使用 vant 快速创建页面
vant UI 组件库是有赞前端团队开发的一个 Vue 组件库，提供了一整套的 UI 基础组件和业务组件，通过 vant 可以快速搭建出风格统一的页面。 官方地址： vant UI 组件库 将 app.json 中的 "style": "v2" 去除，小程序的 新版基础组件 强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 工具 -》 构建 npm 效果： ***隐藏网址*** Vant 中默认包含了一些常用样式，可以直接通过 className 的方式使用。 添加1px 边框，为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。如果不是基于伪类实现的，则我们在添加的 1px 边框在 Retina 下默认是 2px 。
