小程序开发过程中遇到过的那些坑

分享一下记忆中遇到的小程序开发过程中的问题

开发中会遇到的问题千奇百怪，这里也只是我有记录的部分问题，或者对你来说根本算不上是问题，但是这里我还是想记录一下，欢迎赐教哦

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()
监听用户上拉触底事件。

• 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。
• 在触发距离内滑动期间，本事件只会被触发一次。

配合使用的组件：
<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"'),
}

写给看到最后的你

亲爱的朋友，感谢你看到了最后，能够相遇便是缘分，你路过我的文章亦是令我欢喜的缘，新的一年里祝愿朋友们：虎虎生威！虎气十足！如虎添‘亿’！❤️❤️❤️