前端开发中遇到的一些问题----持续更新

页面两个标签(非block样式)之间有一个小margin,样式怎么改都去不掉

解决:html中标签换行了,把两个标签放到同一行可以解决,还有一种好办法就是使用flex。

app上点击有背景

解决:全局添加样式-webkit-tap-highlight-color: rgba(255, 255, 255, 0);

手机端input边框阴影

解决:添加-webkit-appearance: none;

chrome模拟器里点击元素错位

解决:我把百分比改成fit to window 好了,也可以来回切换几次机型。
前端开发中遇到的一些问题----持续更新_第1张图片

git push 报错 RPC failed; curl 55 SSLWrite() returned error -9805

解决:一次性提交代码太多导致,使用git log找到最近一次commit的代码,git reset {id}回退到commit前的状态,再分批次提交。

代码丢失,git log找不到

解决:git reset --hard xxx的记录,使用git reflog

sudo nginx -s reload启动nginx报错: nginx: [error] open() "/usr/local/var/run/nginx.pid" failed (2: No such file or directory)

解决:sudo nginx -c /usr/local/etc/nginx/nginx.conf => sudo nginx -s reload

input中type为number时maxlength失效

解决:input type="tel"

微信授权callback有多个参数,出现丢失的情况。

解决:因为授权接口中&的多个参数会变成整个接口地址的参数,所以需要对&进行加密,使用var callbackurl = encodeURIComponent(window.location.href)进行加密

滚动不顺畅

解决:添加样式

-webkit-overflow-scrolling: touch;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
事件冒泡

解决: stopPropagation,cancelBubble(ie)

移入移出多次触发

解决: mouseleave 对子元素不生效,不会冒泡

安装navicat,完成后提示文件损坏

解决: 打开终端,输入sudo spctl --master-disable

docsify配置的搜索功能失效

解决:回到文档首页(文档根目录),打开控制面板,找到localstorage,删除docsify.search.index和docsify.search.expires,刷新页面。

textarea里输入的换行、空格直接存到所需样式的div里时,没效果。

解决:转义一下,空格替换成 换行rn换为
,template里使用{{{}}}而非{{}}解析。

nl2br: function (str, idx, tag, isXhtml) {
  let blankTag = ' '
  let breakTag = (isXhtml || typeof isXhtml === 'undefined') ? '
' : '
' let newStr = (str + '').replace(/([^>\s]?)(\s)/g, '$1' + blankTag + '$2') newStr = (newStr + '').replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, '$1' + breakTag + '$2') if (tag) { this.changeData[idx][tag] = newStr } return newStr }

还可直接添加样式white-space: pre-wrap;

html2canvas画出来的图片模糊

解决:只要这个html整体放大一倍,图片再缩小一倍就可以解决了

html2canvas把html页面存成图片时,图片不全

解决:先记录当前scrollTop值,window.scrollTo(0,0)到顶部,然后画图,就可以解决了,完了再回到原来的scroll位置 。

git拉取代码报错:Permission denied (publickey)

解决:

j .ssh
git config --global user.name "***"
git config --global user.email "***@163.com"
ssh-keygen -t rsa -C "***@163.com"

拷贝:id_rsa.pub
放到 https://git.oschina.net/keys 的ssh里

点击事件失效

解决:使用css pointer-events: none;直接穿透当前div

类似微信,左滑动出现当前li的一些操作mask,touchmove在手机上失效

解决:在touchmove里使用一个阈值,Math.abs(endY-startY) 是否大于10,来决定是否preventDefault。

webpack 打包时, No ESLint configuration found

解决:项目中缺少.eslintrc.js文件,手动在根目录添加上。

七牛图片上传,下载文件名改名称

解决:普通的a标签下载,只需要在后面加上download=“1223”。七牛上是在href链接后面添加“?download/name”

new Vue时报错error Do not use 'new' for side effects

解决:报错内容上方添加 / eslint-disable no-new /

h5获取地理位置信息时,用户第一次拒绝,后面一直都弹窗用户拒绝信息。

解决:android,设置-》应用程序管理器-》互联网(自带或安装的其他浏览器)-》权限-》位置信息(重启此开关)

新建js代码经常报错import declarations not support by current javascript version

解决:webstorm =》perference =》languages & frameworks =》javascript =》右侧选择ecmascript6

android微信里播放video,播放完了以后,关闭之后,video一直处在最顶层,z-index失效。

解决: 网上很多地方都没有找到答案,官网上说是无解的,走了个小弯路。关闭video时,把当前video存一下,然后找到父级,删除video再给父级innerHTML video 问题大致解决,目前只想到了这么个方法。

let thisNode = this
let parentNode = thisNode.parentNode
parentNode.removeChild(this)
parentNode.innerHTML = thisNode.outerHTML
chrome浏览器调试的时候,chrome://inspect连接手机之后,一片空白

解决:因为chrome调试之初需要连chrome服务器,所以存在问题,后就可以查看dom了

mysql连接报错:ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: YES)

