1.Tabbar閃爍問題解決思路
用微信官方文檔的Tabbar，真機調(diào)試，第一次tab切換時會tabbar閃爍。tabbar切換時使用wx.switchTab({url})進行頁面切換，第一次切換時微信要打開新的頁面，把新頁面壓人頁面棧中，每個新頁面要重新渲染tabbar，所以第一次切換時會閃爍。
解決方案：
把整個頁面布局封裝成組件layout，tabbar 和 navbar 都封裝成組件，要切換的頁面內(nèi)容也封裝成組件，在layout通過slot控制要顯示的組件，tabbar切換只是控制組件的顯示，tabbar不需要重新渲染，切換無閃爍。

//layout 組件分為navbar，slot顯示activePage， tabbar三部分，通過控制activePage的值控制頁面的組件的顯示
<view class='layout'>
  <view class='navbar'>
  //customBar有些頁面布局需要自定義navbar，由頁面定義頭部顯示。
      <navbar wx:if="{{customBar}}" options="{{navBarOptions}}"
      icon='icon-back' ></navbar> 
  </view>
//計算頁面內(nèi)容顯示區(qū)域
  <view class='content' style='height:calc(100vh - {{customBarHeight+tabBarHeight}}px );' >
     <slot name="{{activePage}}"></slot>
  </view>
  <view class='footer'>
    <tabBar wx:if="{{customTabbar}}" options="{{tabBarOptions}}"  bindchange="handleTabChange"></tabBar> 
  </view>
</view>

//js控制activePage顯示不同組件
 handleTabChange(e,o){
      const context = e.detail;
      let customBar ;
      if(context.page==="mine"){
          customBar = false
      }else{
          customBar =true
      };
      this.setData({
        customBar:customBar,
        activePage:context.page,
        navBarOptions:context.navBarOptions
      })
    }

//slot值控制顯示哪個slot
<layout id="page1" customNavBar="{{true}}"  customTabbar="{{true}}" navBarOptions="{{navBarOptions}}" tabBarOptions="{{tabBarOptions}}" >
        <home slot="home"></home>
        <shopCar slot="shopCar"></shopCar> 
        <mine slot="mine"></mine>
</layout>

2.小程序生命周期，Pape生命周期，組件component生命周期
小程序應(yīng)用生命周期:APP()只能在app.js中調(diào)用，只能調(diào)用一次
1.onLaunch
小程序初始化完成時觸發(fā)，全局只觸發(fā)一次。
2.onShow
小程序啟動，或從后臺進入前臺顯示時觸發(fā)。
3.onHide
小程序從前臺進入后臺時觸發(fā)。
4.onError
小程序發(fā)生腳本錯誤或 API 調(diào)用報錯時觸發(fā)。
5.onPageNotFound
小程序發(fā)生腳本錯誤或 API 調(diào)用報錯時觸發(fā)。
冷啟動:第一次打開小程序或者小程序銷毀后再次打開，此時小程序需要重新加載啟動，即冷啟動。會執(zhí)行onLaunch 、onShow
冷啟動：如果用戶已經(jīng)打開過小程序，在一定時間內(nèi)再次打開，小程序并未銷毀，只是從后臺狀態(tài)變?yōu)榍芭_狀態(tài)，稱為熱啟動，執(zhí)行onShow，不執(zhí)行onLaunch。
后臺： 點擊左上角關(guān)閉，或者按了設(shè)備 Home 鍵離開微信，并沒有直接銷毀，而是進入后臺狀態(tài)，小程序還可以再運行一段時間會，執(zhí)行onHide。
前臺：展示給用戶就是前臺狀態(tài)，再次打開微信或再次打開小程序，會從后臺狀態(tài)進入前臺狀態(tài)。
官方文檔:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html
https://developers.weixin.qq.com/miniprogram/dev/framework/runtime/operating-mechanism.html#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%90%AF%E5%8A%A8
Pape生命周期
小程序展示某個頁面的生命周期：
1.onLoad
頁面加載時觸發(fā)。一個頁面只會調(diào)用一次
2.onShow
頁面顯示/切入前臺時觸發(fā)。
3.onReady
頁面初次渲染完成時觸發(fā)。一個頁面只會調(diào)用一次，代表頁面已經(jīng)準備妥當(dāng)，可以和視圖層進行交互
4.onHide
頁面隱藏/切入后臺時觸發(fā)。
5.onUnload
頁面卸載時觸發(fā)。如wx.redirectTo或wx.navigateBack到其他頁面時
官方文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
組件component生命周期
1.created
組件實例剛剛被創(chuàng)建好時， created 生命周期被觸發(fā)
2.attached
在組件完全初始化完畢、進入頁面節(jié)點樹后， attached 生命周期被觸發(fā)
detached
3.在組件離開頁面節(jié)點樹后， detached 生命周期被觸發(fā)
在組件中也可以在pageLifetimes定義頁面生命周期的回調(diào)

