小程序公共头部和尾部

首先建立自定义组件Component：header和footer，当然用公共模板template也可以。

然后从服务器获取公共数据，如config

在app.js的onLaunch中获取并存入缓存

wx.getStorage({
      key: 'globalInit',
      fail: function () {
        wx.request({
          url: 'https://www.xxx.com/api/initapp',
          success: function (res) {
            console.log(res)
            wx.setStorage({
              key: 'globalInit',
              data: res.data,
            })
          }
        })
      }
    })

然后在header.js或footer.js中取出数据，鉴于小程序request为异步获取数据，为了防止数据没有加载完就展示页面，也需要做request处理

const app = getApp()
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    navShow: true
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeNavShow: function () {
      var that = this
      if (that.data.navShow) {
        that.setData({
          navShow: false
        })
      } else {
        that.setData({
          navShow: true
        })
      }
    }
  },
  attached: function () {
    var that = this
    wx.getStorage({
      key: 'globalInit',
      success: function (res) {
        that.setData({
          config: res.data.config,
          childrenMenus: res.data.children_menu
        })
      },
      fail: function() {
        wx.request({
          url: 'https://www.xxx.com/api/initapp',
          success: function (res) {
            that.setData({
              config: res.data.config,
              childrenMenus: res.data.children_menu
            })
            wx.setStorage({
              key: 'globalInit',
              data: res.data,
            })
          }
        })
      }
    })
  }
})

在需要公共组件的页面的json中加入组件

"usingComponents": {
    "header-view": "../../../Components/header",
    "footer-view": "../../../Components/footer"
  }

在wxml中使用

<header-view></header-view>