Vue Options Api => 小程序 Options API

小白又开始写文章了...

common

一些公用的样式，工具函数，组件都放在这里

公用的样式

样式主要使用 less 书写，听说在在国内 less 很火，但是在国内 sass 很火，个人学了 sass 的 scss 部分，我们想要在小程序里面使用 scss, 就必须使用编译器，vant 就是使用 gulp 做了编译，然后使用 less, 下一个专题里面会讲解 css 的方法论 bem 在 van 中的使用方法。bem 方法论配合 css 的预处理器使用起来简直不要太舒服

clearfix
ellipsis
hairline
theme
var

公用的颜色

color

export const RED = '#ee0a24';
export const BLUE = '#1989fa';
export const WHITE = '#fff';
export const GREEN = '#07c160';
export const ORANGE = '#ff976a';
export const GRAY = '#323233';

公用的组件

component.ts

具体分析见下面

utils

utils.ts 公用的工具类函数

function isDef()
function isObj()
function isNumber()
function range()
function nextTick()
function getSystemInfoSync()
function addUnit()

mixins/

page 页面主要起到主要的承载功能，

transition
touch
safe-area // 正对 iphone 刘海屏的解决方案，获取设备信息，然后缓存起来 created 生命周期的时候，自动的获取设备信息数据
open-type
link // 封装了微信小程序路由相关的 api
button // 封装了的功能
basic
observer/ index -> 处理 watch 字段 behavior -> set 方法是 Promise 化 setData

vantComponent 分析

{
    data: 'data',
    props: 'properties',
    mixins: 'behaviors',
    methods: 'methods',
    beforeCreate: 'created',
    created: 'attached',
    mounted: 'ready',
    relations: 'relations',
    destroyed: 'detached',
    classes: 'externalClasses'
  }

映射函数

function mapKeys(source: object, target: object, map: object) {
  Object.keys(map).forEach(key => {
    if (source[key]) {
      target[map[key]] = source[key];
    }
  });
}

小程序组件特殊的处理

relations，组件间关系，类似于 Vue 中 provider 和 inject

const { relation } = vantOptions;
  if (relation) {
    options.relations = Object.assign(options.relations || {}, {
      [`../${relation.name}/index`]: relation
    });
  }

2.外部出入的样式类

 // add default externalClasses
  options.externalClasses = options.externalClasses || [];
  options.externalClasses.push('custom-class');

一些基础方法的改写

this.triggerEvent => this.$emit
wx.createSelectorQuery => this.getRect

表单行为

// map field to form-field behavior
  if (vantOptions.field) {
    options.behaviors.push('wx://form-field');
  }

小程序的 option 的 option 添加默认值

 // add default options
  options.options = {
    multipleSlots: true,
    addGlobalClass: true
  };

监听 options 的变化

observe(vantOptions, options);
Component(options);

observe 函数里面干了两件事

添加了 behavior 2.将 watch 挂载到小程序的props对象的observer属性上面。

学习小程序Vant-weapp 组件Options的映射，mixins, common 分析(2)]