1.项目中遇到的一些奇葩问题
- includes方法 在安卓的移动端上webview中不兼容
-
for of 方法 在安卓的移动端上webview中不兼容 ,babel转化后,还报错
-
vclonsole.js在谷歌浏览器的浏览器中可以很好的调试,但是在安卓其他的webview中,没法用fiddle抓取请求包。
-
在安卓的webview中,动画失帧问题,最好给动画元素加上: transition-style:3d;
- 在PC端的谷歌浏览器中可以很好的运行,但是在安卓的webview中却不正常,检查是否js中某些是否兼容,或者babel是否对他转化了。
2.webapp 在移动端的debugger工具(类似chrome):
1.AlloyLever (QQ团队开发的) https://github.com/AlloyTeam/AlloyLever
2.vConsole (微信团队开发的)功能较多些;https://github.com/leesx/vConsole
-webkit-line-clamp下多行文字溢出点点点…
.box {
width: 400px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
手机端让滚动页面变得流畅
网页回弹效果: -webkit-overflow-scrolling: touch;
为了使不支持这个属性的终端(特别是电脑PC)永远与IPhone类似的效果,我们可以使用iScroll
<script src="js/iscroll.js"></script> <script> (function () { "use strict"; if ("webkitOverflowScrolling" in document.body.style) { return; //该属性是否被浏览器所支持 } //遍历所有需要支持回弹滚动条的DIV容器 [].forEach.call(document.querySelectorAll(".cvbe-content"), function (v) { //竖向滚动,横向不滚动 new iScroll(v, {hScrollbar: false, vScrollbar: true, hScroll: false}); }); })(); </script>
给header中添加 groupid
在浏览器中打开 : http://api.leesx.com
在控制台尝试:
var headers = new Headers(
{
"Content-Type": "text/plain",
"gruopid": "aaabbbccc",
});
var formData = new FormData();
formData.append('name', 'lxa');
var config =
{
credentials: 'include', // 支持cookie
headers: {
"Content-Type": "text/plain",
"gruopid": "aaabbbccc",
}, // 自定义头部
method: 'POST', // post方式请求
body: formData // post请求携带的内容
};
fetch('http://api.leesx.com/conds/?worktype=iphnativetvplay&version=1.2.0&reqPath=conds%2F', config)
.then(response => response.json())
.then(data => console.log(data));