项目中的一些问题

Posted by Turingdo Studio on May 6, 2017

1.项目中遇到的一些奇葩问题

  1. includes方法 在安卓的移动端上webview中不兼容
  2. for of 方法 在安卓的移动端上webview中不兼容 ,babel转化后,还报错

  3. vclonsole.js在谷歌浏览器的浏览器中可以很好的调试,但是在安卓其他的webview中,没法用fiddle抓取请求包。

  4. 在安卓的webview中,动画失帧问题,最好给动画元素加上: transition-style:3d;

  5. 在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));