微信小程序——走过的坑

最新推荐文章于 2024-09-17 21:26:56 发布

Semoon呐

最新推荐文章于 2024-09-17 21:26:56 发布

阅读量586

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/weixin_43974907/article/details/88189191

微信小程序专栏收录该内容

28 篇文章

订阅专栏

本文总结了在开发微信小程序过程中遇到的一些问题，包括text标签的限制，wxss设置全局背景色，onShow()与onLoad()的使用注意事项，时间格式化，前端时间获取的错误处理，calc样式失效的解决，去除滚动条以及安卓平台图片显示问题等。通过这些解决方案，可以帮助开发者更好地规避微信小程序开发中的坑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序——走过的坑

1.text标签

text标签

不能设置width
wxml使用多个空格（&nbsp；），要添加 decode=’{{decode}}’
js文件中设置decode为true
data: { decode:true, },

2.wxss设置page整个页面的背景色

  page{
    background-color: #F2F2F2;
    width:100vw;
    height:100vh;
  }

3.onShow()与onLoad()

bug：在onShow()中执行this.onLoad()，会导致页面第一次加载的时候数组加载两次！
造成原因：页面加载先执行onLoad，再执行的onShow，就会出现在onLoad加载一次数据，在onShow中执行this.onLoad()在加载一次数据。
解决办法：将不需要刷新的数据放在onLoad中执行，将需要刷新的数据放在onShow中执行。

4.时间格式化

	if (res.statusCode == 200 && res.data.total > 0) {
	          for (var i = 0; i <= res.data.list.length; i++) {
	            var dateFormat = res.data.list[i].start_time
	            res.data.list[i].start_time = ts.dateTimeFormat(dateFormat)
	            ts.setData({
	              cars: res.data.list,
	              show: true,
	            })
	          }         
	        }
        
 dateTimeFormat: function (dateTime){
    if (dateTime && dateTime.length === 14) {
      var time = '';
      time = dateTime.substring(0, 4) + '-' + dateTime.substring(4, 6) + '-' + dateTime.substring(6, 8) + ' ' + dateTime.substring(8, 10) + ':' + dateTime.substring(10, 12) + ':' + dateTime.substring(12, 14);
      return time;
    }
  },

5.前端获取的时间undefined，解决方法

var dataFormat = JSON.stringify(res)

6.解决calc失效问题

“减号”左右，一定要有空格

  width: 100vw;
  height: calc(100vh - 8rpx);

7.去掉右侧超出页面的滚动条

/* 去掉默认滚动条 */
::-webkit-scrollbar{
width: 0;
height: 0;
color: transparent;
}

如果失效，加上

page {
  width: 100vw;
  height: 100vh;
}

8.图片在安卓机上不显示，ios正常显示的问题

解决：图片的命名不能存在空格