初探Mpvue的组件、样式机制

序言

实现了一个简单的demo之后呢，Eknow君这一节会通过小程序API来实现几个小功能。主要从mpvue的组件、语法以及小程序的相关API完善。

mpvue的组件

上一节，我们可以了解到mpvue基本支持vue组件的所有特性，不遵守这些特性并不会错误，我们只是了能够开发良好的代码，编写高质量的代码可以说是程序员的一道分水岭吧。
回到正题哈，mpvue在很大程度上 都支持vue组件与小程序的原生组件的,但由于mpvue要预编译程wxml，所以只支持.vue的文件格式，不支持动态组件，自定义 render，和字符串模版等。同时小程序的事件绑定是以vue的语法来绑定的。这也是mpvue与vue、原生小程序的一些区别。

什么是动态组件

vue的动态组件是指通过使用 <component> 元素，动态地绑定到它的is 特性，让多个组件使用同一个<component>来进行挂载，并动态切换。来看个例子

<template>
      <div>
          <button @click="change">点击</button>
         <component :is="currentView"></component>
     </div>     
<template>
<script>
 const HOME = {template: '<div>我是主页</div>'};
 const MESSAGE = {template: '<div>我是信息页</div>'};
 const PERSON = {template: '<div>我是个人页</div>'};
export default {
        data () {
            return { 
                index: 0, 
                arrPage: [HOME, MESSAGE, PERSON]
            };
        },
        methods: { 
            change () { 
                this.index = this.index === 3 ? 0 : ++this.index;
            }
        }
}
</script>

对于vue来讲，这是个不错的功能特性，不过mpvue上却是不支持的。

小程序事件绑定

<picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
</picker>

如小程序的bindchange="eventName"事件，mpvue需要写成 代码中的@change来支持。

mpvue的样式机制

作为前端开发工程师的我们，布局是必须掌握、甚至得精通的一个技能，基本上看到一个页面布局我们基本能估摸得出这是通过什么样式实现的。由于是小程序的专题，因此接下来会围绕flex布局、rpx、sass等css扩展语言展开。

flex布局

在网页开发中，布局常用的方式有很多种，比如bootstrap这样的栅格系统。然而在小程序中，我们最需要用到的应该是用flex进行布局。虽然说有些环境不太支持flex，但小程序对flex的布局是非常好的。用代码来演示一下flex的能力吧。

 display: flex;     //块级元素的flex布局
 display: inline-flex;     //行内元素的flex布局

flex-direction: row | row-reverse | column | column-reverse;     //水平，从左到右 | 水平，从右到左 | 垂直，从上到下 | 垂直，从下到上

flex-wrap: nowrap | wrap | wrap-reverse;     // 不换行 | 换行，第一行在上方 | 换行，第一行在下方

flex-flow: <flex-direction> || <flex-wrap>;      // flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

justify-content:flex-start | flex-end | center | space-between | space-around;     //向左对齐 | 向中间对齐 | 两端对齐 | 两侧的间隔相等

align-items: flex-start | flex-end | center | baseline | stretch;      //向上垂直对齐 | 向下垂直对齐 | 垂直中间对齐 | 垂直铺面整个容器 | 以项目的第一行文字的基线对齐

align-content: flex-start | flex-end | center | space-between | space-around | stretch;      //多根轴线的对齐方式

在css3里面最受欢迎的布局应该是flex布局了，它比传统布局更简洁、方便。

rpx与px\rem的关系

首先来看一下我对这三个单位的一般使用场景：px一般用于pc，rem一般用于移动端，rpx则是小程序的专属单位。在设计稿中，分别有750与640物理像素这2种阵营。而对于小程序来讲，rpx无论在哪种设备终端，它都是750rpx的宽度，因此如果页面开发需要设计师配合的老铁，妥妥地要求750宽度的设计稿比较好些。

rpx/px/rem之间的运算关系

在此以750宽度的设计稿来做前提，他们之间的关系则是 1px = 0.5rpx | 1rem = (750/20)rpx

sass/less/stylus的使用

小程序发展到现阶段，已经可以支持es6的语法了，这对于开发者来讲真的是一个福音。不仅代码编写更简洁，还能支持css的扩展性语言，如sass/less/stylus，作为预处理器的它们，不仅在写法上提供便利，更能使代码变得简单并且更容易维护。

预处理器之间的区别

sass能支持条件语句，less能在服务端上运行，而且两者之间的变量符不一样。
而stylus区别较大，在编写中，不需要写花括号{}或者:进行样式编写。

//sass/less
 ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
//stylus
 ul 
    margin 0
    padding 0
    list-style none

css的预处理技术在现阶段来讲可以说是很成熟的了，根据团队合作的需要，可以进行其中一种的选择，这3种预处理器都是各有特色的，无所谓好与坏。

结语

噼里啪啦一大堆，这些东西是可以说是对基础的总结了，当然持续学习是很重要的。接下来还是有几个小demo出现，如果老铁们感兴趣的话，后台回复“示例”，可以获取相应的代码。

推荐文章

想高效开发小程序，mpvue了解下（一）
想高效开发小程序，mpvue了解下（二）
用mpvue实现一个简单的demo