看前人大牛总结：小程序开发不得不踩的坑！

【春哥博客技术分享】以下来自一位网上大牛分享，在开发过程中相信大家或多或少都遇到了一些坑，今天给大家分享下：一些解决方案， 在各方面综合考虑之下，鄙人抛弃了各大多端开发框架，使用了 原生 的小程序框架进行开发。前人掘坑、后人遭殃，祝各位早日成为大牛！

自定义动态Tabbar导航栏

在默认的小程序开发中，定义tabbar,需要在app.json中配置如下json：

"tabBar": {
    ...
    "list": [
      {
        "text": "首页",
        "iconPath": "/public/images/index.png",
        "selectedIconPath": "/public/images/index-act.png",
        "pagePath": "pages/job/index"
      }
      ...
    ]
}
      
复制代码

一经配置，无法修改。你可以调用setTabBarItem 设置按钮文字、图片路径；就是无法动态设置跳转地址、tabbar个数。

解决方案

我们需要新建一个中间页面，用来控制所有tabbar，把tabbar要关联的页面，都用组件的方式来写，这样，我们只要在这一个页面里，写个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组件
  }
}
复制代码

wxml文件

<!-- wxml中，把页面设置成组件 -->
<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>
复制代码

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:[{},...]
        })
      }
    }
})
复制代码

上面展示的是中间页面的写法，那正常页面如何改成组件页面呢？

页面改成组件写法

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

正常写法

Page({
  data: {
  },
  onLoad: function (options) {
  },
  onShow: function (options) {
  },
  func1:function(e){
    console.log(e)
  },
  func2:function(e){
    console.log(e)
  },
})
复制代码

组件写法

Component({
  options: { // 为了使用全局css样式
      addGlobalClass: true,
  },
  data: {},
  /*
  * 组件被创建时调用，等同于上方的 onLoad
  */
  attached: function (options) {    
  },
  /*
  * 组件内部方法，等同于上方的自定义方法
  */
  methods: {
    func1:function(e){
        console.log(e)
    },
    func2:function(e){
        console.log(e)
    },
  }
})
复制代码

输入框弹起页面上滑

遇见上面这个问题，我们的解决方案是：手动设置输入框位置。

js文件

// 输入框获取焦点
foucus:function (e) {
   this.setData({typerHeight: e.detail.height})
},
// 输入框失去焦点
blur:function () {
   this.setData({typerHeight: 0})
},
复制代码

wxml文件

<view class="tc-board"  style="bottom:{{typerHeight}}px" >
    ......
</view>
复制代码

这样，当输入框获取焦点时，会获取到键盘的高度，然后把输入框这个view的bottom样式，设置成你获取的高度，就完美的贴在输入框上方。当输入框失去焦点时，高度设置成0，输入框view又回到了页面的底部。

异步请求回调 + Token验证

为了避免在业务中书写繁杂的if else语句嵌套，或者回调函数

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

   // 回调陷阱
   func1(data,func(){
        func2(data,func(){
            func3(data,func(){
                // do something
            })
        })
   })
},
复制代码