H5项目总结

第一次做H5的项目，遇到不少问题和注意事项，特意记录下来

 

1. 用户交互的接口中，后端除了返回0，其他错误信息需要抛出展示给用户

 

2. 项目要求页面的title不要显示url，只需要一个空白

       觉得很简单，设置一个空字符串，document.title = ""不就行了，发现在iphone上可以，android上不行，还是显示url。然后在chrome上做测试，发现空格document.title = " "也不行，document.title = "  "也不行。只好上网找到办法document.title = '\u200E';就可以了。

 

3. 背景图片固定，不随上层元素滑动

 

4. 自己实现了一个modal框

 

5. 移动端点击页面中的input输入框，弹出键盘，输入完毕，关闭键盘后，页面不回弹

    在移动端的文本框中输入内容，收起键盘后，发现iPhone手机出现页面布局不下滑的问题，而安卓手机是正常的。

    解决方案是，当文本框失去焦点后让 window 重新滚动到(0,0)到位置：

const inputItems = document.querySelectorAll("input");
inputItems.forEach(function(ele){
  ele.addEventListener("blur",function(){
    window.scrollTo(0,0)
  })
})

 

6. 移动端，点击输入框，背景图片上移

    H5页面设置了背景图片，在移动端，点击input，弹出键盘的时候，背景图片被挤上去了。

.main{
  height: 100%;
  background: url('../assets/images/[email protected]') no-repeat left top;
  background-size: 100% 100%;
}

    在设置背景图片的时候，高度设置成了100%，这样写就会导致键盘弹出的main的height:100%会变成（100%-键盘高度），导致图片被挤压，所以需要强行将main的高度设置为html原本的100%。

mounted(){
 this.bodyHeight=document.documentElement.clientHeight
}

   这样的话即使键盘弹起main的高度还是之前的100%，背景图片也就不会被挤上去了

 

7. ...省略号效果的实现

之前是用js代码控制字符串的长度，来做截断，这次试了一下css实现，也不错

	
		
		
		
	
	
		

			今天是2019年7月26日
		
	

 

8. 修改input的placeholder的颜色

  input::-webkit-input-placeholder { /* WebKit browsers */ 
    color:rgba(181,181,181,1);
  }    
  input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
    color:rgba(181,181,181,1);
  }
  input::-moz-placeholder { /* Mozilla Firefox 19+ */ 
    color:rgba(181,181,181,1);
  }
  input:-ms-input-placeholder { /* Internet Explorer 10+ */ 
    color:rgba(181,181,181,1);
  } 

 

9. iphone出行页面滑动卡顿

      H5页面在安卓设备上滑动的时候很正常，很流畅，但是在iPhone中滚动速度很慢，感觉不流畅，有种卡卡的感觉。上午找了解决方案，很简单，一行代码搞定

body {-webkit-overflow-scrolling: touch;}

 

10. 移动端如何看console.log

H5页面开发的时候，可以用chrome模拟手机分辨率，调试各种错误非常方便。一旦上真机测试出现各种问题，就束手无策了。上网找了两个H5页面移动端的调试工具eruda和vConsole，只要在index.html中引入js库就可以了，非常方便。H5页面的右下角会出现一个按钮，点击就会弹出调试界面，可以看log和network，还有其他各种信息。虽然不及chrome强大，但总比没有强多了

eruda:

vConsole:

 

11. ios10手机的打不开H5页面

      控制台出现错误提示SyntaxError: Cannot declare a let variable twice: 'e'.，以为是自己代码的问题，查遍了整个工程也没找到重复定义2次的变量e。后来同事上网查到解决方案，这是iphone的一个bug。通过修改UglifyPlugin的定义，添加关于mangle的选项即可。（注意：修改完之后最好清除微信缓存，浏览器缓存，app缓存再测试）

optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: {
                        warnings: false
                    },
                    mangle: {
                        safari10: true
                    }
                },
                sourceMap: true,
                parallel: true
            }),
        ],
},

具体参考这个链接

https://segmentfault.com/a/1190000013075464?utm_medium=referral&utm_source=tuicool

 

12. 有些老的安卓手机和PC端微信内置浏览器打不开H5页面

      用了Vconsole，发现了问题，项目虽然配了babel，但是没用，代码没有转译成es5，低版本的浏览器都不支持es6的写法，坑

 

13. 在app内打开H5页面，实现点击app的左上角的返回按钮退出H5页面：

• 多个页面的路由中，需要返回生效的地方用Push，不需要返回生效的全部用replace
• 如果是三个页面：a -> b -> c，a→b用的replace，b→c用的push，c页面点击返回会到b，再点击就没有可返回的了(在app内就是关闭)
• 如果是只有2个页面，a -> b
  1. 情况1：用户到a页面，这个时候停留了，用户后续手动操作点击跳转b页面，则用push
  2. 情况2：用户到a页面，拉取接口，走判断逻辑自动跳到b页面（非用户手动触发），则用replace

 

14. 请求后端接口的时候，token不能传undefined字符串

• 如果能获取token，并且token的值不是undefined字符串，请求的head中正常带上“Authorization”属性
• 如果获取的token是undefined字符串，请求的head中不要带上“Authorization”属性，否则网关解析token失败，会返回“无法获取用户信息”，请求在网关就被拒绝，无法调到后端的服务接口