解决:系统偏好设置-》最下面mysql-》进入-》点击initialize database-》输入密码,连解时也输入这个密码。

mysql连接池错误: Client does not support authentication protocol requested by server; consider upgrading MySQL client

解决:navicat 新建查询输入:ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '你的密码'

提取出来的头部,点击打开遮罩层,滚动时,底部跟着滚动。

解决:监听遮罩层状态,body位置改为fixed,此时每次关闭遮罩层时,页面都回到最顶部,是因为fixed脱离了文档流,所以应该先记录当前位置,position置为static时再定位到原先位置。代码如下:

  status (status) {
    if (status === 'open') {
      this.scrollY = window.scrollY
    }
    document.body.style.position = status === 'close' ? 'static' : 'fixed'
    window.scrollTo(0, this.scrollY)
  }

如果遮罩层的页面只有一页,且无需滚动的时候,只要禁用touchmove就可以了@touchmove.prevent,无需过多操作。

不同商品页,id变化,商品不变

解决: 监听$route变化,然后获取id重新去取数据。

swiper插件的轮播图循环时,上面添加的点击事件失效

解决: 点击事件不绑定在swiper-slide上,添加在on中。原因是循环时,swiper复制了几份swiper-slide,然而却没有复制它的事件,所以导致事件时而生效,时而失效,事实上,当swiper-slide在第一个时,右滑页面,使其滚动到最后一个,这时点击失效必现。

  new Swiper('.first-block', {
    loop: true,
    paginationClickable: true,
    parallax: true,
    setWrapperSize: true,
    on: {
      click: function () {
        // 当前活动块的索引,与activeIndex不同的是,在loop模式下不会将 复制的块 的数量计算在内。
        const realIndex = this.realIndex
        vm.handleJumpe(vm.indexSwiperList[realIndex].href, {})
      }
    }
  })
火狐浏览器中,锚点链接失效。

解决:引起问题的原因是iframe。锚点链接放在iframe中,iframe + href 在火狐中不兼容,解决办法是判断是否是火狐浏览器,如果是,计算锚点id距离顶部的距离,然后滚动到此id位置。

fixed + input聚焦引起的fixed失效,搜索框跟随页面滚动了。

解决:在网上查到的大部分解决方案是分三部分,上中下,使用absolute定位,因为懒得改结构,找到一个简单的解决办法,touchmove的时候,input自动失去焦点。

