正文
- 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%,并在
组件中设置高度为 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