Component({
  lifetimes: {
    created: function() {
      // 組件實例剛剛被創(chuàng)建好
    },
    attached: function() {
      // 在組件實例進入頁面節(jié)點樹時執(zhí)行
    },
    detached: function() {
      // 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
    },
  },
//組件所在頁面的生命周期
  pageLifetimes: {
    show: function() {
      // 頁面被展示
    },
    hide: function() {
      // 頁面被隱藏
    },
    resize: function(size) {
      // 頁面尺寸變化
    }
  }
})

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html
4.組件封裝思路
1.小程序開發(fā)時，經(jīng)常需要封裝組件，根據(jù)需求，找出可以復(fù)用的部分封裝成組件。
2.根據(jù)需求分析，找出需要傳入組件的數(shù)據(jù)(組件需要顯示的數(shù)據(jù)或要控制顯示的狀態(tài)數(shù)據(jù))，在properties中定義需要接受的數(shù)據(jù)
3.考慮組件與頁面的交互，定義需要觸發(fā)頁面的方法，用triggerEvent調(diào)用頁面或父組件方法并傳參，例如：

<good options="{{item}}"  bind:addCart="addCart" style="width:100%;"></good>

//組件WXML代碼
<button bindtap="onAddingToCartTap" ></button>
//組件js代碼
properties: {
    options:{
      type:Object
    }
 },
onAddingToCartTap: function (events) {
  //觸發(fā)父組件方法
   this.triggerEvent('addCart', events)
}
       

5.封裝微信小程序的數(shù)據(jù)請求
小程序使用wx.request發(fā)起 HTTPS 網(wǎng)絡(luò)請求，使用promise封裝，在appjs中定義request方法，返回promise對象，這樣頁面可以通過const app = getApp(); app.request使用

//請求方法
  //params 請求參數(shù) 以對象方式傳遞 必填
  //noShowLoding 為true則代表不要loading（針對某些需要頻繁的請求），若需要loading 則不填。
  request(params, noShowLoding) {
    let url = ""; //接口請求地址
    if (!noShowLoding) {
      wx.showLoading({
        title: '加載中',
      })
    }
    return new Promise(function (resolve, reject) {
      wx.request({
        url: url + "?token=" + wx.getStorageSync('token'),
        data: params,
        method: 'POST', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        header: {
          'content-type': 'application/json'
        }, // 設(shè)置請求的 header
        success: function (res) {
          wx.hideLoading()
          if (res.statusCode == 200) {
            let data = res.data;
            if (data.response) {
              resolve(res.data);
            } else {
              console.log(data)
              if (data) {
                wx.showToast({
                  title: data.error.errorInfo,
                  icon: 'none',
                  duration: 2000
                })
              }
            }
          }
        },
        fail: function () {
          wx.hideLoading();
          wx.showToast({
            title: '網(wǎng)絡(luò)連接失敗',
            icon: 'none',
            duration: 2000
          })
        },
        complete: function () {
   
        }
      })
    })