handleTouchMove () { // 我是引用的search子组件 this.$children[1].$refs.searchInput.blur() }
sourcetree 远程拉取的代码每次更新都需要输入密码

解决:打开终端,到相应代码位置,输入git config --global credential.helper store,然后提交一次代码,输入用户名密码,之后再也不用重新输入了。

charles的ssl证书一直安装不上

解决:

  1. 手机和电脑在同一个wifi环境
  2. 关闭手机上的代理
  3. 重新打开手机上的代理,safari中输入chls.pro/ssl
  4. 安装成功后添加信任

注:如如法代理成功,可

  1. 进入网络=》高级=》关闭代理
  2. 手机代理时,应先开启charles,然后再用手机连。
启动项目,访问时报错 invalid host header

解决: package.json的scripts命令里添加--disableHostCheck=true
"dev": "webpack-dev-server --disableHostCheck=true --inline --progress --config build/webpack.dev.conf.js",

配置好的vue项目,本地开发环境可以热加载自动更新,使用charles代理后不更新。

解决:webpack-dev-server --disableHostCheck=true
https://segmentfault.com/q/10...

vue 单页面路由中有难看的 #

解决:在router/index.js中添加mode: 'history'

export default new Router({
  mode: 'history',
  ...
})
钉钉h5微应用中,调用钉钉的页面,再返回自己的页面数据不更新。

解决:在页面跳转之前使用setTimeout添加一个dingToast,回调中重新调取接口。如下:

setTimeout(() => {
  // device.notification.toast
  dingToast({msg: ''}).then(() => {
    this.fetchInfo()
  })
}, 1000)
const url = `https://h5.dingtalk.com/xxx`
// biz.util.openLink
dingOpenLink({ url })
h5微应用返回按钮router.back()偶现失效

解决:浏览器虽然没有给出栈内url数据,但是给出了栈内历史记录的length,发现按钮失效的时候都是这个length不对的时候,针对这一发现,对当前页做特殊处理,在router.back()失效后,直接关掉当前页。

项目中的正则表达式eslint校验不通过

解决:在上面添加一行// eslint-disable-next-line no-useless-escape

vue.esm.js?c5de:628 [Vue warn]: You may have an infinite update loop in a component render function.

解决:项目中用到了v-for,我在写静态页面的时候,为了显示列表在html页面上直接使用{{list=[1, 2, 3]}}造成的,去掉就好了。引起问题的原因是多个地方同时修改了v-for的list。

new Date('1994-01-01 00:00:00')或者 new Date('1994-1-1')在pc上没问题,在手机端报错。

解决:改为new Date('1994/01/01 00:00:00')或者new Date('1994/01/01')

微信公众号开发时,只能有1-2个回调域名。

解决:做一个公共页面,并把这个页面设置为回调域名,这个页面功能为:接收重定向地址并且把授权后获取到的code加入链接,再重定向到我们需要跳转的页面上。

支付宝授权成功后会跳回原来的页面,此时支付宝内的回调页还开着没有关闭。

解决:使用 window.AlipayJSBridge.call('closeWebview')关闭支付宝内的页面。同理,微信内的页面关闭使用window.WeixinJSBridge.call('closeWindow')

vscode打开后,系统cpu爆棚,电脑卡的不行。

解决: vscode=》Code=》首选项=》设置 input框输入search.followSymlinks,去掉勾选。

vetur+prettier格式化时,vue的template不格式化。

解决:首先删除多个工作区,然后
个人设置中:"editor.defaultFormatter": "vscode.html-language-features"
工作区中:"editor.defaultFormatter": "esbenp.prettier-vscode"

webpack打包太慢,如何检测。

解决:使用webpack-bundle-analyzer插件,如下四步查看:

  1. 安装:npm intall webpack-bundle-analyzer --save-dev,
  2. webpack.prod.conf.js中加入:

    const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
    webpackConfig.plugins.push(new BundleAnalyzerPlugin())
  3. package.json中加入"analyz": "export NODE_ENV=production && npm_config_report=true && npm run build",
  4. 运行npm run analyz 后浏览器会打开分析结果页面。
npm install下载慢

解决:将npm更改为淘宝镜像。
➜ ~ npm config set registry https://registry.npm.taobao.org
查看
➜ ~ npm config get registry

getaddrinfo ENOTFOUND

解决:修改hosts文件 cd /etc => vim hosts 修改完后 :wq。

提交代码时,代码全部add了,gitignore里也没有忽略,但总是少提交其中的一个文件

解决:git add -f强制添加所有文件

代码提交时报错,index.lock无法提交

解决:rm -f .git/index.lock

你可能感兴趣的:(兼容,css3,html5,git,vue.js)