Vant Weapp

本人node小白，在开发微信小程序的时候想偷懒使用一个组件库，可是一直报这个错误 Component is not found in path "@vant/weapp/dist/image/index" 太焦虑了，找了好久总结出正确的使用步骤，如果也不会的小伙伴按照下列步骤做就不会出问题啦！ 正确使用步骤 以小程序组件库 https://github.com/youzan/vant-weapp 为例 在小程序项目 根目录 打开命令行，输入 npm i @vant/weapp -S --production 然后你会发现项目内多了一个「node_modules」目录和「package-lock.json」文件 在小程序根目录输入 npm init 初始化项目 在生成的 「package.json」文件中的「dependencies」中填入你需要依赖的模块和版本号，如 打开「详情」，勾上「使用npm模块」 点击「工具」-> 「构建npm」 就成功啦！ 此时你的项目根目录会多一个「miniprogram_npm」的文件夹 不过使用起来还要注意，按照如下的方式引用，而不是使用路径引用哦 祝没有bug！ 来源： oschina 链接： https://my.oschina.net/u/4335275/blog/4311294

直接进入重点谈谈遇到的坑。 根据项目需求，一个页面，同时出现以下几种组件 1、input输入框 2、picker选择器 3、时间选择器 4、textarea 5、图片上传和预览 首先看vant-ui发现以上几个组件都可以使用，于是愉快的撸了起来。。。。 引入了所有需要用的组件，发现自己简直棒棒哒 { "usingComponents": { "van-button": "/static/vant/button/index", "van-cell": "/static/vant/cell/index", "van-cell-group": "/static/vant/cell-group/index", "van-popup": "/static/vant/popup/index", "van-datetime-picker": "/static/vant/datetime-picker/index", "van-field": "/static/vant/field/index", "van-picker": "/static/vant/picker/index", "van-toast": "/static/vant/toast/index" } } 由于发现的问题，已经被修复，这里只能针对问题做描述 1、vant-field 组件 写上去的时候，贼特么6，效果也不错。但是！！！

在去年 11 月份中旬，随着有赞 Vant Weapp 库 1.0 版本的正式发布，我们的小程序也是立即跟随官方的脚步，着手把依赖库升级了一下。但是却发现 Vant Weapp 对于苹果的底边适配却在微信开发者工具中消失了。在不了解 css env 实际作用和开发工具适配的的情况下，就鲁莽的发了一个 issue ，在此也记录一下，以便于今后查阅与学习。 safe-area 事实上，因为个人之前工作的重心在了 js 与 pc 上，对 css 以及移动端有所忽略，才会对这个安全区域没有更多的学习以及理解。 面对新式手机的刘海以及胡子，在开发移动端的小伙伴们不得不对手机型号做适配，如果当前使用的界面是整个屏幕，就会发生当前的显示被遮挡的问题。当然，其实对于小程序来说，绝大情况下完全不用考虑上面的刘海，一方面是因为当前的小程序的 navigationBar 做到了适配的功能，不需要考虑头部的问题。从另一方面来说，小程序没有特别的需求下也不需要横屏展示。但是对于底部的胡子，我们需要留给其 34px 的高度。在 1.0 版本之前，Vant Weapp 的适配是这样的。 下面代码相对于源代码有所修改，但是基本逻辑是在组件中获取到当前的手机信息。 // 缓存数据 let cache = null; // 获取有关安全区域的数据（有缓存得缓存） function getSafeArea() {

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 使用mpvue作为框架，引入第三方的ui框架 vant-weapp vant-weapp: https://github.com/youzan/vant-weapp 下载vant-weapp的资源:https://github.com/youzan/vant-weapp.git 1、 2、 3、 4、全选复制 5、进入自己的项目的static文件夹 6、新建一个vant文件夹 7、把刚才复制的所有东西，丢进去 8、项目如图： 9、单个页面中创建main.json文件 10、使用的组件名称引入 { "usingComponents": { "van-button": "/static/vant/button/index", "van-cell": "/static/vant/cell/index", "van-cell-group": "/static/vant/cell-group/index", "van-popup": "/static/vant/popup/index", "van-datetime-picker": "/static/vant/datetime-picker/index", "van-field": "/static/vant/field/index", "van-picker": "

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 1.0 来了 2018 年 8 月 11 日，我们发布了 Vant Weapp 的首个版本。16 个月以来，我们收到了 27 位开发者贡献的 1000 多次提交，也处理了 1200 多个 issue，发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k，长期是 Github 上 star 数最多的第三方小程序 UI 组件库。 <img src="https://oscimg.oschina.net/oscnet/7b13ce2b7ae72258f05ee4cc1772016c.jpg" style="zoom:25%;"> 现在，我们很高兴向大家介绍 Vant Weapp 1.0 版本 。 经过 2 个月的开发与 beta 测试，我们为大家带来了 11 个全新的组件，重构了多个现有组件，增加了覆盖所有组件的主题定制特性。并且，为了配合 Vant 家族的发展，正式将包名变更为 @vant/weapp 。 大家可以扫描下方小程序码体验 Vant Weapp 1.0 示例 新版本介绍 新的组件 在 Vant Weapp 1.0 版本中，我们新增了 11 个实用的基础组件： Grid 宫格，用于展示内容或进行页面导航 Image 图片，增强版的 Image 标签，支持图片懒加载与加载失败提示