初步解析小程序前端框架vant-ui源码
本学期的系统分析课程要求我们做一个小项目,我们以微信小程序为框架进行了项目的前端搭建,在UI上以开源组件库vant-ui为基础进行了设计,其中用到了许多该开源库的设计,对于项目前端起到了很大的帮助。
组件库的使用教程在 https://youzan.github.io/vant-weapp/#/intro ,介绍说明比较详细且简单,因此这里不再赘述,这里希望对于框架的组成和实现方式进行初步的窥探。
应用实例
以Popup 弹出层为例,这个组件的实现功能如下图所示,可以实现在页面的各个位置以不同的方式弹出提示框选择框的效果
-
效果
-
使用方法:
- 引入组件
"usingComponents": { "van-popup": "path/to/vant-weapp/dist/popup/index" }
- 代码演示
- 基础用法
- popup默认从中间弹出
<van-popup show="{ { show }}" bind:close="onClose">内容</van-popup> Page({ data: { show: false }, onClose() { this.setData({ show: false }); } });
- 弹出位置
- 通过position属性设置 Popup 弹出位置
<van-popup show="{ { show }}" position="top" overlay="{ { false }}" bind:close="onClose" > 内容 </van-popup>
-
API
参数 说明 类型 默认值 show 是否显示弹出层 Boolean false z-index z-index 层级 Number 100 overlay 是否显示背景蒙层 Boolean true position 可选值为 top bottom right left String - duration 动画时长,单位为毫秒 Number / Object 300 custom-style 自定义弹出层样式 String `` overlay-style 自定义背景蒙层样式 String `` close-on-click-overlay 点击蒙层是否关闭 Popup Boolean true safe-area-inset-bottom 是否为iPhoneX留出底部安全距离 Boolean true safe-area-inset-top 是否留出顶部安全距离(状态栏高度 + 导航栏高度) Boolean false
解析框架
根据上面的例子可以看出,这个框架实现的功能以及可调用的接口还是比价丰富的,那么首先的问题是组件库是怎么知道调用哪个组件?
- 在配置文件引入组件时,使用了
"van-popup": "path/to/