微信小程序踩坑记录-CSDN博客

本文链接：https://blog.csdn.net/Mr_Zing/article/details/60633557

1. 中文图片路径问题

当图片名为中文的时候，在开发者工具上，Iphone设备，或用于底部Tab栏上，显示正常。在安卓设备且用于页面中是，图片网址返回404错误（要手动binderror并打印事件才能发现）。
建议：自动log这些错误。

2. 开发者工具缩放问题

（2017/3/7提出，2017/8/6更新时已解决，目前无法缩放）
开发者工具中，按CTRL加滚轮是会缩放的，而且不知道缩放比是多少，而且预览内容不会缩放，但是框会（放大试试就知道）。当发现内容怎么都不能居中时，可能就是预览框缩小了，挡住了一部分页面。
建议：工具角落显示当前缩放比。

3. wxml文字居中解析问题

对于这么一段代码：

<text>
    中
</text>

如果我希望text固定高宽，中字居中，类似象棋之类的效果，那么我的WXSS可能是这样的：

text {
  height: 30rpx;
  width: 30rpx;
  border: 3rpx solid black;
  border-radius: 30rpx;
  font-size: 30rpx;
  line-height: 30rpx;
  text-align: center; /* 对多个字时有效 */
  /* 以及其他一些操作 */
}

在PC端的小程序开发工具上，它显示为一个直径为30rpx的、3prx粗黑边的圆，里面端端正正放着一个“中”字。但是呢，在IOS端上，“中”字莫名其妙往右偏移了一块。起初我以为是我布局方式不兼容，于是换成了子元素relative/absolute或flex布局都于事无补。

最后才发现，原来在IOS端的小程序上，代码里，“中”字那行前面的缩进空格被解析成一个空格字符，把显示的“中”字挤到旁边，导致怎么都无法居中文字的问题。
知道了问题所在，那么解决方式也就显而易见了。对那些不能出现空格的节点，将它的起始标签、内容、结束标签放到同一行，不给它留机会。（因为\n也是空白字符的一种）
同理，对于多个元素中间出现蜜汁gap的问题，也可能是这个问题导致的。

希望这篇文章不再更新。 [\掩面]（打出GG）

4. require和代码保护（2019/09更新）

有时候在“预览”模式中，require到的对象为空，除了排除循环require的问题以外，还要看看有没有启动“代码保护”功能（如图）。
代码保护设置
如果代码中有变量用require命名，启动代码保护时有可能会出错，而且只在“预览”时会出错，“真机调试”和开发者工具都不会报错。官方文档也有提到：
代码保护文档