Vant Weapp小程序UI组件库

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 源代码,并将distlib目录拷贝到自己的项目中

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

使用

引入组件

以 Button 组件为例,只需要在app.jsonindex.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里配置相应的文件名和对应模块路径,建议文件名与模块名匹配方便开发。

2019070209042261

当我们引入模块后,在wxml文件里就可以使用定义好的引用模块了。相关样式也是都在模块内部定义好了,对应能修改的东西都在文档里,这时候你想修改相应的东西就需要去看文档了,找到对应模块根据文档提供的props参数进行修改。

2019070209090637

众口难调,自己在开发时会有各种各样的需求,会发现这些参数并不能满足我们的需求,这时候我们就需要根据自己想要的效果动手去改组件内源代码了(笑),当然没有把握的时候不建议随便改。

如果哪个模块提供的参数不满足你的需求,那我们就只能没有条件创造条件了。在你引入模块的时候那个json文件里的usingComponents配置里面会有对应模块的路径找到它。

2019070209182963

你会发现所有的组件模块都在里面找到对应的那个模块,和我们正常pages里面的格式基本一样(js,json,wxml,wxss)

我们拿button来看吧,首先打开wxml文件

2019070209242091

你会发现它的本质还是小程序button和view组成的嘛,没错那么我们就可以根据需求相当于更改原生的button和view一样来改它!那如何做呢?首先看代码,第一行引入了一个公共的方法,先不管他。我们改样式跟操作层还不需要打交道,如果是一个经常用的样式不用经常动态改,那在wxss里写成class,如果是一个多样性的样式,直接写成行内样式吧,动态的引入那就写一个参数咯。

class引入123

 

行内引入

22222

那之后呢?之后我们就去看看js吧。

3333

props就是我们需要动手改的地方,他是用来接收传入参数的合集;参数都写在了里面,我们只需要在里面写入我们的参数和参数类型就可以啦,这里我们用string类型就足以。

ok完事具备,回去我们的代码里,

<van-button buttonStyle=”bottonClass”>我们的按钮</van-button>
<van-button buttonStyle=”color:red;background:#99999;”>我们的按钮</van-button>
如此这般就成功啦,我们就可以任意更改我们需要的一些东西了。
灵活运用你会发现其实我们可以改很多东西,真的可以为所欲为(笑)这里就不多介绍了。

本文来自投稿,不代表微擎百科立场,如若转载,请注明出处:https://www.w7.wiki/develop/2032.html

发表评论

登录后才能评论