最近感觉人手不够，所以筹个代码（小程序组件开发）

简介

小程序组件基本不限制，这里提供已有小程序思路和使用方法

目录

1. TitleBar

开发思路

参见 TitleBar

思路1

单一配置对象初始化，这里通过传入config属性的对象对titleBar的基础样式和内部样式初始化

properties: {
    back: {
      type: String,
      value: '1'
    },
    config: {
      type: Object,
      value: {
        theme: 'default',
        style: {}
      },
      observer(newConfig, oldConfig) {
        newConfig.style = {
          ...oldConfig.style,
          ...newConfig.style,
        }
        let _displayBackBtn = false;
        switch (newConfig.theme) {
          case 'default':
            newConfig.style.opacity = 0;
            break;
          case 'simple':
            newConfig.style.opacity = 1;
            break;
          case 'normal':
            newConfig.style.opacity = 1;
            _displayBackBtn = true;
            break;
        }
        this.setData({
          displayBackBtn: _displayBackBtn
        });
      }
    }
  },

思路2

在框架内通过page.setData方法对当前调用的页面反向注入页面内需要的参数
titleBar中创建了titleBar对象，分别注入了titleBar的页面显示高度以及中心内容区域高度

context(page, modules, cache) {

    let buildDisplayStyle = (styleConfig) => {
      styleConfig = styleConfig || {};
      let paddingTop = cache.menuButton.top,
        paddingBottom = 10;
      this.logDebug('title bar config: ', JSON.stringify(styleConfig));

      page.setData({
        titleBar: {
          height: (styleConfig.style.height || cache.menuButton.height) + paddingTop + paddingBottom,
          contentHeight: styleConfig.style.height || cache.menuButton.height
        }
      });

      return `padding-top: ${paddingTop}px;` +
        `padding-bottom: ${paddingBottom}px;` +
        `height: ${styleConfig.style.height || cache.menuButton.height}px;` +
        `background: ${styleConfig.style.background || '#fff'};` +
        `${styleConfig.style.opacity ? ('border-bottom: ' + (styleConfig.style.border || '#ccc solid 1rpx')) : ''};` +
        `opacity: ${styleConfig.style.opacity || 0};`;
    }

    

    this.setData({
      contentPaddingRight: cache.system.windowWidth - cache.menuButton.left,
      height: cache.menuButton.height,
      displayStyle: buildDisplayStyle(this.data.config)
    });

    return {
      buildDisplayStyle: buildDisplayStyle,
      back() {
        let navigateBack = Number(this.data.back);
        if (Number.isNaN(navigateBack)) {
          this.redirectTo(this.data.back);
        } else {
          this.navigateBack(navigateBack);
        }
      }
    };
  },