加入CODE CHINA

· 不限速    · 不限空间    · 不限人数    · 私仓免费

免费加入
README.md

更新记录 1.2(2020-05-11) 升级 vant,支持 V3 编译

前言 vant ui有h5版和微信小程序版。其h5版只能用于h5,其微信小程序版(vant weapp)可用于微信和App,从uni-app 2.4.7起,H5和QQ小程序也支持了微信小程序组件。

但,本示例使用的vant weapp组件本版较老,只能运行在微信和app上,如需运行在h5上,需使用新版vant weapp组件。

本示例是vant的小程序版,即vant weapp,它基于微信的自定义组件原理实现。

微信小程序的浏览器内核是固定的,但uni-app的app端和h5端,存在浏览器兼容问题。 而vant weapp仅适配了微信浏览器内核,对于低版本浏览器兼容性不佳。在低端的Android4、5手机上可能存在css兼容性问题,如遇到样式变形需修改源码中的样式。从uni-app 2.5.3起,App端也支持了腾讯X5内核,可以避免css兼容问题,详见https://ask.dcloud.net.cn/article/36806

使用建议 一般情况下,建议开发者使用标准的uni-app组件,即vue标准组件。而不是小程序自定义组件。

因为从性能、多端兼容、语法一致性等各方面,vue组件都更有优势,详见https://ask.dcloud.net.cn/article/35489。

所以一般还是建议使用uni ui。

示例介绍 本示例同时也是一个微信小程序转uni-app的示例。因为本示例原本是从vant官方发布的微信演示示例转换而来。

所以每个页面里除了有vue页面,也保留了之前的wxml等文件,方便开发者看之前的小程序代码是怎么写的。

vant weapp的框架源码,都在工程的wxcomponents目录下。pages目录下是各个示例页面。

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官网

环境注意 本示例部分功能依赖HBuilderX 1.8.8版及以上版本,自定义组件编译模式。 本示例是vant weapp,即小程序ui库,不是vant的web ui库。

项目简介

vant--uniapp版本

发行版本

当前项目没有发行版本

贡献者 1

安沫晨 @mo3408

开发语言

  • JavaScript 64.9 %
  • Vue 34.5 %
  • CSS 0.6 %