小程序开发过程中遇到过的那些坑
分享一下记忆中遇到的小程序开发过程中的问题
开发中会遇到的问题千奇百怪，这里也只是我有记录的部分问题，或者对你来说根本算不上是问题，但是这里我还是想记录一下，欢迎赐教哦
1、页面滑动后，切换底部tab时，影响其他页面位置
分析：这是因为小程序不同的tab页面其实是公用的一个页面，只是不同的组件之间的切换，所以页面滑动后切换组件时也会受影响。 解决思路：通过页面滚动事件，在切换时将滚动高度置为0 示例：
onPageScroll:function(e){ // 获取滚动条当前位置
console.log(e)
},
goTop: function (e) { // 一键回到顶部
if (wx.pageScrollTo) {//抖音小程序使用uni.pageScrollTo
wx.pageScrollTo({
scrollTop: 0
})
} else {
wx.showModal({
title: '提示',
content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
})
}
}
2、抖音小程序跳转直播间功能
以下示例参考字节开发文档
tt.openWebcastRoom(options)
//提供从小程序跳转到直播间的能力。仅支持抖音 APP。
参数说明
options 为 Object 类型，属性如下：
属性名 类型 默认值 必填 说明 最低支持版本
streamerId string -- 否 主播 id 1.87.0
success function -- 否 接口调用成功的回调函数 1.87.0
fail function -- 否 接口调用失败的回调函数 1.87.0
complete function -- 否 接口调用结束的回调函数（调用成功、失败都会执行） 1.87.0
回调成功
参数为 Object 类型，属性如下：
参数 参数类型 说明 最低支持版本
errMsg string 回调信息 1.87.0
回调失败
参数为 Object 类型，属性如下：
参数 参数类型 说明 最低支持版本
errNo number 错误码 1.87.0
errMsg string 错误信息 1.87.0
代码示例：
value="{{streamerId}}" bindinput="changeStreamerId" placeholder="请输入主播id"> Page({ data: { streamerId: "", }, changeStreamerId(e) { this.setData({ streamerId: e.detail.value, }); }, openWebcastRoom(e) { tt.openWebcastRoom({ streamerId: this.data.streamerId, success(res) { console.log("调用成功", res); }, fail(res) { console.log("调用失败", res); }, }); }, }); 3、抖音小程序跳转个人主页 以下示例参考字节开发文档 tt.openAwemeUserProfile(options); 调用跳转个人抖音号主页，用户可以选择关注/取消关注抖音号。 options 为 object 类型，属性如下： 属性名 类型 默认值 必填 说明 最低支持版本 success function 否 接口调用成功后的回调函数 1.84.0 fail function 否 接口调用失败后的回调函数 1.84.0 complete function 否 接口调用结束后的回调函数（调用成功、失败都会执行） 1.84 使用示例： tt.openAwemeUserProfile({ success: (res) => { console.log(res); }, }); Tip： 使用该功能前开发者需要绑定想要跳转的抖音号。 4、如何让 HTML识别 string 里的 ‘\n’ 并成功换行显示 在需要换行展示的盒子的 css 设置： white-space: pre-line; 然后页面就能成功识别 ‘\n’ ，并换行显示 5、小程序分页功能 实现思路：小程序的分页功能主要是指下拉加载功能，下拉时改变请求数据的分页数据，把数据进行追加到数据列表里面 主要利用的事件是： onReachBottom() 监听用户上拉触底事件。 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。 配合使用的组件： :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" /> 6、小程序富文本解析给文字设置样式 如果要修改富文本文字的样式，直接在标签里面添加类名或者style不生效，可以采取用正则进行替换的方法 这里以常用的小程序解析富文本的组件为例 const text = `各位读者你们好： 如果你喜欢我的文章可以留下你来过的痕迹哦，如果你不喜欢那说明我还不够完美，欢迎指教哦。 //比如我要实现P标签里面的文字首行缩进以及文字颜色等效果 data(){ textStyle: text.replace(/\
} 写给看到最后的你 亲爱的朋友，感谢你看到了最后，能够相遇便是缘分，你路过我的文章亦是令我欢喜的缘，新的一年里祝愿朋友们：虎虎生威！虎气十足！如虎添‘亿’！❤️❤️❤️