微信小程序踩坑篇
「适合人群：初次开发小程序」
「观看时间：10min」
「文章内容：耗时排坑」
- 数据绑定
「问题描述：数据绑定时，需要对数据进行复杂处理或逻辑判断，直接在绑定数据时判断逻辑导致报错」
「问题原因：小程序数据绑定时不支持复杂的逻辑判断」
「解决方法：在绑定数据前处理好对应的数据」
「示例代码：节点是否选中」
/* 错误示例 */
<view wx:for="list" wx:key="index">
// 进行了复杂的操作将会导致报错
{{checkeds.indexOf(item.id) > -1 ? '选中' : '未选中'}}
</view>
<script>
data: {
list: [
{
id: '001'
}
],
checkeds: ['001']
}
</script>
/* 解决方法 */
<view wx:for="list" wx:key="index">
// 将判断逻辑交给数据处理
{{item.checked ? '选中' : '未选中'}}
</view>
<script>
data: {
list: [
{
id: '001'
}
],
checkeds: ['001']
},
methods: {
// 重新处理数据
reSetList() {
this.list.map(item => item.checked = this.checkeds.indexOf(item.id) > -1)
}
}
</script>
- 页面高度
「问题描述：页面高度设置为屏幕高度，底部固定放置一按钮，内容超出页面高度后，出现按钮遮挡内容」
「问题原因：固定按钮脱离文档流，不在页面高度内」
「解决方法：将页面设置内边距（按钮的高度），并给页面设置最小高度」
「示例代码：按钮遮挡页面内容解决方法」
.page {
min-height: 100vw;
// 按钮和间距高度和
padding-bottom: 80px;
background: #ffffff;
}
.buttom {
width: 80%;
position: fixed;
bottom: 20px
height: 40px;
}
<view class="page">
<button class="button">提交</button>
</view>
- 覆盖第三方组件样式
「问题描述：使用小程序扩展组件时样式和产品设计不一致，通过覆盖的方式修改不生效」
「问题原因：小程序内部控制」
「解决方法：根据相关组件Api来添加自定义类实现」
「示例代码：按钮遮挡页面内容解决方法」
.custom-class {
.weui-cell__hd {
max-width: 80%;
}
}
// 内部提供的自定义类属性 ext-class
<mp-cell ext-class="custom-class">
</mp-cell>
- 上拉加载
「问题描述：上拉加载通过合并结果的方法得到结果，通过返回此页，条件查询，上拉均会合并查询结果」
「问题原因：初次体验上拉考虑不足」
「解决方法：上拉时对比当前结果长度与总长度；查询、返回此页等初始操作，均置空数据，页码归1」
「示例代码：获取某日志列表」
page({
data: {
logList: [],
page: 1,
total: 0
},
// 重新接入界面
onShow: {
this.resetGetLogs()
},
methods: {
// 置空数据，页码归1
resetGetLogs() {
this.page = 1
this.logList = []
this.getLogList()
},
getLogList() {
getLogListApi({
page: this.page,
filter: this.filter
}).then((res) => {
// 上拉合并结果
this.logList = this.logList.concat(res.data)
})
},
// 上拉加载
onReachBottom() {
// 比当前结果长度与总长度
if (this.logList.length < this.total) {
this.page = this.page + 1
this.getLogList()
}
}
}
})
- Api - showToast 显示消息提示框
「问题1：icon仅支持 success 和 loading」
「问题2：显示消息提示框后返回上个页面提示立即消失」
「解决方法：icon支持本地image路径； 先进行路由返回，后显示提示框」
- 嵌套循环
「问题描述：当出现嵌套循环时item/index会产生混淆」
「问题原因：文档掌握不足」
「解决方法：自定义item/index别名」
「示例代码：循环展示某2层菜单」
<view wx:for="{{menuList}}" wx:key="index">
<text>{{item.title}}</text>
// 自定义item/index名
<view wx:for="{{item.children}}" wx:for-item="childItem" wx:for-index="childIndex">
<text>{{childItem.title}}</text>
</view>
<view>
data: {
menuList: [
title: '一级菜单',
key: '001',
children: [
{
title: '二级菜单',
key: '001001'
}
]
]
}
如果文章对你有帮助，点赞支持哦，文章同步公众号~
本文使用 mdnice 排版
