ウィジェットカスタムヘッダコンポーネント

/* eslint-disable no-unused-vars */
import { wxp, http } from './utils/index'
import { store } from './store/index'
import log from './utils/log'

App({
  onLaunch(options) {
    //        =        +            * 2 +      
    // iOS              ：4px， Android   8px，      32，     ，android   96，ios 88
    //           （           ，                ）
    // wxp.getSystemInfo().then(systemInfo => {
    //   store.setBarHeight(systemInfo.statusBarHeight)
    // })
    let systemInfo = wx.getSystemInfoSync()
    let rect = wx.getMenuButtonBoundingClientRect()
    let gap
    let barHeight
    if (rect) {
      //     
      gap = rect.top - systemInfo.statusBarHeight //                  =            -       
      barHeight = 2 * gap + rect.height
    } else {
      if (systemInfo.platform === 'android') {
        barHeight = 48
      } else {
        barHeight = 40
      }
    }
    store.setNavHeight({
      statusHeight: systemInfo.statusBarHeight,  //   
      barHeight: barHeight, //   
    })
	//      
    http.get('/common/mini_set').then(({ data }) => {
      store.setConfig(data)
    })
    //       ，          
    if (!options.path.includes('login')) {
      wxp.login().then(async ({ code }) => {
        try {
          const { data } = await http.post('/auth/login', {
            code,
            source: 2,
          })
          store.setUserInfo(data.userInfo)
          store.setMemberInfo(data.memberInfo)
          wx.setStorageSync('token', data.userInfo.token)
        } catch (error) {}
      })
    }
  },
  onError(error) {
    log.error(error)
  },
})

<config>
  {
    "component":true,
    "usingComponents": {
      "van-sticky": "@vant/weapp/sticky/index"
    }
  }
</config>

<template lang="wxml">
  <van-sticky>
    <view class="navbar-box w100" style="height:{{navHeight.statusHeight + navHeight.barHeight }}px;background:{{bg}};">
      <view class="navbar w100 fixed" style="height:{{navHeight.statusHeight + navHeight.barHeight}}px;padding-top:{{navHeight.statusHeight}}px">
        <view class="title white size-32" style="line-height: {{navHeight.barHeight}}px;">{{title}}</view>
      </view>
    </view>
  </van-sticky>
</template>

<script>
import { store } from '../store/index'
Component({
  options: {
    addGlobalClass: true,
  },
  properties: {
    title: String,
    bg: String,
  },
  data: {
    navHeight: {},
  },
  lifetimes: {
    attached() {
      this.setData({
        navHeight: store.navHeight,
      })
    },
  },
  methods: {},
})
</script>

<style>
.navbar {
  top: 0rpx;
  left: 0rpx;
  right: 0rpx;
}
.title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
</style>

//json
"usingComponents": {
   "navbar":"../components/navbar"
},
"navigationStyle":"custom"

//html
<!-- navbar -->
<navbar title="  " bg="{{home_diy[theme-1].bg}}"></navbar>

import { observable, action } from 'mobx-miniprogram'
import { http } from '../utils/index'

export const store = observable({
  userInfo: wx.getStorageSync('userInfo') || {},
  memberInfo: wx.getStorageSync('memberInfo') || {},
  addressList: wx.getStorageSync('addressList') || [],
  config: {},
  navHeight: {}, //     

  get isvip() {
    return Boolean(this.memberInfo.status && this.memberInfo.status == 1)
  },
  get isagent() {
    return Boolean(this.userInfo.agent == 1)
  },
  get iszhubo() {
    return this.userInfo.anchor_status //0-    1-    2-    3-   
  },
  //     ，      
  updateIszhubo: action(function (status) {
    this.userInfo.anchor_status = status
  }),
  // actions
  // user's
  fetchUserInfo: action(function () {
    return http.get('/common/userInfo').then(({ data }) => {
      this.setUserInfo(data.userInfo)
      this.setMemberInfo(data.memberInfo)
    })
  }),
  setUserInfo: action(function (userInfo) {
    let obj = Object.assign({}, this.userInfo, userInfo)
    this.userInfo = obj
    wx.setStorage({
      key: 'userInfo',
      data: obj,
    })
  }),
  setMemberInfo: action(function (memberInfo) {
    let obj = Object.assign({}, this.memberInfo, memberInfo)
    this.memberInfo = obj
    wx.setStorage({
      key: 'memberInfo',
      data: obj,
    })
  }),

  // user's
  fetchAddressList: action(function () {
    return http.get('/common/address_index').then(({ data }) => {
      this.addressList = data
      wx.setStorage({
        key: 'addressList',
        data: data,
      })
    })
  }),
  // config's
  setConfig: action(function (config) {
    this.config = config
    wx.setStorage({
      key: 'config',
      data: config,
    })
  }),
  //        
  setNavHeight: action(function (height) {
    this.navHeight = height
    wx.setStorage({
      key: 'navHeight',
      data: height,
    })
  }),
})