Vant Weapp组件的使用和外抛api修改一些自己所需样式
Vant Weapp是ZanUI的升级优化版,通过小程序模板引用功能来实现UI效果。
安装
方式一. 通过 npm 安装 (推荐)
小程序已经支持使用 npm 安装第三方包,详见 npm 支持
# 通过 npm 安装
npm i vant-weapp -S --production
# 通过 yarn 安装
yarn add vant-weapp --production
方式二. 下载代码
直接通过 git 下载 Vant Weapp 源代码,并将dist
或lib
目录拷贝到自己的项目中
git clone https://github.com/youzan/vant-weapp.git
使用
引入组件
以 Button 组件为例,只需要在app.json
或index.json
中配置 Button 对应的路径即可。某些小程序框架会要求关闭ES6转ES5
选项,可以引入lib
目录下 ES5 版本的组件。
ES6
"usingComponents": {
"van-button": "/path/to/vant-weapp/dist/button/index"
}
ES5
"usingComponents": {
"van-button": "/path/to/vant-weapp/lib/button/index"
}
使用组件
引入组件后,可以在 wxml 中直接使用组件
<van-button type="primary">按钮</van-button>
在开发者工具中预览示例小程序
# 安装项目依赖
npm install
# 执行组件编译
npm run dev
打开微信开发者工具,导入example
目录的项目就可以预览示例了。
将代码包放入我们自己的项目中,之后我们在用的时候在json文件内的usingComponents里配置相应的文件名和对应模块路径,建议文件名与模块名匹配方便开发。

当我们引入模块后,在wxml文件里就可以使用定义好的引用模块了。相关样式也是都在模块内部定义好了,对应能修改的东西都在文档里,这时候你想修改相应的东西就需要去看文档了,找到对应模块根据文档提供的props参数进行修改。
众口难调,自己在开发时会有各种各样的需求,会发现这些参数并不能满足我们的需求,这时候我们就需要根据自己想要的效果动手去改组件内源代码了(笑),当然没有把握的时候不建议随便改。
如果哪个模块提供的参数不满足你的需求,那我们就只能没有条件创造条件了。在你引入模块的时候那个json文件里的usingComponents配置里面会有对应模块的路径找到它。
你会发现所有的组件模块都在里面找到对应的那个模块,和我们正常pages里面的格式基本一样(js,json,wxml,wxss)
我们拿button来看吧,首先打开wxml文件
你会发现它的本质还是小程序button和view组成的嘛,没错那么我们就可以根据需求相当于更改原生的button和view一样来改它!那如何做呢?首先看代码,第一行引入了一个公共的方法,先不管他。我们改样式跟操作层还不需要打交道,如果是一个经常用的样式不用经常动态改,那在wxss里写成class,如果是一个多样性的样式,直接写成行内样式吧,动态的引入那就写一个参数咯。
class引入
行内引入
那之后呢?之后我们就去看看js吧。
props就是我们需要动手改的地方,他是用来接收传入参数的合集;参数都写在了里面,我们只需要在里面写入我们的参数和参数类型就可以啦,这里我们用string类型就足以。
ok完事具备,回去我们的代码里,
本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2032.html