不得不說，目前這個項目做的真是夠久，在開發(fā)過程中遇到了一些坑，解決了分享出來給大家。 在各方面綜合考慮之下，鄙人拋棄了各大多端開發(fā)框架，使用了 原生 的小程序框架進行開發(fā)。

前人掘坑、后人遭殃，祝各位早日成為大牛??！

自定義動態(tài)Tabbar導航欄

在默認的小程序開發(fā)中，定義tabbar,需要在app.json中配置如下json：

"tabBar": {
    ...
    "list": [
      {
        "text": "首頁",
        "iconPath": "/public/images/index.png",
        "selectedIconPath": "/public/images/index-act.png",
        "pagePath": "pages/job/index"
      }
      ...
    ]
}
      
復(fù)制代碼

一經(jīng)配置，無法修改。你可以調(diào)用setTabBarItem 設(shè)置按鈕文字、圖片路徑；就是無法動態(tài)設(shè)置跳轉(zhuǎn)地址、tabbar個數(shù)。

解決方案

我們需要新建一個中間頁面，用來控制所有tabbar，把tabbar要關(guān)聯(lián)的頁面，都用組件的方式來寫，這樣，我們只要在這一個頁面里，寫個fix在底部的tabbar樣式，點擊不同tab，顯示不同組件。

json文件

{
  "usingComponents": {
    "home" : "/pages/job/index",        // 首頁
    "company" : "/pages/company/company",   // 公司
    "message" : "/pages/chat/index",    // 消息
    "mine" : "/pages/mine/index",   // 我的
    "tabbar" :  "/milfun/widget/custom-tab-bar", //自定義tabbar組件
  }
}
復(fù)制代碼

wxml文件

<!-- wxml中，把頁面設(shè)置成組件 -->
<home wx:if="{{activeTab == 'home'}}">首頁</home>
<company wx:if="{{activeTab == 'company'}}">公司</company>
<message wx:if="{{activeTab == 'message'}}">消息</message>
<mine wx:if="{{activeTab == 'mine'}}">我的</mine>

<!-- wxml中，自定義tabbar組件 -->
<tabbar list="{{tabList}}" bindmytab="tabChange"></tabbar>
復(fù)制代碼

js文件

Page({
  data: {
    activeTab:'home'    // company 、message、mine
  },
  onLoad: function (options) {
    let tmp = 1;    // 用來控制顯示不同方案的tabbar
    if( tmp === 1 ){    // 顯示第一套tabbar
      this.setData({
        tabList:[
          {
            "name": "...",
            "text": "...",
            "iconPath": "...",
            "selectedIconPath": "...",
            "pagePath": "..."
          },
          ...
        ]
      })
    }else{  // 顯示第二套tabbar
        this.setData({
            tabList:[{},...]
        })
      }
    }
})
復(fù)制代碼

上面展示的是中間頁面的寫法，那正常頁面如何改成組件頁面呢？

頁面改成組件寫法

其不同主要是在于js文件里面的寫法不同，所以我們只看js部分：

正常寫法

Page({
  data: {
  },
  onLoad: function (options) {
  },
  onShow: function (options) {
  },
  func1:function(e){
    console.log(e)
  },
  func2:function(e){
    console.log(e)
  },
})
復(fù)制代碼

組件寫法

Component({
  options: { // 為了使用全局css樣式
      addGlobalClass: true,
  },
  data: {},
  /*
  * 組件被創(chuàng)建時調(diào)用，等同于上方的 onLoad
  */
  attached: function (options) {    
  },
  /*
  * 組件內(nèi)部方法，等同于上方的自定義方法
  */
  methods: {
    func1:function(e){
        console.log(e)
    },
    func2:function(e){
        console.log(e)
    },
  }
})
復(fù)制代碼

這樣，我們就實現(xiàn)了動態(tài)tabbar功能，tablist數(shù)據(jù)我們隨時都可修改，怎么跳轉(zhuǎn)，我們自己說了算！

輸入框彈起頁面上滑

遇見上面這個問題，我們的解決方案是：手動設(shè)置輸入框位置。

js文件

// 輸入框獲取焦點
foucus:function (e) {
   this.setData({typerHeight: e.detail.height})
},
// 輸入框失去焦點
blur:function () {
   this.setData({typerHeight: 0})
},
復(fù)制代碼

wxml文件

<view class="tc-board"  style="bottom:{{typerHeight}}px" >
    ......
</view>
復(fù)制代碼

這樣，當輸入框獲取焦點時，會獲取到鍵盤的高度，然后把輸入框這個view的bottom樣式，設(shè)置成你獲取的高度，就完美的貼在輸入框上方。當輸入框失去焦點時，高度設(shè)置成0，輸入框view又回到了頁面的底部。

異步請求回調(diào) + Token驗證

為了避免在業(yè)務(wù)中書寫繁雜的if else語句嵌套，或者回調(diào)函數(shù)

// 方法一
onLoad:function (e) {
   // if嵌套
   if(){
        if(){
            if(){ // do something }
        }
   }

   // 回調(diào)陷阱
   func1(data,func(){
        func2(data,func(){
            func3(data,func(){
                // do something
            })
        })
   })
},
復(fù)制代碼

我的做法是，為方法添加promise，舉個栗子