1、小程序中跳转嵌套过多的话，我们可以采用回退跳转的方式
wx.navigateBack({
delta: 4 // 回退4个界面
})
这里面有个点需要注意：回退到对应的界面是不会触发页面钩子函数onLoad的，所以当回退到的界面若需要处理获取数据相关的需求，我们需要在钩子函数onShow里面进行处理。
onShow() {
this.getHouseList()
},
2、小程序进行删除数据，可以通过下标配合splice进行操作，但还需要setData进行配合，vue里面因为对数组的方法做了重写，所以不需要重新赋值
3、当我们从后端请求成功数据后，我们可以在setData里面进行扩展运算符的一个展开，这样在我们进行数据渲染的时候就可以直接写上对应的属性名了。
async getHouseMsg(id) {
const { code, data } = await wx.http.get(`/room/${id}`)
if (code !== 10000) return wx.utils.toast()
this.setData({
...data
})
}
// 界面数据渲染
<van-cell-group title="业主信息" border="{{false}}">
<van-cell title-width="200rpx" title="房间号" value="{{building}}" />
<van-cell title-width="200rpx" title="业主" value="{{name}}" />
<van-cell title-width="200rpx" border="{{false}}" title="手机号" value="{{mobile}}" />
</van-cell-group>
4、dayjs在项目中格式化时间的使用
Day.js是一个极简的JavaScript库，可以为现代浏览器解析、验证、操作和显示日期和时间。
// 日期格式化
dayjs().format(); // 2020-09-08T13:42:32+08:00
dayjs().format('YYYY-MM-DD'); // 2020-09-08
dayjs().format('YYYY-MM-DD HH:mm:ss'); // 2020-09-08 13:47:12
dayjs(1318781876406).format('YYYY-MM-DD HH:mm:ss'); // 2011-10-17 00:17:56
dayjs(时间戳).format('YYYY-MM-DD) // 当dayjs()里面没有值的时候，里面默认为当前时间
注意：当我们将dayjs通过npm进行安装后需要点击工具中的构建使其生效，在相应的界面使用的时候，需要导入：import dayjs from 'dayjs'
5、在使用vant里面的时间选择器的时候，先将value设置一个值，这个值对应的是当前的年月日，提升用户体验
// vant组件代码
<van-popup bind:close="closeDateLayer" round show="{{ dateLayerVisible }}" position="bottom">
<van-datetime-picker bind:confirm="selectDate" type="date" value="{{ currentDate }}" min-date="{{ 1664582400000 }}" />
</van-popup>
// js代码
data: {
currentDate: new Date().getTime() // 这个值是关键
}
这样就达到了时间显示为当前时间的效果。
6、修改房屋信息和增加房屋信息共用同一个组件该如何区分处理
在区分修改房屋和增加房屋上面，我们可以通过id，修改房屋信息的时候，我们会涉及到当前房屋信息的回显问题，这说明需要获取对应的ID,所以id就成为区分这两个需求的关键。而在对应组件也通过判断是否获取到来处理对应的业务逻辑。
// 在增加、编辑房屋信息共用的组件进行id判断
onLoad({ point, building, room, id }) {
if (id) {
// 编辑
// 更改编辑界面的标题
wx.setNavigationBarTitle({
title: '编辑房屋信息',
})
this.getHouseMsg(id)
} else {
// 添加
this.setData({ point, room, building })
}
}
// 点击修改房屋编辑按钮传递当前房屋的id
editHouse() {
wx.navigateTo({
url: '/house_pkg/pages/form/index?id=' + this.data.id,
})
}
7、在遇见多个状态需求的时候，比如status对应不同的值显示不同的状态文字的时候，可以通过wx:if来进行区分
<van-cell size="large" title="{{item.point}}">
<text wx:if="{{item.status === 1}}" class="tag info">审核中</text>
<text wx:if="{{item.status === 2}}" class="tag success">审核通过</text>
<text wx:if="{{item.status === 3}}" class="tag fail">审核失败</text>
</van-cell>
以上代码就能实现status每一种状态就能显示对应不同的文字显示。
8、在房屋列表里面，有个非空的判断，就是当房屋列表为空的时候需要给出一个空状态。在这里我们可以通过房屋列表的数据的长度配合wx:if来进行判断，若房屋列表有长度，则展示列表的内容，没有则展示非空内容。
// 通过判断houseList的长度决定显示哪部分内容，但是这样有个不足：当用户进入界面的时候因为要先获取houseList的长度，它是需要时间的，而这个时间会导致wx:else部分代码成立，所以出现的情况是：先显示列表为空状态，然后才显示房屋列表。这样体验不好
<block wx:if="{{houseList.length > 0}}">
<scroll-view show-scrollbar="{{false}}" enhanced scroll-y>
<view class="houses">
<view class="houses-title">房屋信息</view>
</view>
</scroll-view>
</block>
<view wx:else class="blank">
您还没有认证房屋，请点击
<navigator hover-class="none" class="link" url="/house_pkg/pages/locate/index">添加</navigator>
</view>
// 为了优化上述状态,我们采取定义一个空变量empty进行控制，默认为true,而他的值通过房屋信息列表的长度进行控制的。实践证明，他能有效优化上述问题。
this.setData({
houseList: this.data.houseList,
empty: this.data.houseList.length === 0
})
9、小程序的组件中使用全局css样式
添加如下属性即可
Component({
/**
* 组件的属性列表
*/
options: {
addGlobalClass: true
}
})
