记录前端/小程序遇到的那么些坑

Question

1. react 项目无法（热）更新，是编译路径找不到。
2. 在绝对布局中，当 left 为 0 时，如果不写，在部分机型的浏览器会出现错位。

div {
  position: absolute;
  left: 0;  /* 加上最好 */
  top: 10px
}

3. React 项目中，一些纯文本页面，如果要设置整个 HTML 页面背景颜色，可以把他设为 fixed 布局，再设置 width 和 height 为 100%，因为 fixed 布局参考对象是 body 的宽度。

/* css 样式 */
div {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  overflow-y: scroll;
}

4. 在 CSS3 标准中，伪类使用单冒号 :，而伪元素使用双冒号 ::。在此之前的标准，他俩都使用单冒号。需要注意的是，双冒号的写法在低版本的IE浏览器中兼容性有问题，所以一些开发者为了保证兼容性，伪类和伪元素都用单冒号的写法。

5. rpx 是微信小程序的 CSS 尺寸单位，小程序把不同的设备统一规定屏幕宽度为 750rpx，rpx 可以根据设备屏幕的真实宽度进行自适应。常见设备的转化关系（小程序开发文档）：

设备	rpx 换算 px (屏幕宽度/750)	px 换算 rpx (750/屏幕宽度)
iPhone 5	1rpx = 0.42px	1px = 2.34rpx
iPhone 6	1rpx = 0.5px	1px = 2rpx
iPhone 6 Plus	1rpx = 0.552px	1px = 1.81prx

说明一下，iPhone 6/7 的屏幕宽度是 375px，意外着 1px = 2rpx。很多UI设计师以 iPhone6/7 作为视觉稿。（插句话，iPhone 6/7 的物理像素是 750 个，即用 2 个像素表示网页中的 1px，所以在以前 iPhone 比一些普通设备显得更加细腻就是这个原因。1px = 2rpx = 2 个物理像素。如果觉得混乱的可以忽略这句！）

6. 小程序 rem（root em）单位，规定屏幕宽度为 20rem；1rem = (750/20)rpx

7. 鼠标形状

/* css 样式*/
div {
  cursor: default;  /* 默认，箭头 */
  cursor: pointer;  /* 手指 */
}

8. npm（nodejs package manager），nodejs 包管理器； --save 的目的是将项目对该包的依赖写入到 package.json 文件中。

9. box-shadow，其中 IE6 和 IE7 应该是不支持 box-shadow 属性。

/* css 样式*/
div {
  -moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4);  /* 不需要设置透明度的，直接使用颜色值 */
  -webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
  box-shadow:0 4px 4px rgba(0, 0, 0, 0.4); 
}

10. CSS3 边框

/* css样式 */
div {
  border: 1px solid #eee;
  box-sizing: border-box;  /* 内边框，默认 */
  box-sizing: content-box;  /* 外边框 */
}

11. 在微信小程序中 <map>、<canvas>、<video>、<textarea> 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 <scroll-view> 上，也无法对原生组件设置 css 动画。（官方解释）<map>，<video>，<canvas>，<textarea> 是原生组件，层级位于 webview 之上。
    在原生控件 <cover-view> 作为父容器时，不能使用其他控件嵌套作为子元素，只能使用 cover 类的控件，例如：<cover-view>、<cover-image> 。

12. 不同数据类型的布尔运算（详细说明：点击这里）
    if(a)，a 为 false、0、undefined、null、NaN、空字符串 时都返回 false。

数据类型	规律	备注
Object	都为 true
Number	只有 0 和 NaN 为 false
String	只有空字符串('')为 false	空格字符串(' ')为 true
Function	都为 true
null, undefined	都为 false

13. 小程序 <scroll-view> 中的 bindscrolltolower 方法失效的原因：需要在 app.wxss 中设置 page 的高度为 100%，并在 <scroll-view> 组件中设置高度为 100%。

// app.wxss
page {
  height: 100%
}

// scroll-view 组件
<scroll-view scroll-y="true" style="height:100%" bindscrolltolower="scrollLower"></scroll-view>

14. <input> 组件，在手写输入的状态下，可能不会触发 bindinput 事件，为了确保获取的 value 值正确，可以在 bindblur 事件中通过 e.detail.value 获取最新的输入值。

15. wx.scanCode API 调用扫一扫，扫码成功或者返回的时候，在真机上会调用 onShow 生命周期。如果在在 onShow 中读取缓存数据，需要加个判断，把新值赋过去

16. 文本不换行，溢出部分用省略号显示：

.text {
  width: 100px;    /* 必须要设置宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}

17. 善用 !! 将变量转化为布尔类型。除了false、0、null、undefined、NaN 、空字符串返回 false，其余的都返回 true。（空格字符串也是返回true）。

18. 微信小程序：当项目上传或者预览编译的时候出现无法使用代码保护功能的情况，是因为当前项目勾选了上传时进行代码保护的选项，而且项目本身引用了第三方库，才导致出现这样的情况。解决办法是：关闭代码保护。

19. 微信小程序在 <scroll-view /> 子元素使用 <textarea /> 原生组件可能会报错：如：insertTextArea:fail 等。

20. 支付宝小程序关于 <cover-view />、<cover-image /> 的问题：

• <cover-view> 默认白色背景，虽然官方回答是不能更改，但可通过再 app.acss 里面添加样式修改，亲测有效：

cover-view {
  background-color: rgba(0, 0, 0, 0);
}

• <cover-image> 的 border-radius 属性部分机型无效，官方回答可修改，但无效（已知华为 P30 不生效，iPhone 都有效），可能是支付宝版本问题（10.1.26）

21. 支付宝小程序开发工具 Mac 版同时开启多个项目的方法：

$ open -n /Applications/小程序开发者工具.app