微信小程序踩坑合集

一、某些情况下border-radius属性开发者工具模拟预览正常，但是真机不生效

解决方案：

> 添加样式
overflow: hidden;
transform: translateY(0);

二、new Date获取时间戳开发工具模拟预览正常，但是真机下为NaN

描述

> 当初始化的日期参数为拼接形式会出现这个错误，用模板字符串也是一样。
`new Date('2022-06-16' + ' 00:00').getTime() `

解决方案

> 使用"moment"等第三方日期格式化插件或者不使用拼接形式皆可

三、微信小程序背景图片真机不显示

描述

开发者工具上<view style="background-image: url(图片路径);"></view>可以正常显示，但是真机预览不显示，

原因

小程序背景图片只可以展示`base64`或者网络地址图片
背景图片如果使用本地路径地址，电脑开发时可以正常显示，手机测试时无法显示背景图

解决方案

1. 带`http`的网络图片可以显示
2.将图片路径转化为`base64`格式
3.使用`image`标签

三、页面跳转携带对象参数解析失败

描述

wx.navigateTo({
  url: `/pages/reserve_detail/reserve_detail?record=${(JSON.stringify(record))}`;
})

// 页面接收
onLoad(options) {
    // 解析报错
    JSON.parse(options.record || '{}');
}

原因

对象中有字段包含问号，等号之类有歧义的特殊符号，所以会导致解析失败

解决方案

利用`encodeURIComponent`进行转码
wx.navigateTo({
  url: `/pages/reserve_detail/reserve_detail?record=${encodeURIComponent(JSON.stringify(record))}`;
})

// 页面接收
onLoad(options) {
`decodeURIComponent`解码
    JSON.parse(decodeURIComponent(options.record));
}