Vant Weapp

在微信小程序中使用vant

孤街浪徒 提交于 2021-01-17 07:51:14
在微信小程序中如何使用vant UI ,最近在开发小程序项目的时候遇到了这个问题, 去网上百度发现大家给的步骤普遍都是直接npm i vant-weapp -S --production,接着构建npm, 然而,我在尝试的时候发现,构建npm的时候一直失败,告诉我找不到node_moudules ???? 你们是不是也遇到了这种问题呢? 好的,接下来就让我来告诉大家真正的解决方案吧! 首先, 你需要在小程序根目录下打开命令窗口, 依次 输入以下命令 npm init 初始化 npm install --production npm i vant-weapp -S --production 第二步之前,你需要保证你的微信开发者工具版本比较新,否则没有是构建npm工具的 第二步就是,打开微信开发者工具,电击左上方 工具,找到 构建npm 构建完成,会生成 miniprogram_npm 文件夹 最后, 就是需要在页面中使用 vant 组件了,打开刚刚生成的 miniprogram_npm 文件夹 下面的 vant-weapp ,里面的就是vant 的所有组件配置文件,例如,button, 当在一个页面中调用vant的组件时,需要在对应的页面json中添加如下配置: 代码为: " usingComponents " : { " van-button " : " /miniprogram

Vant Weapp 1.0 正式版发布

一个人想着一个人 提交于 2021-01-09 06:45:52
1.0 来了 2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k,长期是 Github 上 star 数最多的第三方小程序 UI 组件库。 <img src="https://img.yzcdn.cn/public_files/2019/12/05/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 标签,支持图片懒加载与加载失败提示 Circle 环形进度条

用vant-weapp写一个购物车

十年热恋 提交于 2020-11-02 02:53:24
vant-weapp介绍 vant-weapp是有赞出品的,前端组件库,既然出自有赞之手,必然是尤其适合于做一个商城项目,它移植于vant-ui,后者有的特性大部分都已经实现。vant-ui找了好久,都没有发现购物车业务组件,我就从自家的有赞精选这个小程序的购物车搬一份过来。 参考目标页 官方文档 https://youzan.github.io/vant-weapp 安装 npm i @vant/weapp -S --production 编译 打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件 引入各组件 1.Card 商品卡片组件 先在自己的购物车页面的cart.json配置文件加上如下代码 "usingComponents": { "van-card": "/miniprogram_npm/@vant/weapp/card/index" } 以此类推,依次引入其他组件 2.引入Stepper 步进器组件 3.引入SubmitBar 提交订单栏组件 4.引入SwipeCell 滑动单元格组件 这里有一个坑,右滑删除按钮没有样式,自己加上 .van-swipe-cell__left, .van-swipe-cell__right { display: inline-block; width: 65px; height:

小程序接入第三方ui库(组件库)

核能气质少年 提交于 2020-10-28 02:45:05
1.下载好稳定版的微信开发者工具 2.创建小程序项目文件夹(如:testDemo) 3.建好用开发者工具编译器打开 然后初始化package.josn 执行安装 vant Weapp: npm i @vant/weapp -S --production 勾上增强编译和使用npm模块 接着点击工具构建npm在对应页面的.json文件 或者在 app.json文件如下图配置 若后面文档更新则按官方文档 和 ui库更新文档配置既可;然后组件在各页面所需之处用既可; 来源: oschina 链接: https://my.oschina.net/u/4396566/blog/4274445

安装vant-weapp 组件

回眸只為那壹抹淺笑 提交于 2020-10-07 06:51:11
一、新建小程序项目 二、打开cmd,小程序项目目录下 npm i vant-weapp -S --production 2.1 如果执行上面的代码报错了 那你就执行一下:npm init -y 微信开发工具里面就会出现:package.json这样就解决问题了 2.2 接着就可以执行:npm i vant-weapp -S --production 这样就可以了~~~~ 三、在微信开发者工具中,就可以用了 四、使用 在app.json引入 { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }, "style": "v2", "sitemapLocation": "sitemap.json", "usingComponents":{ "van-cell":"./miniprogram_npm/vant-weapp/cell/index" } } 在wxml里面使用了! <van-cell-group> <van-cell

小程序自定义 tabbar 以vant weapp为例

不羁岁月 提交于 2020-08-18 08:05:32
1.首先建立 custom-tab-bar 文件夹 包含 index.js index.json index.wxml // index.js文件 Component({ data: { active: 0 , list: [ { "url": "/pages/index/index" , "icon": "wap-home-o" , "text": "首页" }, { "url": "/pages/index/prize" , "icon": "orders-o" , "text": "奖品" }, { "url": "/pages/index/exchange" , "icon": "points" , "text": "兑换" }, { "url": "/pages/index/my" , "icon": "user-circle-o" , "text": "我的" } ] }, methods: { onChange(e) { console.log(e, 'e' ) this .setData({ active: e.detail }); wx.switchTab({ url: this .data.list[e.detail].url }); }, init() { const page = getCurrentPages().pop(); this .setData(

6月份Github上最热门的JavaScript开源项目

五迷三道 提交于 2020-08-17 01:30:13
Python实战社群 Java实战社群 长按识别下方二维码, 按需求添加 扫码关注添加客服 进Python社群▲ 扫码关注添加客服 进Java社群 ▲ 开源最前线(ID:OpenSourceTop) 猿妹整编 转载请注明来源作者 6月份GitHub上最热门的JavaScript 开源项目排行已经出炉啦, 一起来看看上榜详情吧 1 vue https://github.com/vuejs/vue Star 16048 Vue.js 是构建 Web 界面的 JavaScript 库,提供数据驱动的组件,还有简单灵活的 API,使得 MVVM 更简单。主要特性如下: 可扩展的数据绑定 将普通的 JS 对象作为 model 简洁明了的 API 组件化 UI 构建 配合别的库使用 2 lx-music-desktop https://github.com/lyswhut/lx-music-desktop Star 4479 一个基于 Electron + Vue 开发的音乐软件。UI界面如下: 3 Rocket.Chat https://github.com/RocketChat/Rocket.Chat Star 25961 Rocket.Chat使用Meteor框架做的开源消息应用。是领先的免费开源团队聊天Slack的替代品,功能强大,它支持群组聊天,直接通信,私聊群,桌面通知,媒体嵌入