小程序脱坑指南（持续更新）开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第八天，点击查看活动详情

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第九天，点击查看活动详情

正文：

这篇文章主要来记录开发微信小程序过程中会遇到的问题或者实现方法，微信社区不给力只能自给自足。

一、布局类

1、底部固定上面滚动布局

底部滚动

.content{
    height:100%;
    margin-botton: //底部的高度
}
.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
}

2、上下固定，中间滚动

这种布局可以使用flex-direction: column实现。

.father{
    display:flex;
    flex-direction: column;
    width: 100%;
    height:100%;
    overflow: hidden;
}
.header{
    height:200rpx;
    background:red
}
.footer{
    height:100rpx;
    background:yellow
}
.main{
    // 使用公式计算，去掉上下高度
    flex:1;
    background:blue;
    overflow: auto;
}

二、逻辑类

1、navigationBarTitleText配置不生效

page页面如果没有在app.json引入，则不能设置navigationBarTitleText

2、原生的textarea的value不能置空

有可能是value没有进行双向绑定，只是单单通过事件赋值

3、自定义组件在attached生命周期拿到的参数为空

如果我们在page页面的onLoad生命周期，接受需要传递给组件的参数时，那么我们不能在自定义组件的attached生命周期里打印（因为是undefined），可以选择在ready或者show生命周期里进行获取。因为它们比attached更晚回调

4、在自定义组件进行路由跳转报`xxx is not define`

这种情况是因为在自定义组件时相对地址是不准确的，我们需要用绝对地址

5、监听非自定义tarbar的返回事件

可以通过onUnload声明周期函数来监听，当触发时，可以通过getCurrentPages函数来获取当前的执行栈，就可以获取需要的栈达到你的要求。

我的需求是每次返回都得调用一次上个栈的接口，那么我只需要过滤所有的pages得到我想要的page，并且通过page.getData() 类似这样的调用

onUnload(){
    const pages = getCurrentPages();
    const page = pages.find(item=>item.route='上个栈/直接给栈路径/或者改为item.route.includes');
    page ?? page.getData();
}

这样，我就可以在返回时调用上个页面的接口，每次都获取最新数据

6、模板跳转或者路由重定向时隐藏左上角的HOME键

当我们进行模板跳转或者重定向时，会发现左上角会有一个HOME键，我们可以使用以下代码把它隐藏掉

onShow: function () {
    wx.hideHomeButton({
        success: (res) => {
            console.log(res)
        },
    })
},

三、测试类

1、开发工具测试模板跳转

在开发小程序中，我们不难免会遇上模板跳转的需求，即通过微信通知的消息直接进入小程序的某个页面。我们可以通过添加编译模式来实现。

小程序脱坑指南（持续更新）

正文：