精华内容
下载资源
问答
  • 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后前端妹子,爱编程,爱运营,爱折腾。
    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见。

    展开全文
  • WeApp - wechat weApp for wechat by liujians http://liujians.me 由于此项目是2016年10月小程序内测的时候做的、如今小程序已经迭代更新很多个版本、工作中没有用到、所以我本人也没有去沿路学习更新、所以不...
  • 一、介绍mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。此教程是在dov-yih一同协助下完成。经过测试,...

    一、介绍

    mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。

    此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue中使用

    mpvue-vant Github地址

    二、使用方法

    目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。

    克隆vant仓库

    将dist目录下的所有文件复制到你项目的/static/vant/目录下。

    git clone https://github.com/youzan/vant-weapp.git

    // 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下

    git clone https://github.com/Rychou/mpvue-vant.git

    引入

    在需要引入的页面目录下的main.json文件中

    {

    "usingComponents": {

    "van-button": "/static/vant/button/index",

    }

    }

    使用

    测试

    三、注意事项

    具体组件 api 文档参考Vant Weapp

    1. 使用方式

    mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

    1.1 数据绑定

    原生小程序使用方式为

    value="{{value}}"

    mpvue 使用方式

    v-bind:value="value"

    //或者

    :value="value"

    1.2 事件监听

    原生小程序使用方式

    bind:click="onClick"

    mpvue 使用方式

    @click="onClick"

    1.3 vue 中组件引入

    vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;另一个是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

    import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录

    1.4 获取 event

    值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

    onChange(event){ // 获取表单组件filed的值

    console.log(event.mp.detail) // 注意加入mp

    }

    2. BUG 及报错处理方法

    2.1 监听名

    mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

    可以改成驼峰式的监听名。

    eg: 我在field组件中就遇到这个问题,我的做法是:

    // static/vant/field/index.js

    this.$emit('click-icon');

    // 修改为:

    this.$emit('clickIcon');

    2.2 报错

    一般的报错报错都可以通过一下流程处理。

    是否打开了微信开发者工具中的ES6转ES5功能。

    仔细检查代码和比对文档,看看是否有使用不当的地方。

    重新编译npm run dev或删掉dist目录重新npm run dev

    重启或更新微信开发者工具。

    若以上流程都走完了,还是无法解决报错,可以通过提交issues的方式,我来帮你解决。

    2.2.1 引入组件报错

    VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

    解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

    3. 其他组件库

    目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp。

    这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。

    比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。

    使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/目录下的文件。因为这里是经过编译后的。

    如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

    本文标题: Mpvue中使用Vant Weapp组件库的方法步骤

    本文地址: http://www.cppcns.com/wangluo/javascript/259429.html

    展开全文
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
        

    一、介绍

    mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。

    此教程是在dov-yih一同协助下完成。经过测试,Vant Weapp下所有组件都能够在mpvue中使用

    二、使用方法

    目前vant已经支持了npm的方式,但是由于node_modules目录下的代码是不会被编进dist目录下的,所以暂时只能用git方式使用。

    克隆vant仓库

    dist目录下的所有文件复制到你项目的/static/vant/目录下。

    git clone https://github.com/youzan/vant-weapp.git
    // 当然你也可以克隆本仓库代码,本仓库会与`vant`仓库保持同步。直接将`vant`目录复制到`/static`目录下
    git clone https://github.com/Rychou/mpvue-vant.git

    引入

    在需要引入的页面目录下的main.json文件中

    {
      "usingComponents": {
        "van-button": "/static/vant/button/index",
      }
    }

    使用

    <van-button>测试</van-button>

    三、注意事项

    具体组件 api 文档参考Vant Weapp

    1. 使用方式

    mpvue 和原生小程序的方式有所不同。可以参考mpvue文档

    1.1 数据绑定

    原生小程序使用方式为

    value="{{value}}"

    mpvue 使用方式

    v-bind:value="value"
    //或者
    :value="value"

    1.2 事件监听

    原生小程序使用方式

    bind:click="onClick"

    mpvue 使用方式

    @click="onClick"

    1.3 vue 中组件引入

    vant中像notify这种操作反馈类的组件都有两个引入,一是组件的引入,这个在main.json中引入;另一个是方法的引入,需要在vue文件中import引入,值得注意的是,这里的引入不能使用绝对路径,可以用类似于这样的相对路径。

    import Notify from '@/../static/notify/notify' //@是mpvue的一个别名,指向src目录

    1.4 获取 event

    值得注意的是,mpvue中获取event值与原生小程序有所不同。举例:

    onChange(event){ // 获取表单组件filed的值
      console.log(event.mp.detail) // 注意加入mp
    }

    2. BUG 及报错处理方法

    2.1 监听名

    mpvue 里面无法使用@click-icon这样的监听名,因此如果 API 文档里面有出现这样的监听名,那么需要手动修改源代码。

    可以改成驼峰式的监听名。

    eg: 我在field组件中就遇到这个问题,我的做法是:

    // static/vant/field/index.js
    
    this.$emit('click-icon');
    
    // 修改为:
    
    this.$emit('clickIcon');

    2.2 报错

    一般的报错报错都可以通过一下流程处理。

    • 是否打开了微信开发者工具中的ES6转ES5功能。
    • 仔细检查代码和比对文档,看看是否有使用不当的地方。
    • 重新编译npm run dev或删掉dist目录重新npm run dev
    • 重启或更新微信开发者工具。

    若以上流程都走完了,还是无法解决报错,可以通过提交issues的方式,我来帮你解决。

    2.2.1 引入组件报错

    VM54:1 thirdScriptError sdk uncaught third Error module "static/vant/notify/index.js" is not defined

    解决办法是:打开小程序开发者工具中的ES6 转 ES5功能. issues/#5

    3. 其他组件库

    目前比较好的组件库有三个,Wux Weapp,iview weapp,Vant Weapp

    这三者都是用原生小程序写的组件库,因此理论上来说,在 mpvue 中都是可以无缝使用的。不同组件库的组件都不一样,有的更丰富,有的逻辑更完善,有的文档更清晰。因此用什么组件,还需要自己取舍。

    比如:三者中,唯有Wux Weapp有日历组件,而且它里面还有一些更高级的组件可以使用。

    使用方法上,几乎没有差异。值得注意的是,大家复制源代码到自己项目上时,应该复制/dist/目录下的文件。因为这里是经过编译后的。

    如果大家使用过程中遇到什么 BUG,可以通过提issues的方式让我知道,大家一起踩坑吧!

    分享一个 Demo

    作者基于 vant 和 wux 组件库,以及最新的小程序云开发开发的一个小程序。以及总结了mpvue中使用云开发的注意事项,mpvue-cloud

    猫叫助手|收录各种猫叫声,帮助与猫咪交流,分享一些养猫的小知识等。

    mmexport1539139436955.jpg

    展开全文
  • 微信小程序开发如何使用Vant Weapp UI组件库提高效率 Vant-weapp官网教程 一、安装 # 通过 npm 安装 npm i @vant/weapp -S --production # 通过 yarn 安装 yarn add @vant/weapp --production 在小程序项目根目录...

    微信小程序开发如何使用Vant Weapp UI组件库提高效率

    Vant-weapp官网教程

    一、安装

    # 通过 npm 安装
    npm i @vant/weapp -S --production
    
    # 通过 yarn 安装
    yarn add @vant/weapp --production
    
    

    在小程序项目根目录执行以上命令,下载vant weapp。

    在这里插入图片描述

    二、修改 app.json

    将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
    在这里插入图片描述

    三、构建npm模块

    在微信开发开发工具开启使用npm模块,然后开始选择 工具 >> 构建npm
    在这里插入图片描述

    在这里插入图片描述

    四、在代码中使用UI组件

    首先在页面的json文件中引入组件,或者直接在app.json中引入,这样引入的组件可以在所有页面中直接使用,不用再次引入。

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

    然后在wxml文件中直接使用就可以了

    
    <van-button color="#7232dd">单色按钮</van-button>
    <van-button color="#7232dd" plain>单色按钮</van-button>
    <van-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变色按钮</van-button>
    

    显示的效果如下:
    在这里插入图片描述

    五、编译出错的处理方法

    在这里插入图片描述
    这个错误是目录下没有 package.json 文件导致的。解决方法是在根目录下执行npm init命令生成文件,然后重新执行npm i @vant/weapp -S --production命令安装插件,再次重新构建就能构建成功了。

    如果没有重新安装插件的话也会提示构建成功,但是并不会真正构建已经存在的插件,因为它是根据package.json里面的依赖字段来进行编译的,之前安装的依赖没有添加到文件中就不会被编译。

    展开全文
  • 微信小程序中使用Vant weapp组件库

    千次阅读 2020-07-08 11:07:42
    1、首先新建一个微信小程序项目 这里大家应该都会吧 2、安装node.js 一般前端开发者都会安装这个 具体安装过程请看 node安装教程 ,记得安装时一路next就行,路径用默认路径,不要乱改,安装好...npm i @vant/weapp -S
  • 使用 Vant Weapp 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见 npm 支持 # 通过 npm 安装 npm i @vant/...
  • Vant Weapp轻量小程序 UI 组件库导入教程 因为首次使用 安装过程遇到了很多问题 特此记录一下 步骤一 通过 npm 安装 #安装 npm install #初始化 其中设置安装路径为小程序项目目录 npm init npm i # 通过 npm 安装 ...
  • mpvue项目使用第三方UI框架vant weapp

    千次阅读 2019-04-29 14:33:55
    我们搜到的教程都是说从vant-weapp的git仓库中下载源码,拷贝dist目录到我们创建的mpvue项目文件的static或者dist或者…文件夹中,我觉得都可以吧,只是涉及你引用组件时的路径怎么写。 这里把vant-weapp的dist目录...
  • 预备教程 vant weapp导入 Vant weapp案例1授权登录获取用户基本信息 效果 实现 使用项目中默认未登录的图片 ...在vant weapp组件-cell中,我们将使用到插槽 我们只需要将van-cell节点改为双节点,然后加
  • Vant Weapp组件库官方手册 https://youzan.github.io/vant-weapp/#/quickstart 首先确保本机已有npm环境,如没有安装,自行百度 https://jingyan.baidu.com/article/e4511cf38c05092b845eaf9b.html 安装成功之后出现...
  • 要说到小程序开发过程中用到的UI组件库,我第...小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码:https://github.com/youzan/vant-weapp 中文文档:https://vant-contrib.gitee.io/vant-weapp/#/intro
  • vant weapp导入 demo1授权登录获取用户基本信息 demo2显示头像 效果 实现 分析 wx.getSetting(Object object) 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限。 wx.getUserInfo 使用条件...
  • 2020-8-7前来更新-------------------------------------------放上成品,可以参考参考: 之前用...然后,mpvue只是提供了代码编辑的框架而已,里面的组件之类需要第三方的组件库,我看到基本上用的vant-weapp的比...
  • 部署教程官网里面的就可以了。 然后,mpvue只是提供了代码编辑的框架而已,里面的组件之类需要第三方的组件库,我看到基本上用的vant的比较多,于是也打算尝试一下。 vant官网:...
  • vant-weapp 快速上手

    2019-12-02 17:53:14
    使用 Vant Weapp 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍。 安装 1、用小程序工具初始化项目 2、在项目根目录下添加npm能力,否则报错 微信小程序 没有找到可以构建的npm包 npm init #...
  • vue+vant+weapp搭建小程序,以及打包发布 vue环境搭建 安装node:进入node官网下载与系统匹配的安装包完成安装 安装vue:查看官网教程完成安装 构建 weapp 打开 微信开发者工具 新建项目 2.打开 新建项目 ...
  • 小程序Vant使用教程

    千次阅读 2019-06-20 17:09:09
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...
  • npm i vant-weapp -S --production //安装vant 2.构建npm: 首先必须确保上图的“使用npm模块”被勾上的。 然后点击菜单栏“工具”下的“构建 npm”,并生成了“node_modules”文件夹。 3.需要使用组件的地方在...
  • 小程序如何使用vant

    2020-10-28 22:41:14
    使用 Vant Weapp 前我强烈的建议大家去看下微信官方的 小程序简易教程 和 自定义组件介绍 点击下方超链接 https://youzan.github.io/vant-weapp/#/quickstart 第一步 首先我们先创建一个项目 跟着打开终端,cd 到小...
  • 但,本示例使用vant weapp组件本版较老,只能运行在微信和app上,如需运行在h5上,需使用新版vant weapp组件。 本示例是vant的小程序版,即vant weapp,它基于微信的自定义组件原理实现。 微信小程序的浏览器内核...
  • 使用 Vant Weapp 前,请确保你已经学习过微信官方的小程序简易教程 和自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,详见npm 支持 # npm npm i vant-weapp -S --...
  • 在普通小程序怎么使用 vant 组件使用之前使用 Vant Weapp 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍安装方式一. 通过 npm 安装 (推荐)小程序已经支持使用 npm 安装第三方包,详...
  • 微信小程序第二战 学习引入和使用样式库 学习使用数据渲染插入 ...其实Vant Weapp上面有详细的引入的教程这里我也就不重复了 如何使用 里面有哪些坑 使用还是狠简单的像下图在自己当前页面里面的json文件里面配
  • 小程序开发一般分为两种,原生小程序开发,只用小程序的api中提供的一些组件,还有一种是使用框架,我这里分析下使用vant框架的教程 微信官方文档入口 vant框架入口 步骤: 1.初始化安装node需要的包,依次执行...
  • 1. vant 介绍 ### 扫码体验 Vant - 轻量、可靠的移动端 Vue 小...使用 Vant Weapp 前,请确保你已经学习过微信官方的 小程序简易教程 和 自定义组件介绍 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持...

空空如也

空空如也

1 2
收藏数 40
精华内容 16
热门标签
关键字:

vantweapp使用教程