初步解析⼩程序前端框架vant-ui源码
初步解析⼩程序前端框架vant-ui源码
本学期的系统分析课程要求我们做⼀个⼩项⽬，我们以⼩程序为框架进⾏了项⽬的前端搭建，在UI上以开源组件库vant-ui为基础进⾏了设计，其中⽤到了许多该开源库的设计，对于项⽬前端起到了很⼤的帮助。
应⽤实例
以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 }}"
close="onClose"
>
内容
</van-popup>
API
参数说明类型默认值
show是否显⽰弹出层Boolean false
z-index z-index 层级Number100
overlay是否显⽰背景蒙层Boolean true
position可选值为 top bottom right left String-
duration动画时长，单位为毫秒Number / Object300 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/vant-weapp/dist/popup/index"，这样wxml在解析对应的组件时，遇到van-popup就会调⽤对应的index的插⼊到wxml。下⾯会说明插⼊的index这个组件的组成成分。
知道了对应的调⽤组件之后，组建内部是如何实现对应的效果的？
index内部⽂件组成：
index.wxss
对应的css，除此之外，这⾥还引⽤了@import '../common/index.wxss'⾥⾯的css，不介绍
index.json
配置⽂件，说明了这个组件库引⽤了另⼀个组件van-overlay，⽐较简单，不介绍
{
"component":true,
"usingComponents":{
"van-overlay":"../overlay/index"
<wxs src="../wxs/utils.wxs"module="utils"/>
<van-overlay
if="{{ inited && overlay }}"
mask
show="{{ show }}"
z-index="{{ zIndex }}"
custom-
duration="{{ duration }}"
click="onClickOverlay"
/>
<view
if="{{ inited }}"
class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
transitionend="onTransitionEnd"
>
<view if="{{ safeAreaInsetTop }}"class="van-popup__safe-top" ></view>
<slot />
</view>
van-overlay是这个组件库的另⼀个组件，这⾥⽤来实现遮罩层的效果。
这⾥的双括号{{}}⾥⾯的变量都由下⾯的index.js来控制，留意到这个wxml除了被index.js控制，还引⼊了/wxs/utils.wxs，前
往utils.wxs查看，可以看见如下代码：
var bem =require('./bem.wxs').bem;
var memoize =require('./memoize.wxs').memoize;
function isSrc(url){
return url.indexOf('http')===0|| url.indexOf('data:image')===0|| url.indexOf('//')===0;
}
bem:memoize(bem),
isSrc: isSrc,
memoize: memoize
};
这⾥有个判断url属性的函数isSrc()，还引⽤了bem和memioze的函数，其中bem是⼀个命名格式，将输⼊统⼀成bem的风
格，memioze⽤来处理缓存，返回⼀个装有对应函数的缓存。
function memoize(fn){
var cache ={};
return function(){
var key =serializer(arguments);asp查看源码配置ui
if(cache[key]=== undefined){
cache[key]=call(fn, arguments);
}
return cache[key];
};
}
memioze⽤于将bem函数装⼊utils.wxs的bem⾥⾯，这个bem在index.wxml⾥⾯被调⽤，如下⾯，⽤于处理class的名字的处理拼接。class="custom-class {{ classes }} {{ utils.bem('popup', [position, { safe: isIPhoneX && safeAreaInsetBottom }]) }}"
index.js
这个⽂件是对应的组件的显⽰、动画和控制逻辑代码。
import{ VantComponent }from'../common/component';
import{ transition }from'../mixins/transition';
import{ safeArea }from'../mixins/safe-area';
VantComponent({
classes:[
'enter-class',
'enter-active-class',
'enter-to-class',
'leave-class',
'leave-active-class',
'leave-to-class'
],
mixins:[transition(false),safeArea()],
props:{
transition:{
type: String,
observer:'observeClass'
},
customStyle: String,
overlayStyle: String,
zIndex:{
type: Number,
value:100
},
overlay:{
type: Boolean,
value:true
},
closeOnClickOverlay:{
type: Boolean,
value:true
},
position:{
type: String,
value:'center',
observer:'observeClass'
}
},
created(){
this.observeClass();
},
methods:{
onClickOverlay(){
this.$emit('click-overlay');
if(this.data.closeOnClickOverlay){
this.$emit('close');
}
},
observeClass(){
const{ transition, position }=this.data;
this.updateClasses(transition || position);
if(transition ==='none'){
this.set({ duration:0});
}
}
}
});
⾸先是VantComponent，这个是⼀个函数声明，没有包含任何的具体实现。
declare function VantComponent<Data, Props, Watch, Methods, Computed>(
vantOptions?: VantComponentOptions<Data, Props, Watch, Methods, Computed, CombinedComponentInstance<Data, Props, Watch, Methods, C omputed>>
):void;
与之类似，transition和safeArea也只是函数的格式声明，没有任何的实现代码，具体的实现都在这个index.js⽂件。
接着上⾯的说明，VantComponent在这个index.js进⾏了具体的定义，定义了classes mixins props created()和methods，这⾥可以很明显的看出vue的风格，具体的原理可以查看vue对应的教程。这个函数实现了将本框架的特定字诸如vant-popup⽤基于vue的前端框架来解释和实现。
总结
总的来说，vant-ui是⼀个⽐较优秀的开源前端组件库，可以实现绝⼤多数的普通需求，⽤户在使⽤的时候也可以通过修改源码来实现⾃⼰的特定需求。如果说有什么不⾜之处，那就是css在设计的时候使
⽤的单位都是px，没有⼀处是使⽤rpx这个单位，这个会造成组件在不同终端的显⽰的⼤⼩不能随终端⽽⾃我调整，希望可以在接下来的更新能有所修改。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。