分享一下记忆中遇到的小程序开发过程中的问题
开发中会遇到的问题千奇百怪,这里也只是我有记录的部分问题,或者对你来说根本算不上是问题,但是这里我还是想记录一下,欢迎赐教哦
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
代码示例:
<input
value="{{streamerId}}"
bindinput="changeStreamerId"
placeholder="请输入主播id">
</input>
<button type="default" size="default" bindtap="openWebcastRoom">跳转直播</button>
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()
监听用户上拉触底事件。
配合使用的组件:
<u-loadmore :status="status" />
u-view下拉加载组件
通过status设置组件的状态,加载前值为loadmore,加载中为loading,没有数据为nomore
使用示例:
<template>
<view>
<u-loadmore
:status="status"
:loading-text="loadingText"
:loadmore-text="loadmoreText"
:nomore-text="nomoreText" />
<view v-for=(item,index in dataList) :key=index>{{item}}</view>
</view>
</template>
<script>
export default {
data(){
return{
dataList:[],
pageNum:1,//第1页
pageSize:10,//10页每条
pages:0
status: 'loadmore',
loadingText: '努力加载中'
loadmoreText: '轻轻上拉',
nomoreText: '实在没有了'
}
},
methods:{
onReachBottom(){
//判断是否是最后一页
if (this.pages === this.pageNum) return
this.pageNum = ++this.pageNum
this.getList()//请求页面需要分页展示的数据方法
},
getList(){
//请求列表数据
this.status = 'loading'
const res = 具体请求回来的数据列表
this.dataList=this.dataList.concat(res.xxx)
//总数赋值
this.pages=res.total //total数据总数
if (this.pages > this.pageNum) {
this.status = 'loadmore'
} else {
this.status = 'nomore'
}
}
}
}
</script>
6、小程序富文本解析给文字设置样式
如果要修改富文本文字的样式,直接在标签里面添加类名或者style不生效,可以采取用正则进行替换的方法
这里以常用的小程序解析富文本的组件为例
<view>
<u-modal :show="show" :title="title" >
<view class="slot-content">
<rich-text :nodes="pluginTips"></rich-text>
</view>
</u-modal>
<u-button @click="show = true">打开文本弹窗</u-button>
</view>
const text = `各位读者你们好:<br> <p>如果你喜欢我的文章可以留下你来过的痕迹哦,如果你不喜欢那说明我还不够完美,欢迎指教哦。</p>`
//比如我要实现P标签里面的文字首行缩进以及文字颜色等效果
data(){
textStyle: text.replace(/\<p/gi,'<p style="text-indent:2em;color:#bfc"'),
}
写给看到最后的你
亲爱的朋友,感谢你看到了最后,能够相遇便是缘分,你路过我的文章亦是令我欢喜的缘,新的一年里祝愿朋友们:虎虎生威!虎气十足!如虎添‘亿’!❤️❤️❤️