精华内容
下载资源
问答
  • 1.0 来了2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k...

    1.0 来了

    2018 年 8 月 11 日,我们发布了 Vant Weapp 的首个版本。16 个月以来,我们收到了 27 位开发者贡献的 1000 多次提交,也处理了 1200 多个 issue,发布了 50 多个版本。Github 的 star 数从 5k 上升到了 11k,长期是 Github 上 star 数最多的第三方小程序 UI 组件库。

    现在,我们很高兴向大家介绍 Vant Weapp 1.0 版本。

    经过 2 个月的开发与 beta 测试,我们为大家带来了 11 个全新的组件,重构了多个现有组件,增加了覆盖所有组件的主题定制特性。并且,为了配合 Vant 家族的发展,正式将包名变更为 @vant/weapp。

    大家可以扫描下方小程序码体验 Vant Weapp 1.0 示例

    新版本介绍

    新的组件

    在 Vant Weapp 1.0 版本中,我们新增了 11 个实用的基础组件:

    Grid 宫格,用于展示内容或进行页面导航

    Image 图片,增强版的 Image 标签,支持图片懒加载与加载失败提示

    Circle 环形进度条,告知用户当前的状态和进度

    Overaly 遮罩层,用于强调特定的页面元素,并阻止用户进行其他操作

    Divider 分割线,区隔内容的分割线

    Sticky 粘性布局,与 CSS 中position: sticky属性实现的效果类似

    Skeleton 骨架屏,在待加载区域展示的占位区块,提供界面加载过程中的过渡效果

    IndexBar 索引栏,通讯录中的字母索引栏,用于长列表快速索引

    Uploader 文件上传,上传一个或多个文件

    CountDown 倒计时,用于显示活动倒计时、短信验证码等

    DropdownMenu 下拉菜单,用于列表的分类选择、筛选及排序

    样式定制

    在 1.0 迭代计划确定之初,我们就不断思考这样一个问题 -- 该如何给用户提供动态切换主题样式的功能呢?

    微信小程序的环境是非常特殊的。不具有动态加载代码的机制,同时微信又限制了代码的主包大小和总大小。传统的基于预设的样式定制过于臃肿,不再适合微信小程序的环境。

    微信小程序自定义组件的组件模型相当于一个简化版的 Shadow DOM,幸运的是,小程序也支持了 CSS自定义属性 的特性。最终,我们基于CSS自定义属性设计了样式定制的方案,开发者使用灵活、方便,组件维护也更简单。

    从 1.0 版本开始,Vant Weapp 中的所有组件都支持通过 CSS组定义属性 进行样式定制,具体使用姿势可查看相关文档

    不兼容更新

    1.0 版本中包含少量不兼容更新,主要是命名调整和移除个别属性。对于正在使用 0.x 版本的项目,请按照更新日志依次检查,大部分项目可以无痛升级。

    未来

    Vant Weapp 会积极探索与腾讯云开发结合的可能性,为大家带来更好的使用体验。不久,我们将再次与大家见面。

    最后

    感谢社区长期以来为 Vant Weapp 提供的贡献与反馈,让我们始终与开发者站在一起。如果您在使用 Vant Weapp 的过程中遇到任何问题,欢迎在 Github 向我们反馈。

    欢迎关注“有赞coder”公众号!

    展开全文
  • Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用两大参考神兽:1:桌面新建一个vant文件夹2:打开微信开发者工具,在这个文件里新建...

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

    两大参考神兽:

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

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

    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界面写一点文档里面的代码

    默认按钮

    主要按钮

    警告按钮

    危险按钮

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

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

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

    wxml

    steps="{{ steps }}"

    active="{{ active }}"

    />

    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后前端妹子,爱编程,爱运营,爱折腾。

    坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq群聊来问我:473819131。

    展开全文
  • 一、介绍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

    展开全文
  • Vant Weapp小程序蹲坑之使用checkbox组件发布时间:2020-03-14 00:02:48来源:51CTO阅读:4529引子checkbox-group及checkbox组件是开发小程序中频繁使用的组件,当然在vant weapp组件库中对应的分别是van-checkbox-...

    Vant Weapp小程序蹲坑之使用checkbox组件

    发布时间:2020-03-14 00:02:48

    来源:51CTO

    阅读:4529

    引子

    checkbox-group及checkbox组件是开发小程序中频繁使用的组件,当然在vant weapp组件库中对应的分别是van-checkbox-group和van-checkbox。遗憾的是,官方提供的仅是组件在原生微信小程序框架下的用法,但我们所关注的是如何把这些组件改写到mpvue框架中。有关此二组件常用属性,在文后引用地址(官方)都有详细介绍,在此省略。

    问题1:数据绑定与模板字符串问题

    这个问题困绕了我很长时间,搜索网络,包括google英文搜索,几乎没有找到相应的答案。首先,请看下面官方提供的组件在原生微信小程序框架下的用法:

    wx:for="{{ list }}"

    wx:key="index"

    title="复选框 {{ item }}"

    clickable

    data-name="{{ item }}"

    bind:click="toggle"

    >

    请注意上面van-cell组件的title组件与van-checkbox组件的class属性表达方式,在转换成mpvue框架下的表达时,我相当然地表达成下面这样:

    v-for="item in list"

    :key="index"

    :title=`复选框${item}`

    clickable

    :data-name="item"

    @click="toggle"

    >

    结果编译都通过不了!

    解答:

    通过美团开源官方上问题集处(引用地址2)得到初步答案提示,说:

    “目前是直接把 template 转译成 wxml ,wxml 不支持 ``,所以目前暂无法支持”

    即由于微信小程序官方(时间是2018年8月,至今仍然不支持)的wxml语法中不支持ES6的模板字符串表达方式,所以mpvue官方(因为其最终也是走转换成wxml的路子)也宣布不支持,只是没有在醒目的文档说明中提到(这真正是一个“坑”啊)。那么,如何修改上面非常明确的常用需求呢?经过反复试验,方式如下(只写关键部分):

    :title="'复选框'+item"

    :class="'checkboxes-'+item"

    有上述需求的同学可要好好观察一下了!这里没有使用到模板字符串中反向单引号,在双引号的里面可以归纳成由单引号字符串组成的通过加号连接的字符串加法,只不过参与加法的一些部分是字符串变量而已。

    问题2:selectComponent方法的使用

    官方资料中提到:selectComponent用于微信小程序开发中获取自定义子组件,详情见引用资料3。那么,官方示例中提到的方法(如下)如何改写呢?

    toggle(event) {

    const { name } = event.currentTarget.dataset;

    const checkbox = this.selectComponent(`.checkboxes-${name}`);

    checkbox.toggle();

    }

    请看下面的答案。

    # 解答:

    toggle(event) {

    const {name} = event.mp.currentTarget.dataset;

    const box =this.$mp.page.selectComponent(`.checkboxes-${name}`)

    box.toggle();

    }

    注意,上面使用了标准的ES6中模板字符串表达方式,因为这里不是wxml文件中,而是vue文件中的

    补充1

    van-checkbox组件默认情况下显示的是单选按钮形式的图标,因此需要使用shape属性修正一下为好,如下所示:

    选项 {{ item }}

    这里的shape属性值默认为circle。经上述修改即成为常见的方形的复选框图标了。

    补充2

    在同学们学习官方提供的checkbox定制图标示例中,如果是使用本地图标文件,记得要使用绝对地址方式,相对地址出现找不到的错误提示。正确方式类似如下表达:

    ```

    icon: {

    normal:'/static/images/custom_normal_checkbox.png',

    active:'/static/images/custom_active_checkbox.png'

    }

    # 引用

    1.https://youzan.github.io/vant-weapp/#/checkbox

    2.https://github.com/Meituan-Dianping/mpvue/issues/845

    3.https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/events.html?search-key=selectComponent

    展开全文
  • 本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题。坑来坑去,先上示例代码吧,由简单到复杂顺序。main.js代码main.json代码index.vue代码:price="3050"button-text="提交订单"@submit=...
  • Vant Weapp.zip

    2019-10-23 18:01:35
    Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,高端大气上档次!(资源内含使用说明.) Vant Weapp官网: https://youzan.github.io/vant-weapp
  • 按照 vant-weapp 官方文档的说明操作之后,依然无法在微信小程序项目中引入 vant-weapp 前端框架。记录一下 1、新建一个微信小程序,并在项目根目录下新建一个 @vant 文件夹,再在 @vant 文件夹下新建一个 weapp ...
  • 我是结合的vant weapp的checkbox实现的,less代码我就不给了index.wpy{{list.materail_name}}{{list.materail_brand}}{{list.status}}导出全部index.jsimport wepy from '@wepy/core';wepy.page({data: {active: 0,...
  • Taro(V2.0.5)中引入Vant Weapp,(需下载资源到项目中:大小约322KB) 需如下几步: 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包,将对应的dist文件夹下内容复制到新建的vant-...
  • 一、下载微信开发工具[https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html]二、在本地新建一个空文件夹三、打开微信开发者...npm install --production3、第三步: npm i vant-weapp -S -...
  • 地址:...运行npm i vant-weapp -S --production3.安装成功后 点击 工具 => 构建npm之后点击 详情 => 使用构建npm 渲染二.使用组件库首先在json文件中引入组件"van-...
  • 根据项目需求,一个页面,同时出现以下几种组件1、input输入框2、picker选择器3、时间选择器4、textarea5、图片上传和预览首先看vant-ui发现以上几个组件都可以使用,于是愉快的撸了起来。。。。引入了所有需要用的...
  • uni-app引入vant Weapp

    千次阅读 2020-05-11 17:05:17
    vant Weapp 是有赞专为微信小程序适配的一套UI组件详情查看官网 此组件只兼容微信小程序和app,有跨端需求的请做好适配 此文是关于uni-app在HBuliderX中如何引入vant Weapp 工具 HBuliderX 微信开发者工具 方法...
  • 在使用vant的picker组件时,我希望有在页面加载时向数据库获取值来设置picker的默认值。开始我使用官方文档中的default-index属性,并在onLoad方法中进行this.setData()。但是这样做picker的默认索引还是0。于是我又...
  • 微信小程序中使用vant weapp微信小程序中使用vant weapp正文开始 微信小程序中使用vant weapp 正文开始 打开微信开发者工具到项目中 打开终端输入 npm init 然后一直回车(默认)直至-Is this OK? (yes) 输入y ...
  • vant weapp的使用

    千次阅读 2020-01-09 15:37:20
    npm i vant-weapp -S --production # 通过 yarn 安装 yarn add vant-weapp --production # 直接通过 git 下载 Vant Weapp 源代码,并将dist或lib目录拷贝到自己的项目中 git clone ...
  • 小程序引入Vant Weapp

    2020-07-28 16:16:50
    引入Vant Weapp 在小程序的根目录执行npm init一路回车yes生成package.json文件 引入Vant Weapp,在小程序的根目录执行,生成node_modules npm i @vant/weapp -S --production 使用npm模块打钩,工具-》构建npm...
  • Vant Weapp使用教程

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

    万次阅读 热门讨论 2018-12-12 12:04:18
    首先是安装VantWeapp 安装 方式一. 通过 npm 安装 (推荐) 小程序已经支持使用 npm 安装第三方包,注意这个是在你小程序项目的目录下, # npm npm i vant-weapp -S --production # yarn yarn add vant-weapp --...
  • //将新上传的图片从头部插入原图片数组中 that.triggerEvent('Upload', { imgList, key }) //上传成功将新的图片数组给到组件 }) } }) } 完整js 文件 import Dialog from '../../../../miniprogram_npm/@vant/weapp/...
  • mpvue-vant记录了我们团队开发中在mpvue中使用Vant Weapp组件库所踩下的坑,在这里分享给大家,让mpvue开发者可以使用vant组件库进行开发,避免踩不必要的坑。 此教程是在dov-yih一同协助下完成。经过测试,Vant ...
  • 使用Vant Weapp前言准备工作命令行操作构建npm和使用npm使用Vant Weapp使用组件效果如下 前言 最近在开发微信小程序,确定使用 Vant Weapp 这个库,安装方式如下: 准备工作 创建一个微信小程序 命令行操作 # 项目...
  • 微信小程序引入Vant Weapp Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 安装: 它有两种安装方式: 方法一: 在GitHub上下载...
  • 微信小程序 引入外部UI组件 Vant Weapp Vant Weapp官网地址: https://youzan.github.io/vant-weapp/#/intro 1.下载Vant Weapp npm i vant-weapp -S --production 下载好的文件在:项目文件/node_modules/vant-weapp...
  • 在app.js中我封装了云数据库操作的方法,因此在页面js中直接调用,如app.updateInfo(that.data.setName,_id,theInfo,e=>{})就是封装的修改数据库方法,参数分别为云数据库集合名称、被修改的数据id,更改后的数据...
  • Vant Weapp使用方法

    2020-09-27 11:14:34
    Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用 两大参考神兽: 文档:https://youzan.github.io/vant-weapp/#/intro 开源:...
  • Vant Weapp和F2以及日历

    2020-02-27 08:30:03
    1.Vant Weapp 介绍:Vant Weapp 是移动端 Vue 组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 // 安装 npm i vant-weapp -S --production 小程序工具的...
  • Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。
  • Vant Weapp 二、新建小程序 这步不用教吧 三、npm初始化 先这样 然后输入命令 npm init 四、安装vant weapp npm i @vant/weapp -S --production 五、构建npm模块 六、使用 在index.json中 { ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,467
精华内容 586
关键字:

vantweapp