本文更新于 2020-09-04
- react 项目无法（热）更新，是编译路径找不到。
- 在绝对布局中，当 left 为 0 时，如果不写，在部分机型的浏览器会出现错位。
div {
position: absolute;
left: 0; /* 加上最好 */
top: 10px
}
- react 项目中，一些纯文本页面，如果要设置整个 HTML 页面背景颜色，可以把他设为 fixed 布局，再设置 width 和 height 为 100%，因为 fixed 布局参考对象是 body 的宽度。
/* css 样式 */
div {
width: 100%;
height: 100%;
position: fixed;
left: 0;
bottom: 0;
overflow-y: scroll;
}
在 CSS3 标准中，伪类使用单冒号
:，而伪元素使用双冒号::。在此之前的标准，他俩都使用单冒号。需要注意的是，双冒号的写法在低版本的IE浏览器中兼容性有问题，所以一些开发者为了保证兼容性，伪类和伪元素都用单冒号的写法。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 个物理像素。如果觉得混乱的可以忽略这句！）
小程序 rem（root em）单位，规定屏幕宽度为 20rem；1rem = (750/20)rpx
鼠标形状
/* css 样式*/
div {
cursor: default; /* 默认，箭头 */
cursor: pointer; /* 手指 */
}
npm（nodejs package manager），nodejs包管理器； --save的目的是将项目对该包的依赖写入到package.json文件中。
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);
}
- CSS3 边框
/* css样式 */
div {
border: 1px solid #eee;
box-sizing: border-box; /* 内边框，默认 */
box-sizing: content-box; /* 外边框 */
}
在微信小程序中 map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。（官方解释）map，video，canvas，textarea是原生组件，层级位于webview之上。
在原生控件cover-view作为父容器时，不能使用其他控件嵌套作为子元素，只能使用cover类的控件，例如：cover-view、cover-image 。不同数据类型的布尔运算（详细说明：点击这里）
if(a)，a 为 false、0、undefined、null、NaN、空字符串 时都返回 false。
| 数据类型 | 规律 | 备注 |
|---|---|---|
| Object | 都为 true | |
| Number | 只有 0 和 NaN 为 false | |
| String | 只有空字符串('')为 false | 空格字符串(' ')为 true |
| Function | 都为 true | |
| null, undefined | 都为 false |
- 小程序 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>
<input>组件，在手写输入的状态下，可能不会触发 bindinput 事件，为了确保获取的value值正确，可以在bindblur事件中通过 e.detail.value 获取最新的输入值。wx.scanCode API 调用扫一扫，扫码成功或者返回的时候，在真机上会调用 onShow 生命周期。如果在在onshow 中读取缓存数据，需要加个判断，把新值赋过去
文本不换行，溢出部分用省略号显示：
.text {
width: 100px; /* 必须要设置宽度 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
善用
!!将变量转化为布尔类型。除了false、0、null、undefined、NaN、空字符串返回 false，其余的都返回 true。（空格字符串也是返回true）。微信小程序：当项目上传或者预览编译的时候出现
无法使用代码保护功能的情况，是因为当前项目勾选了上传时进行代码保护的选项，而且项目本身引用了第三方库，才导致出现这样的情况。解决办法是：关闭代码保护。微信小程序在
<scroll-view />子元素使用<textarea />原生组件可能会报错：如：insertTextArea:fail等。支付宝小程序关于
<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）
- 支付宝小程序开发工具 Mac 版同时开启多个项目的方法：
$ open -n /Applications/小程序开发者工具.app
