1.添加 vConsole

1
2
3
4
5

<script src="https://cdn.bootcss.com/vConsole/3.2.2/vconsole.min.js"></script>
<script>
    var vConsole = new VConsole();
    console.log('hello world');
</script>

https://www.npmjs.com/package/vconsole

2.iOS上使用display: -webkit-box;子元素之间有间距

1
2

display: -webkit-box;
font-size: 0; /* 消除间隙 */

父元素设置font-size: 0; 子视图重新设置font-size

3.div 包含的文字不展示

1

<div>test</div>

需要设置 font-size

4.iOS 圆角不生效

1
2
3
4
5

overflow: hidden;
border-radius: 12px;
// 兼容iOS圆角不生效
transform: rotate(0deg);
-webkit-transform: rotate(0deg);

5.小程序引入三方库，旧版编译器报错

更换引入方式，使用 import

1
2
3
4

// 原
const SpyClient = require('spy-client/dist/spy-client-basic');
// 新
import SpyClient from 'spy-client/dist/spy-client-basic.esm.js';

6.去掉 iOS 自带的点击效果

1

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

ios点击出现灰色背景_ios 点击元素出现 背景-CSDN博客

7.Vant 组件缺少样式

vant 版本为2.x.x

按需手动导入样式文件，以 List 为例：

1

import 'vant/lib/list/style';

https://vant-ui.github.io/vant/v2/#/zh-CN/list

8.使用了 pxtorem，判断条件里的 px 也被转换成了 rem

postcss-pxtorem

可以在不期望转换的px后紧跟/* ignore */

1
2
3

@media screen and (min-width 640px/* ignore */) {
   width: 90%;
}

9.z-index 收敛

弹窗、提示等 z-index 收敛到一个文件里方便维护

10.flex 子元素超出父容器

父视图不想设置宽度（写死宽度不太聪明的样子），可以设置 min-width: 0;或 width: 0;

flex弹性布局 子元素内容超出盒子容器宽度问题_flex布局子元素超过页面-CSDN博客

11.设置margin-top为负数，元素遮挡部分背景颜色不生效

需要设置 position: relative

1
2

margin-top: -40px;
position: relative;

12.使用小程序 API 注意最低版本

使用小程序 API 时注意判断版本，例如隐藏页面左上角返回按钮 backButtonHide 最低版本 3.660.1

13.小程序中调试H5

控制台输入命令等

1
2
3

location.reload()
location.href
window.pageData