精华内容
下载资源
问答
  • 小程序Vant使用教程

    千次阅读 2019-06-20 17:09:09
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...

    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用

    两大参考神兽:

    文档:https://youzan.github.io/vant-weapp/#/intro
    开源:https://github.com/youzan/vant-weapp

    1:桌面新建一个vant文件夹

    2:打开微信开发者工具,在这个文件里新建项目

    3:从github上面下载源码文件:开源:https://github.com/youzan/vant-weapp

    4:打开文件,复制dist文件

    5:将dist文件黏贴在项目目录里面

    6:打开Vant Weapp的使用文档:文档:https://youzan.github.io/vant-weapp/#/button
    现在来在index界面来使用一个按钮的样式:

    7:在 json 文件中配置button组件,修改路径

    {
     "usingComponents": {
      "van-button": "../../dist/button/index"
    }
    }
    

    8:wxml界面写一点文档里面的代码

    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    

    9:引入成功:然后你就可以依靠文档来进行复制黏贴了,因为自己写css的日子真的又烦人又浪费时间呐。

    最后,为啥推荐这个组件库,因为实在是省力气,拿这个步骤条时间戳来说,前两天写了好一会

    现在只需要三步即可完成,30秒中不到全部搞定,当然了,不推荐新手使用这个复制黏贴的方法,毕竟代码功夫还是需要一笔一画来提升境界的。

    wxml

    <view>
    <van-steps
      steps="{{ steps }}"
      active="{{ active }}"
    />
    </view>
    

    json:

    {
    "usingComponents": {
      "van-steps": "../../dist/steps/index"
    }
    }
    

    js

    Page({
      data: {
        steps: [
          {
            text: '步骤一',
            desc: '描述信息'
          },
          {
            text: '步骤二',
            desc: '描述信息'
          },
          {
            text: '步骤三',
            desc: '描述信息'
          },
          {
            text: '步骤四',
            desc: '描述信息'
          }
        ]
      }
    });
    

    ok,完成,没错,真的就是这么简单。

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    关注「编程微刊」公众号 ,在微信后台回复「领取资源」,获取IT资源300G干货大全。

    展开全文
  • Vant Weapp使用教程

    万次阅读 2019-04-19 13:50:05
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...

    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用

    两大参考神兽:

    文档:https://youzan.github.io/vant-weapp/#/intro
    开源:https://github.com/youzan/vant-weapp

    1:桌面新建一个vant文件夹

     

    2:打开微信开发者工具,在这个文件里新建项目

     

    3:从github上面下载源码文件:开源:https://github.com/youzan/vant-weapp

     

    4:打开文件,复制dist文件

     

    5:将dist文件黏贴在项目目录里面

     

    6:打开Vant Weapp的使用文档:文档:https://youzan.github.io/vant-weapp/#/button
    现在来在index界面来使用一个按钮的样式:

    7:在 json 文件中配置button组件,修改路径

    {
     "usingComponents": {
      "van-button": "../../dist/button/index"
    }
    }
    

    8:wxml界面写一点文档里面的代码

    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    

    9:引入成功:然后你就可以依靠文档来进行复制黏贴了,因为自己写css的日子真的又烦人又浪费时间呐。

     

    最后,为啥推荐这个组件库,因为实在是省力气,拿这个步骤条时间戳来说,前两天写了好一会

     

    现在只需要三步即可完成,30秒中不到全部搞定,当然了,不推荐新手使用这个复制黏贴的方法,毕竟代码功夫还是需要一笔一画来提升境界的。

    wxml

    <view>
    <van-steps
      steps="{{ steps }}"
      active="{{ active }}"
    />
    </view>
    

    json:

    {
    "usingComponents": {
      "van-steps": "../../dist/steps/index"
    }
    }
    

    js

    Page({
      data: {
        steps: [
          {
            text: '步骤一',
            desc: '描述信息'
          },
          {
            text: '步骤二',
            desc: '描述信息'
          },
          {
            text: '步骤三',
            desc: '描述信息'
          },
          {
            text: '步骤四',
            desc: '描述信息'
          }
        ]
      }
    });
    

    ok,完成,没错,真的就是这么简单。

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见。

    展开全文
  • Vant是一套由有赞技术团队精心打造的轻量可靠的移动组件库,包含了按钮、弹层等基础组件,单选、复选、输入框、选择器、评分等表单组件,提示框、折叠面板、轮播图等交互组件还包括了地址编辑、地址列表、商品卡品、...

    Vant是一套由有赞技术团队精心打造的轻量可靠的移动组件库,包含了按钮、弹层等基础组件,单选、复选、输入框、选择器、评分等表单组件,提示框、折叠面板、轮播图等交互组件还包括了地址编辑、地址列表、商品卡品、优惠券等电商常用模块,非常好用的一套组件库。

    官网地址:https://youzan.github.io/

    以下我们以云开发小程序引用为例,非云开发小程序引用也一模一样。

    一、安装

    1.在开发者工具中,对着小程序端的项目目录【miniprogram】选中后鼠标右键,选择【在终端中打开

    bc2c47048b11e8b77e157dd49946731b.png

    2.终端执行命令

    npm init

    执行该命令之后直接全部回车进行,成功后会在你的小程序端文件目录里生成一个package.json文件

    2356a536be4c22a87f36907292eada9d.png

    3.安装vant

    • 和上一步一样,在终端中操作

    npm i @vant/weapp -S --production

    4.构建npm包

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

    d3efd8234712a37ad1fd39e594f2b656.png

    5.修改app.json

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

    二、使用

    使用非常简单,我们以Toast 轻提示为例

    1. 引入组件

    • 在app.json中配置Toast路径

    "usingComponents": {
      "van-toast": "@vant/weapp/toast"
      }

    2.使用组件

    • 按照文档说明,这里需要配置两次,我们以/pages/zhai/zhai这个目录使用为例

    a).zhai.wxml

    b).zhai.js

    import Toast from '@vant/weapp/toast/toast';
    
    Toast('我是提示文案,建议不超过十五字~');

    使用完毕~

    0c7523b77ede652c7f27f7f998db3b48.png

    f3afac5da81910f7719925c567bc98ff.png如何优雅的下载ins等网站的图片素材附接口源码宝塔nginx反向代理教程 适用于国外网站记录一次为车载导航下载网易云音乐MV的经
    展开全文
  • 我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。...

    要说到小程序开发过程中用到的UI组件库,我第一个想到的就是vant,因为对于我来说,这个组件库里面的UI界面比较符合我的审美,颜值还不错,另外最重要的是,里面的功能比较齐全,项目之中要用到的一些需求,在这里都可以找到并且直接使用,就很nice了。

    小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp
    Github源码:https://github.com/youzan/vant-weapp
    中文文档:https://vant-contrib.gitee.io/vant-weapp/#/intro

    话不多说,记录一下这个框架的使用~

    1:打开微信开发者工具,填写自己的appid和项目名称,选择不使用云服务,新建一个项目。

    2:右击在选择在终端打开

    进入项目的根目录底下,注意,一定要进入根目录哦,使用cd …/返回上一级目录~

    3:小程序已经支持使用 npm 安装第三方包,
    这里通过 npm 安装

       1、第一步:npm init
    
       2、第二步:npm install --production
    
       3、第三步: npm i @vant/weapp -S --production
          或者  npm i vant-weapp -S --production
    


    这里需要注意一下
    npm i vant-weapp -S --production或者npm i @vant/weapp -S --production
    引入的区别

    使用npm i vant-weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径

    {
      "usingComponents": {
        "van-button": "../../miniprogram_npm/vant-weapp/button/index"
      }
    }
    

    使用npm i @vant/weapp安装的时候,到时候在在app.json或index.json中引入组件,需要使用这样的路径(推荐,因为这个可以直接抄文档,不需要改变引入路径的~)

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

    4:在微信开发工具执行npm 构建,点击工具里面,构建npm

    构建过程需要等待一会儿,不要捉急

    构建完会生成一个miniprogram_npm文件夹
    如果构建完如果编译报错,再构建一次就好了

    5:使用vant-weapp

    看文档上的代码,来实现一个小按钮,照着文档复制粘贴即可~就是这么的任性
    https://vant-contrib.gitee.io/vant-weapp/#/button

    app.jsonindex.json中引入组件
    上面说了,我是用 npm i @vant/weapp -S --production这种方式安装的,所以引入路径可以直接使用文档上,直接粘贴,不需要修改路径~

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

    然后再copy一下wxml的代码

    <van-button type="default">默认按钮</van-button>
    <van-button type="primary">主要按钮</van-button>
    <van-button type="info">信息按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
    

    好了,这个时候就已经可以了

    在这里插入图片描述

    展开全文
  • npm i vant-weapp -S --production //安装vant 2.构建npm: 首先必须确保上图的“使用npm模块”被勾上的。 然后点击菜单栏“工具”下的“构建 npm”,并生成了“node_modules”文件夹。 3.需要使用组件的地方在...
  • 前言:这章节我们将把VUE-CLI常用的配置信息全部说清楚,例如:组件设置、ui配合、Ajax等...当这些全部学会以后,我们就啥都不怕了哟,很6吧,开始... npm install jquery在对应需要使用jquery的vue文件中,引入j...
  • vant

    2020-03-27 11:10:04
    官网:vant 官网 教程:https://m.w3cschool.cn/vantlesson/vantlesson-phsq35vd.html 最近用到了一个时间选择器 就使用Vant Picker 选择器 效果图入下: 动态获取values ...
  • 小程序如何使用vant

    2020-10-28 22:41:14
    使用 Vant Weapp 前我强烈的建议大家去看下微信官方的 小程序简易教程 和 自定义组件介绍 点击下方超链接 https://youzan.github.io/vant-weapp/#/quickstart 第一步 首先我们先创建一个项目 跟着打开终端,cd 到小...
  • 一、介绍mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。此教程是在dov-yih一同协助下完成。经过测试,...
  • GG-UI多平台快速开发的UI框架gg-ui是一款高性能,简洁、快速开发的ui组件;基于uniapp开发;... 如果你想了解到更详细的文档,进入GG-UI官网查看开始使用1、安装 gg-uinpm install @10yun/ggui-mobile -D更新 ...
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
  • 使用请查看使用必读! 更新日志请点击这里 目前功能 查看消息 网络请求获取数据(download示例server端demo) 微信地图(调用API已换成map组件) 发送图片 查看朋友圈 新的朋友 实时文本搜索框(优化) IDE更新的...
  • 2020-8-7前来更新-------------------------------------------放上...部署教程官网里面的就可以了。然后,mpvue只是提供了代码编辑的框架而已,里面的组件之类需要第三方的组件库,我看到基本上用的vant-weapp的比...
  • 部署教程官网里面的就可以了。 然后,mpvue只是提供了代码编辑的框架而已,里面的组件之类需要第三方的组件库,我看到基本上用的vant的比较多,于是也打算尝试一下。 vant官网:...
  • Vant Weapp轻量小程序 UI 组件库导入教程 因为首次使用 安装过程遇到了很多问题 特此记录一下 步骤一 通过 npm 安装 #安装 npm install #初始化 其中设置安装路径为小程序项目目录 npm init npm i # 通过 npm 安装 ...
  • 小程序开发一般分为两种,原生小程序开发,只用小程序的api中提供的一些组件,还有一种是使用框架,我这里分析下使用vant框架的教程 微信官方文档入口 vant框架入口 步骤: 1.初始化安装node需要的包,依次执行...
  • 微信小程序开发如何使用Vant Weapp UI组件库提高效率 Vant-weapp官网教程 一、安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production 在小程序项目根目录...
  • 微信小程序中使用Vant weapp组件库

    千次阅读 2020-07-08 11:07:42
    具体安装过程请看 node安装教程 ,记得安装时一路next就行,路径用默认路径,不要乱改,安装好了后输入以下命令,出现版本号就成功了(版本不一样没关系) 3、在项目目录下初始化node模块 在项目根目录文件夹下红箭头...
  • mpvue项目使用第三方UI框架vant weapp

    千次阅读 2019-01-02 20:40:42
    我们搜到的教程都是说从vant-weapp的git仓库中下载源码,拷贝dist目录到我们创建的mpvue项目文件的static或者dist或者…文件夹中,我觉得都可以吧,只是涉及你引用组件时的路径怎么写。 这里把vant-we...
  • Vant官方文档中给的使用教程,是这样的,但是我们实际使用的时候,不仅需要引用组件,还需要在components中注册组件,下面有案例 <template> <div class="hello"> <!-- 输入任意文本 --> <van-...
  • uni-app中使用微信小程序详细教程见:https://uniapp.dcloud.io/frame?id=%e5%b0%8f%e7%a8%8b%e5%ba%8f%e7%bb%84%e4%bb%b6%e6%94%af%e6%8c%81 每个组件的使用方法,可以看示例页面的写法,api手册可参考vant官网 ...
  • 我们精心准备了一个简单的 五分钟上手教程 方便你快速体验到 mpvue 带来的开发乐趣。 名称由来 mp:mini program 的缩写 mpvue:Vue.js in mini program 主要特性 使用 mpvue 开发小程序,你将在小程序技术...

空空如也

空空如也

1 2 3 4 5 6
收藏数 108
精华内容 43
关键字:

vant使用教程