weex ui源码学习

Posted 2021-04-29 码上就好

最近在使用weex开发项目，使用了很多weex ui提供的控件，知其然，还要知其所以然。接下来的序列，我们会来记录weex ui源码中的一些套路。

套路一：控件提供默认样式，同时也提供自定义样式，源码是如何实现的呢？

举例wxc-countdown的源码：

<template> <div :style="mrTimeWrapStyle">  //省略非必要代码 </div></template>

这里我们可以看到这里有一个style,绑定一个返回对象的计算属性

 computed: { mrTimeWrapStyle () { return { ...this.TIME_WRAP_STYLE, ...this.timeWrapStyle } } },

那么这里技术属性里面涉及到2个知识点，第一个是利用E6的扩展运算符，第二个是利用css样式覆盖的原理，

这样就能实现我们的标题中的套路，而且代码更加简洁优雅。

this.TIME_WRAP_STYLE是我们data中定义的默认属性如下：

  data: () => ({ TIME_WRAP_STYLE: { flexDirection: 'row', alignItems: 'center', marginLeft: '12px', marginRight: '12px' } }),

注意：js中的样式属性一定要写成小驼峰式的（区别于css中的中划线式）

this.timeWrapStyle是通过我们的父组件传递到我们的子组件中的props属性来接收自定义的属性。代码如下：

  props: { // 最外层包裹 style      timeWrapStyle: Object, },

套路二：比如我们想封装一个组合控件，内部的子控件根据不同的条件来进行显示相应的子控件，而且设置默认的子控件以及演样式，通过还可以覆盖子控件及其样式。

我们以wxc-cell为例说明

1. 是否显示相应的子控件可以使用v-if实现

2. 通过使用具名插槽slot的方式来向指定的位置插入标签

代码示例如下：

slot中的div的内容是默认的内容，如果在父组件中根据具名组件的用法，那么就会自动覆盖整slot的内容。

虽然涉及到的知识点很简单，那么你有没有学到源码的套路呢