精华内容
下载资源
问答
  • vant Webapp 快速使用

    千次阅读 2020-04-09 12:27:15
    vant Webapp 快速使用 ** Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。(对不不会写css或者不想写css的感觉非常好用)。 一。...

    **

    vant Webapp 快速使用

    **

    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。(对不不会写css或者不想写css的感觉非常好用)。

    一。选取你的项目文件夹右键在终端打开
    在这里插入图片描述

    二。初始化npm并安装组件

    npm init
    npm i @vant/weapp -S --production

    输入这两行指令,有一些需要填写的可以直接默认回车,也可以填写。

    三。开发工具构建npm和使用

    点击上方菜单栏工具,构建npm
    在这里插入图片描述

    点击右上角详情勾选使用npm
    在这里插入图片描述

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

    五。使用vant webapp组件
    在app.json或者其他页面的json文件中配置usingComponents就能使用。

    展开全文
  • 开发mpvue小程序项目中 ,使用第三方插件vant webapp 的DatetimePicker 时间选择插件时,想要修改 选中项的样式,遇到了问题,按照官方文档 修改,但是 没起效果,经过一番处理,终于解决了。 先把方法记录如下,...

    开发mpvue小程序项目中 ,使用第三方插件vant webappDatetimePicker 时间选择插件时,想要修改 选中项的样式,遇到了问题,按照官方文档 修改,但是 没起效果,经过一番处理,终于解决了。 先把方法记录如下,以便以后再遇到此类问题。

    1.需求:

    vant webapp 的 DatetimePicker 时间选择插件 默认选中行的字体颜色是 黑色,如下:
    在这里插入图片描述
    想要的效果是 默认选中行的字体颜色是蓝色,如:在这里插入图片描述
    在 不直接修改插件本身wxss样式的情况下,如何实现想要的效果???在这里插入图片描述

    2.解决方法

    1.文档中有介绍,可以定义 active-calss 来实现。
    在这里插入图片描述
    2.页面引用时 添加 active-calss 和 active-calss定义类的样式
    在这里插入图片描述
    样式:

    <style>
      /**时间控件选中样式 */
      .pickerItemSelected{
        color:#4e70c7 !important;
      }
      /**要想自定义的 时间控件选中样式 起效果, 必须放在 全局样式里。不能放在被 scoped 修饰的style里*/
    </style>
    

    3.注意事项

    注意:要想自定义的 时间控件选中样式 起效果, 必须放在 全局样式里。不能放在被 scoped 修饰的style里

    下面的写法是不起效果的:
    在这里插入图片描述

    展开全文
  • 最近开发微信小程序使用 vant 过程中按照官网步骤没有成功,特此记录 二、环境说明 开发环境: 微信开发工具 1.05.2107090 window npm 7.19.0 三、安装 vant 项目目录 window 微信开发工具终端一直不能使用,打开...
    一、简介

    vant 官网 https://youzan.github.io/vant-weapp/#/home

    最近开发微信小程序使用 vant 过程中按照官网步骤没有成功,特此记录

    二、环境说明

    开发环境:

    • 微信开发工具 1.05.2107090
    • window
    • npm 7.19.0
    三、安装 vant

    项目目录
    在这里插入图片描述

    window 微信开发工具终端一直不能使用,打开文件夹使用 cmd 安装

    • 1、进入 miniprogram 目录(不是必须该目录,可以自己指定,在project.config.json中正确配置即可),使用 npm i @vant/weapp 安装
      没有 npm 的自行安装,如果报找不到 package.json,新建 package.json 文件并添加 {}(在 miniprogram 目录下)
    • 2、修改 app.json
      app.json 中的 “style”: “v2” 去除
    • 3、修改 project.config.json
      "packNpmRelationList": [
          {
            "packageJsonPath": "./miniprogram/package.json", // 指定 package.json 的路径,点击构建 npm 会根据该 package.json 构建
            "miniprogramNpmDistDir": "./miniprogram/" // 点击构建 npm 时, miniprogram_npm 的生成路径,该路径用于 import 引入组件
          }
        ]
    
    • 4、构建 npm 包
      在这里插入图片描述
      构建完成就生成了 miniprogram_npm 目录,开发工具版本不同可能有差距

    四、使用

    测试使用 button 和 dialog 组件,点击 button 触发 dialog

    1、在 app.json 或 index.json 中引入组件

      "usingComponents": {
        "van-button": "@vant/weapp/button/index",
        "van-dialog": "@vant/weapp/dialog/index"
      }
    

    2、test.wxml 添加标签

      <van-dialog id="van-dialog" />
      <van-button type="primary" bindtap="click">按钮</van-button>
    

    3、test.js 引入并触发方法

    import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog.js' // 使用你自己的路径
    page({
    	click(){
    	    Dialog.confirm({
    	      title: '放假',
    	      message: '今天放假了,可以出去嗨了',
    	    }).then(() => {
    	      // 确认
    	    }).catch(()=>{
    	      // 取消
    	    });
    	  }
    })
    

    4、测试
    在这里插入图片描述

    五、总结
    • 安装目录不是固定的,可以自定义安装目录,project.config.json 配置正确即可
    • app.json 全局引入组件,“usingComponents”: {“van-button”: “@vant/weapp/button/index”},@vant/weapp/button/index 从 node_modules 查找
    • test.js 文件中 import Dialog from ‘…/…/miniprogram_npm/@vant/weapp/dialog/dialog.js’, 从 miniprogram_npm 目录中查找
    展开全文
  • 今天小程序使用了vant webapp 的Calendar组件发现可选日期数字不显示,如下图 所有功能都好好的选择后也可以正常显示不可选日期也能显示只有可选的日期的数字显示不出来, 后经排查发现可选日期缺少了color...

            今天小程序使用了vant webapp 的Calendar组件发现可选日期数字不显示,如下图

     

    所有功能都好好的选择后也可以正常显示不可选日期也能显示只有可选的日期的数字显示不出来,

    后经排查发现可选日期缺少了color属性导致显示不出来。给.van-calendar__day加上color属性就可以了

    .van-calendar__day {
      color: #000;
    }

    问题解决

     

     

    应该是和之前的样式冲突导致的,试过在别的页面使用就没这个问题

    展开全文
  • import{ CellGroup, Cell, Uploader }from"vant"; components:{ [CellGroup.name]:CellGroup, [Cell.name]:Cell, [Uploader.name]:Uploader }, <van-cell> ...
  • 微信小程序引入vant-webapp的正确姿势

    千次阅读 2020-06-07 19:59:43
    cmd中输入:npm i @vant/weapp -S --production安装vant/webapp小程序专用包。 4.去微信开发者工具里构建npm和使用npm 模块 进入微信开发者工具,依次点击左上角工具——>构建npm。右上角详情——>勾选...
  • https://www.jianshu.com/p/b0636ad4987b
  • vant webapp 小程序版官网地址:https://vant-contrib.gitee.io/vant-weapp/#/intro 与官网步骤不一样,官网步骤缺少第一第二步,不能构建成功。 步骤一 在小程序所在目录cmd 执行:npm init -y 步骤二 ...
  • 上一个版本的完善 添加了数据库信息的批量删除 添加了图片上传之后预览功能(真机调试也可以) 预览功能可以删除并重新选择图片 先新建一个小程序项目(我先没...找到小程序根目录,安装vant Webapp,具体看官方文
  • 电商网站webapp开发 二、技术栈 框架:vue框架 UI组件:Vant移动端Vue组件库 安装:npm install vant -S 项目中引用的部分组件: 1、Tabbar标签栏:封装成底部标签栏,引入到其他组件中,导入路由,在底部作为...
  • vite2 + vue3.0 + vant3.x 搭建WebApp项目(一) 初始化项目 1. 什么是vite? 用尤大大的话来说,Vite是一个基于浏览器原生 ES 的开发服务器。利用浏览器去解析 imports,在服务器端按需编译返回,完全跳过了打包,...
  • 很多小伙伴练手都会去仿写豆瓣电影或者...比如豆瓣部分我使用了vant,网易云部分则没有,网易的ui组件则是自己造的轮子,当然在实际开发中肯定不会这么搞啦。。还有个人平时看过的知识,像createApi啥的会应用上,毕...
  • 因为接下来有个 H5 的页面要开发,虽说是 H5,但整体比较偏向 WebApp 形式。为了方便接下来的开发工作,于是就花了 3 - 4 天简单的封装了一套适用于项目的架子,并且将过程记录了下来,希望能与大家一起进步。 ...
  • vantweapp的使用

    2021-01-20 13:23:39
    npm i vant-weapp -S –production 回车进行npm的安装。 3、此时还没有安装完成,选中小程序点击开发工具中的“工具”选项——>点击构建npm。 4、此时查看项目,出现package.json(这是配置文件)文件以及其它一些...
  • 基于vue 引入vant

    2020-12-08 10:31:02
    vant是开源的移动端组件库,配合h5+的方式来写webapp。vue3.0版本已经有了哦。 引入vant Vue 2 项目,安装 Vant 2.x 版本: npm i vant -S Vue 3 项目,安装 Vant 3.x 版本: npm i vant@next -S 引入的方式是按需...
  • Taro(V2.0.5)中引入Vant Weapp,(需下载资源到项目中:大小约322KB) 需如下几步: 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包,将对应的dist文件夹下内容复制到新建的vant-...
  • 使用vant开发webapp,使用vant方法npm i vant -S (或者 yarn add vant) 2. 在main.js中import 'vant/lib/index.css' 以button为例,若向全局引入,因为基本每个页面都需要按钮, 在main.js中 import { Button }...
  • vant-weapp.zip

    2019-11-22 17:31:07
    小程序使用vant-weapp框架确实便捷,但是官方生成的wxss文件单位都是px,和我们平时的rpx存在一些适配兼容问题,文件是 px转成rpx后的文件。
  • Vant Weapp使用教程

    万次阅读 2019-04-19 13:50:05
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...
  • 汇总在微信中引入vant-weapp方法 看了挺多在微信中引入vant-weapp的方法,个人觉得一下两种...如果需要npm构建的小伙伴,推荐微信小程序引入vant-webapp的正确姿势这篇文章较上篇文章npm构建内容介绍会详细些。 ...
  • Uniapp 导入 Vant 组件库

    2021-05-30 09:45:23
    Uniapp 导入 Vant 组件库 Vant Weapp 开发文档 Vant Weapp - 轻量、可靠的小程序 UI 组件库 创建 wxcomponents 目录 在 uniapp 项目的根目录下,创建一个新的 wxcomponents 目录 下载 vant-weapp 项目 $ git clone ...
  • vant-weapp官网打不开

    万次阅读 多人点赞 2020-08-04 16:52:55
    是否有小伙伴跟小编一样,突然发现 vant-weapp进不去了 后来在码云上找到了一个国内的版本:https://vant-contrib.gitee.io/vant/#/zh-CN/home 但是用的时候发现 属性有些许差异: 应该是版本不一致导致的...
  • 组件库有赞UI组件库:vant webapp github youzan.github.io/vant-weapp适用商城类,简单的需求用这个也不错蘑菇街UI组件库:MinUI github github.com/meili/minui挺好看的,但是搜出来使用这个的不多,可能我姿势...
  • WebAPP palm-pet

    2020-10-16 22:45:29
    宠物帮-WebAPP一、创建项目二、安装ui步骤:1. 通过 npm 安装2.选择按需引入3.在.babelrc 中添加配置4.在Main.js引入5.在app.vue测试 一、创建项目 创建我们的项目 $ vue init webpack my-project 二、安装ui 使用...
  • 微信小程序之引入使用Vant Weapp组件

    千次阅读 2020-05-18 10:15:26
    Vant Weapp官网地址:https://youzan.github.io/vant-weapp/#/quickstart,自己可以去其官网详细了解。 这里主要总结下微信小程序中如何使用该组件。 【1】新建一个微信小程序工程 如下所示: 【2】引入并使用Vant...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 504
精华内容 201
关键字:

vantweapp