web前端开发常见的技能问题

1.web扫码登录怎么实现，思路?

制作思路：

1. 前端调用后台生成二维码的API，获取到二维码图片和id

2. 前端检测（通过轮询或者websock）是否有手机扫码，通过调用后台接口API，参数为ID

3. 手机扫描二维码登陆，手机端可以获取到二维码里ID，带上用户ID和二维码里的ID调用后台接口。
   后台存储这个二维码的数据，加上登录用户信息，当前台调用API时，给返回登录成功。

4. 前端获取到登录成功，进行跳转

2.解决input[type=file]打开时慢、卡顿问题

• <input type="file" accpet="image/*"> 卡顿

• 经过测试发现，在mac里面safari、Firefox、Chrome(opera不知道为啥老闪退)都没有卡顿问题

• 在windows里面，Firefox不卡顿，只有Chrome卡顿

• 原因 ：chrome上传文件 检测文件，网速快没问题，慢的话就断掉了解了

• 解决：accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp"

3.浏览器拦截跨域请求处理方法

• 跨域的种类：

  1. jsonp
  2. 或者apache 或者nigix里面配置
  3. 后端的php或者java中配置 cross orgion
  4. proxy 代理跨域

• 解决方案：

• 被请求的服务器，添加HTTP头响应头 'Access-Control-Allow-Origin': '*',

• proxy跨域： target 目标 changeOrigin 使用跨域 proxyTable{ “正则”:“替换变量”}

4. ie11下Ajax访问后端的时候，只有IE报400错误解决办法

一般在url后面都会添加一个时间戳
url:"/order/order.shtml?time="+new Date() ajax请求 防止缓存
ie11 不支持new Date
修正 ：url:"/order/order.shtml?time="+new Date().getTime()

5. 苹果手机 微信调用百度地图Javascript API 频繁闪退问题

在网页中调用百度地图API，在IOS8系统中，缩放的时候频繁闪退
百度地图 新api中 有些接口 数据不稳定，降低api的版本即可

6. 获取视频网站，比如优酷中的视频，嵌入到页面或者移动端

• 调用官方的api ，调用视频的时候报错 后来发现主要原因 vid(视频id引起的)
• 把视频id保存在 localstorge，然后在项目index.html 里面获取id 在请求的时候 就没问题了
  向后台接口传递数据的时候： 需要传递用户id 和 视频id（在localStorage）

7. ios 键盘遮挡问题

• scrollIntoView(alignWithTop): 滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素

• alignWithTop = true 或 空 窗口滚动之后会让调用元素的顶部与视口顶部尽可能平齐 （元素向上滚动）

• alignWithTop = false 调用元素会尽可能全部出现在视口中，可能的话，调用元素的底部会与视口顶部平齐，不过顶部不一定平齐。（元素不会滚动）

• 常见浏览器：IE、Chrome、Firefox、Safari和Opera。 都支持

let _this = this
setTimeOut(function(){ //每100毫秒 滚动1次 _this.scrollIntoView(true)
},100)

当input 得到焦点的时候 出发方法，方法作用 从新计算 元素到顶部的距离，元素向上移动的距离=软键盘的高度
ios手机型号太多，滚动数值需要多次获取

8. mounted钩子函数中请求数据导致页面闪屏问题

• 就是加载时机问题，放在created里会比mounted触发早一点，

• 如果在页面挂载完之前请求完成的话就不会看到闪屏了

9. IE9中， 请求服务器数据并用v-for渲染option标签出现只显示第一个字的问题

{
   {name:"张三张三张三张三张三张三",sex:"man"}
} 
<select v-for="">
	<option>{{item.name}}</option>  ===> 张
</select>

解决： =重绘页面的select 输入框=

forceRedrawSelect: function (useNextTick) {
    useNextTick = useNextTick !== false;
    if (!browser.isIE)
        return;
    var _this = this;
    var redraw = function () {
        var $select = _this.$("select"); //选中select
        //移除宽度的样式 
        $select.css('width', 0); 
        $select.css('width', ''); 
        //单独设定样式
		$select.css('width', '300px');
    };
    if(useNextTick)
        this.$nextTick(redraw);
    else
        redraw()
	}
}

10.使用overflow：hidden，在ios下卡顿的问题解决

在css 属性上添加 -webkit-overflow-scrolling: touch;

11.audio元素和video元素在ios和andriod中无法自动播放

• 产生原因：浏览器都为了节省流量，做出优化，在用户没有行为动作时（交互）不予许自动播放
  audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常，
• 解决方法：==对象.play() ==执行播放

12.移动端适配

适配的方案：

1.Media Queries

• 媒体查询：查询设备的宽度来执行不同的 css 代码，完成适配最小和最大边界值设定

• 优点：统一对pc和移动进行调试，调整屏幕宽度 不需要刷新页 面，是响应式的

• 缺点：代码量大，不利于维护， 可能造成设备资源的浪费

2.Flex弹性布局

设定viewport

<metaname="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

	父元素 display：flex  
		   justify-content 对齐方式
		   flex-direction 横向 纵向
		   align-items 交叉轴上如何对齐
	子元素 flex ：num

3.rem
根元素 font-size作为基准值 ，在google下默认值 16px 其他浏览器下不是

html{
font-size:16px
}

rem 和 em区别：
Em 和 rem 单位之间的区别是 ----浏览器根据谁来转化成px值

rem 决于页根元素的字体大小

em：值将是em值乘以使用em单位的元素的字体大小，不是相对于父元素
em的继承：每个元素将自动继承其父元素的字体大小，父元素字体大小会影响子元素