记录前端遇到的坑,含小程序!

简介: 记录前端遇到的坑

正文


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


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


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


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


  1. 在 CSS3 标准中,伪类使用单冒号:,而伪元素使用双冒号::。在此之前的标准,他俩都使用单冒号。需要注意的是,双冒号的写法在低版本的IE浏览器中兼容性有问题,所以一些开发者为了保证兼容性,伪类和伪元素都用单冒号的写法。
  2. 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 个物理像素。如果觉得混乱的可以忽略这句!)


  1. 小程序 rem(root em)单位,规定屏幕宽度为 20rem;1rem = (750/20)rpx
  2. 鼠标形状


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


  1. npm(nodejs package manager),nodejs包管理器; --save的目的是将项目对该包的依赖写入到package.json文件中。
  2. 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); 
}


  1. CSS3 边框


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


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


  1. 不同数据类型的布尔运算(详细说明:点击这里


if(a),a 为 false、0、undefined、null、NaN、空字符串 时都返回 false。

数据类型 规律 备注
Object 都为 true
Number 只有 0 和 NaN 为 false
String 只有空字符串('')为 false 空格字符串(' ')为 true
Function 都为 true
null, undefined 都为 false
  1. 小程序 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>
  1. <input> 组件,在手写输入的状态下,可能不会触发 bindinput 事件,为了确保获取的value值正确,可以在bindblur事件中通过 e.detail.value 获取最新的输入值。
  2. wx.scanCode API 调用扫一扫,扫码成功或者返回的时候,在真机上会调用 onShow 生命周期。如果在在onshow 中读取缓存数据,需要加个判断,把新值赋过去
  3. 文本不换行,溢出部分用省略号显示:


.text {
  width: 100px;    /* 必须要设置宽度 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
  1. 善用 !! 将变量转化为布尔类型。除了false0nullundefinedNaN空字符串返回 false,其余的都返回 true。(空格字符串也是返回true)。
  2. 微信小程序:当项目上传或者预览编译的时候出现无法使用代码保护功能的情况,是因为当前项目勾选了上传时进行代码保护的选项,而且项目本身引用了第三方库,才导致出现这样的情况。解决办法是:关闭代码保护。
  3. 微信小程序在 <scroll-view /> 子元素使用 <textarea /> 原生组件可能会报错:如:insertTextArea:fail 等。
  1. 支付宝小程序关于 <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)
  1. 支付宝小程序开发工具 Mac 版同时开启多个项目的方法:

$ open -n /Applications/小程序开发者工具.app
目录
相关文章
|
6月前
|
弹性计算 前端开发 小程序
微信小程序上传文件至阿里云OSS直传(java后端签名+前端直传)
当前的通用文件上传方式是通过前端上传到服务器,再由服务器转存至对象存储。这种方式在处理小文件时效率尚可,但大文件上传因受限于服务器带宽,速度较慢。例如,一个100MB的文件在5Mbps带宽的阿里云ECS上上传至服务器需160秒。为解决此问题,可以采用后端签名的方式,使微信小程序直接上传文件到阿里云OSS,绕过服务器中转。具体操作包括在JAVA后端引入相关依赖,生成签名,并在微信小程序前端使用这个签名进行文件上传,注意设置正确的请求头和formData参数。这样能提高大文件上传的速度。
1130 1
|
20天前
|
小程序 前端开发 数据可视化
作为一个前端小白,我竟然搞定了一个小程序的交付
作为一名刚毕业的前端码农,今年毕业后就加入了一家初创公司。入职不久便接到了一个小程序开发项目,客户特别强调必须使用小程序原生语言进行开发。由于时间紧迫而合适的后端开发者暂时还没到位,老板决定让我边学边做,承担起整个项目的前后端开发工作。对于初出茅庐的我来说,这无疑是一个巨大的挑战。不仅要掌握一门新的编程语言,还要学习数据库设计、服务器部署等一系列后端技术,任务艰巨。正当我为此感到头疼时,一位前辈向我推荐了极态云。经过一番调研后发现,它简直就是为像我这样缺乏后端经验但又急需快速完成项目的人量身定做的解决方案!
作为一个前端小白,我竟然搞定了一个小程序的交付
|
1月前
|
移动开发 小程序 前端开发
小程序的前端插件都有哪些?
【10月更文挑战第16天】小程序的前端插件都有哪些?
39 1
|
5月前
|
存储 前端开发 小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
表白墙完善(数据库,前端,后端Servlet),再谈Cookie和Session。以及一个关于Cookie的练习小程序
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第4天】小程序的前端 display 有什么类型?
66 4
|
2月前
|
前端开发 小程序 开发者
小程序的前端 display 有什么类型?
【9月更文挑战第1天】小程序的前端 display 有什么类型?
53 2
|
5月前
|
前端开发 小程序
新版校园跑腿外卖独立版+APP+小程序前端外卖配送平台源码
同城校园跑腿外卖配送平台源码,支持自定义diy 你可以设计你的页面,设计你自己的风格,支持多校园,独立版本,多商户,有用户端,骑手端,商家端,强大的功能
189 3
|
6月前
|
小程序 前端开发 JavaScript
小程序全栈开发:前端与后端的完美结合
【4月更文挑战第12天】本文介绍了小程序全栈开发,涵盖前端和后端的关键点。前端使用WXML和WXSS进行页面结构和样式设计,JavaScript处理逻辑及组件使用;后端采用Node.js等语言处理业务逻辑、数据库设计和API接口开发。前端与后端通过数据交互实现结合,采用前后端分离模式,支持跨平台运行。调试测试后,提交微信审核并上线运营。掌握前端后端结合是小程序成功的关键。
260 1
|
6月前
|
小程序 前端开发 API
快递平台独立版小程序源码|带cps推广营销流量主+前端
快递平台独立版小程序源码|带cps推广营销流量主+前端
235 7
快递平台独立版小程序源码|带cps推广营销流量主+前端
|
6月前
|
监控 前端开发 小程序
微信小程序全栈开发中的前端工程化实践
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的前端工程化实践,旨在提升开发效率和体验。重点包括代码规范与架构设计(模块化、组件化、MVC模式)、自动化构建与部署(使用Webpack、Git和CI工具)、前端框架与库(如Vue.js、React、Angular)以及性能优化策略(代码、资源优化和性能监控)。通过这些实践,开发者能更高效地掌握小程序开发,打造高质量应用。
76 0
下一篇
无影云桌面