本文已参与「新人创作礼」活动，一起开启掘金创作之路。

前言

从开发小程序就一直封装各种组件，关键是挺实用，本想用官方的头部组件，发现实际用起来不是很流畅，为此自己开发了一套公共头部，简洁美观明了。

创建头部公共组件

头部组件带有返回和标题，还有自定义按钮根据传来的数据判断是否展示， 我这里做了最常用的返回和标题，返回通过isBack进行判断是否展示，title是标题

<view class="cu-custom" style="height:{{CustomBar}}px">
  <cover-view class="cu-bar fixed {{bgImage!=''?'none-bg text-white bg-img':''}} {{bgColor}}"
    style="height:{{CustomBar+1}}px;{{bgImage?'background-image:url(' + bgImage+')':''}}">
    <cover-view class="history" bindtap="BackPage" wx:if="{{isBack}}">
      <cover-image class="customImage" src="../../img/history.png"></cover-image>
    </cover-view>
    <cover-view class="content" style="top:{{StatusBar}}px">
    {{title}}
    </cover-view>
  </cover-view>
</view>

组件方法和参数设置

bgColor背景颜色，我这里设置的是从app.wxss里设置的公共的 isBack 是否返回，这个感觉最大的痛点是每引入一次组件都要传这个参数（后期改成默认）

    bgColor: {
      type: String,
      default: ''
    }, 
    isCustom: {
      type: [Boolean, String],
      default: false
    },
    isBack: {
      type: [Boolean, String],
      default: false
    },
    bgImage: {
      type: String,
      default: ''
    },
    title:{
      type:String,
      default:''
    },

BackPage定义返回方法

wx.navigateBack({
    delta: 1
});

最重要的一点是向父组件里传参

我这里用到的是  this.triggerEvent('父组件方法名'，{参数})

调用

在app.json里设置usingComponents参数这样就省的每个文件里都要引入

"usingComponents": {
    "cu-custom": "/components/cu-custom" //文件具体路径
  }

提示组件

在app.js里写入公共状态的方法 that, type, text分别为当前this、类型和提示语句并设置了三种不同的状态色

  showToptip: function (that, type, text, time = 2500) {
    that.setData({
      tipType: {
        "error": "bg-red",
        "success": "bg-gradual-green",
        "worning": "bg-orange"
      } [type],
      tipText: text,
      tipStaus: "show"
    })
    setTimeout(function () {
      that.setData({
        tipStaus: null
      })
    }, time)
  },

CustomBar为系统默认的高度，可以看之前的文章了解...

<view class="toptip {{tipStaus}} text-white {{tipType}}" style='top:{{CustomBar}}px;'>{{tipText}}</view>

最后调用

app.showToptip(that,'error','好看吗')

总结

一个小小的组件，却有了大的用处，谢谢大家支持！