微信小程序闲聊01-技术教程-四时宝库

微信小程序呢，最开始是在学uniapp的时候，写写demo玩玩。以为小程序可以逐渐发展壮大，可看现在的发展还是挺局限的。工作了呢，发现我所经历的小公司都是用原生开发的，不用框架，主要是大家学的不一样吧。

学习的时候只喜欢写写demo，会用就行。想想当初面试的时候，还因为拿不出东西被狠压了薪资，太年轻了mmp。

小程序的文档可以说是我看过最详细的文档了，他就是把我们当菜鸟的，不过对于我们还是有益的。其实把小程序的设计理念和vue等mvvm框架没多大区别，印象最深的就是这个吧。其他的语法都差不多，就是用起来没有vue这么舒服。

就是简单记录下我这个小菜鸟的实操入门吧。自定义tabbar，自定义导航栏，虚拟键盘遮挡。当然我也是先百度的哈哈哈。工作嘛，而且也渐渐体会到技术可能更倾向于是个工具吧，不过计算机还能继续引领时代的前进。兴趣还在，我还能学！

进入正题了，尴尬尴尬。

自定义tabbar:这个比较常见，简单地贴一下代码吧。

现在app.json中声明”custom:true”，”list”属性要保留。

// app.json

  "tabBar": {
    "custom": true,
    "color": "#C3C3C3",
    "selectedColor": "#5F80EC",
    "list": [
      {
        "pagePath": "pages/my/my",
        "iconPath": "assets/images/nav/my.png",
        "selectedIconPath": "assets/images/nav/my_on.png",
        "text": "个人中心"
      },
      {
        "pagePath": "pages/add/add",
        "iconPath": "assets/images/nav/add.png",
        "selectedIconPath": "assets/images/nav/add_on.png",
        "text": "新增检测"
      },
      {
        "pagePath": "pages/index/index",
        "iconPath": "assets/images/nav/home.png",
        "selectedIconPath": "assets/images/nav/home_on.png",
        "text": "首页"
      }
    ]
  }

接着创建自定义的底部导航栏组件

// /custom-tabbar/index.js

Component({
    data: {
        selected: 0,
        color: "#C3C3C3",
        selectedColor: "#5F80EC",
        list: [
            {
                "pagePath": "/pages/index/index",
                "iconPath": "../assets/images/nav/home.png",
                "selectedIconPath": "../assets/images/nav/home_on.png",
                "text": "首页"
            },
            {
                "pagePath": "/pages/add/add",
                "iconPath": "../assets/images/nav/add.png",
                "selectedIconPath": "../assets/images/nav/add_on.png",
                "text": "新增检测"
            },
            {
                "pagePath": "/pages/my/my",
                "iconPath": "../assets/images/nav/my.png",
                "selectedIconPath": "../assets/images/nav/my_on.png",
                "text": "个人中心"
            }
        ]
    },
    attached() {
    },
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.path
            wx.switchTab({url})
        }
    }
})

// /custom-tabbar/index.wxml

// /custom-tabbar/index.wxss

.tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 53px;
    padding-top: 5px;
    background: white;
    display: flex;
}

.tab-bar-border {
    background-color: rgba(0, 0, 0, 0.33);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
}

.tab-bar-item {
    flex: 1;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.tab-bar-item cover-image {
    width: 27px;
    height: 27px;
}

.tab-bar-item cover-view {
    font-size: 10px;
}

最后底部导航栏的页面需采用组件创建，在此设置图标的切换。

// /pages/my/my.js

Component({
  pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 2
        })
      }
    }
  }
})

自定义导航栏：这个的话，受限于文章的篇幅，同时我也是直接借鉴网上大哥给的方案。所以这边给下链接吧。他讲得特别详细，代码也可以直接复用和完善。

虚拟键盘遮挡：这个着重记录一下。我们自定义了导航栏，同时单个页面的表单元素太多的时候会遇到这样的问题，但是我浏览了主流的小程序设计，通常不会出现大表单的填写。不过在某些特殊业务的要求下，不可避免地会出现这种问题。大概搜了一下，网上好像并没有给出完整的解决方案。不过有一篇文章通过动态设置padding，给了我一点启发。最后结合自己的页面，成功解决了问题。

首先我将整个表单开启定位，然后结合虚拟键盘的高度和页面滚动的距离动态设置top属性。同时将表单元素的”adjust-position”属性设置为false，禁止自动向上推页面。
设置表单元素获取焦点的事件，并全局监听虚拟键盘高度变化事件。
监听页面的滚动，记录最后的滚动高度，当虚拟键盘收起时，页面滚动到原来的高度。

// 页面wxml

// 页面js
setHeight(e) {
		// 设置top属性的值，取虚拟键盘和页面已滚动距离高度的最大值 * - 1
        const height = Math.max(e.detail.height, this.data.lastScroll)
        this.setData({
            padBottom:height * -1
        })
    },
    // 设置自定义导航栏的高度
    onLoad: function (options) {
        this.setData({
            navHeight: App.globalData.navHeight,
            padBottom:App.globalData.navHeight,
        })
    },
    onShow() {
    // 监听虚拟键盘的高度变化，当收起时，top属性改为默认值，并将页面滚动回原来的位置
        wx.onKeyboardHeightChange(res => {
            if(res.height === 0){
                const scrollTop = this.data.lastScroll
                this.setData({
                    padBottom:this.data.navHeight
                },()=>{
                        wx.pageScrollTo({
                            scrollTop:scrollTop,
                            fail(err) {
                                console.log(err)
                            }
                        })
                })
            }
        })
    },
    // 监听页面的滚动，当滚动高度不为0时，记录最后一次的滚动高度。当然这里可以进行一些性能优化。同时判断不为0，是因为动态设置top值时，可能导致页面的滚动为0，从而导致记录错误。
    onPageScroll(obj) {
        if(obj.scrollTop !== 0){
            this.setData({
                lastScroll:obj.scrollTop
            })
        }
    }

原文地址：https://zzfd.github.io/2021/01/26/微信小程序闲聊01

参考资料：如有侵权，请告知，将第一时间删除部分内容。

四时宝库

程序员的知识宝库

微信小程序闲聊01