前端webview开发中遇到的一些问题及其解决方法

最近作了一个webview中的兑换页面，原本觉得很简单，想不到遇到了远远超出预期数量的BUG，记下来，以备后患。

1 inline-block元素折行

  BUG描述：如今我有三个DIV，要在一列等宽排列，设定宽度为33.33333%，想象中应该是正好充满一列。

然而事实是，div折行了=。=，div之间还出现了一个缝隙。

这个问题很常见，出现的缘由是浏览器在解析html时认为两个div之间有空格，而一个空格的占位是1/4em。

通常解决的办法是设置父元素font-size=0,而后再给子元素设置字体。

这种方法在标准浏览器中不会出现错位问题，可是在安卓2.3及如下的版本中，div仍然会折行！

最终解决方案是在html去掉全部的空格，like this

虽然这样代码看起来会很丑~

2 blur和tap事件触发顺序

　　这可能也是一个比较常见的问题。

      逻辑是这样的：在输入框blur的时候来验证某个div是否能够点击。在tap这个div的时候给它添加样式。需求上应该是先触发blur，再触发tap。

　　问题来了，js中是tap先触发，而后blur才会触发，这样就致使不管blur验证是否经过，div都是能够点击的。

　　事件触发的顺序是这样的：touchstart→→touchmove→→touchend→→tap→→焦点这个时候转移→→blur→→activate(blur)→→200ms后click

      解决的方法牺牲了一些用户体验，用click来替代tap。

　　经头儿的指点，了解到blur这个方法不经常使用的缘由，除了input检查自身外不多用到blur。更好的方法是不要绑定blur事件，而是给body监听tap事件，经过event.target和event.currentTarget来找到触发事件的元素。

3 ajax传data

　　在提交表单的时候，有时候须要自定义data里的数据，若是咱们传的数据中带有字符串，要用双引号来声明。

　　这是由于在js中，声明字符串用单双引号都无所谓，可是在其余oo语言中，字符类型的格式定义格外严格，必须使用双引号。使用单引号会报错。

　　正确的作法是将data由json转换为字符串：JSON.stringify(data)

4 剪切板

　　需求是点击一个按钮，而后将一串字符复制到系统的剪切板中。

　　之前chrome有个window.clipboard能够调用，不知道为何如今成undefined了。另外这个方法的话自己只有IE和firefox才支持。

　　而后找到一个名为ZeroClipboard的插件，是用flash来实现的。若是是在pc端，这个插件却是能够一用。可是考虑到ios并不支持flash，这个需求最后放弃了。

 

5 sass编译错误

　　这个问题其实很蠢，若是project绝对路径包含中文，sass在编译时就会报以下错误，切记切记~

      

6 a标签延迟添加attr

 　　这个bug是webview在和客户端进行交互时候出现的。

<a href="lock://back" class="back">返回</a>

和客户端约定的是在页面发生跳转时，客户端去捕获这个连接，而后xxxx。如今这个页面中有一个内页，在内页打开时a标签绑定的事件是返回到外页。

我一开始想的是在打开内页以后移除a的href属性，回到外页后再添加上。而后问题也来了，我在回到外页后加上href属性，a标签依然触发了跳转事件。

我尝试用touchend事件来替代tap，无效。

最后是在回到外页以后，给 a添加href的代码加上setTimeout，这样问题解决了，可是并不知道是否是最好的解决方法~欢迎指正。

更新一下，这里出现问题的缘由是我先阻止了默认事件，而后再给a添加href，添加以后其实阻止默认事件已经无效了，因此href连接生效，跳转。

这样写很容易解决了

$('.back').on('tap',function(e){
        $('.back').attr('href','lock://back');
        e.preventDefault();
      })

 

 

7. ajax返回json

   在ajax请求成功返回response后，js默认response是一个字符串。要将它解析为json格式有两种方法。

  (1)在请求时添加参数 dataType: JSON  //(jquery)

  (2) 使用JSON.parse方法

　　

var _response = JSON.parse(response);

 

8 popup 画面模糊

   我用css3作了一个popup，弹窗有一个scale的transition。遇到了一个很痛苦的问题，困扰了本身好久。

　在小米手机中(不管二三红不红)，在动画进行和结束时，弹窗会变的很模糊，能够认为浏览器是认为scale以前(scale(0,0,0))的大小才是元素的原始大小，而后在此基础上进行缩放。

   查了好多文档都没有结果，最后仍是我头儿英明，解决方法时候在动画结束后须要手动移除scale的class,弹窗显示就正常啦~

9 浮点运算

   这是js相传已久的bug了，js在进行浮点运算时候会出很奇葩的bug.

　　

 alert(4.2+9.2)  // 13.399999999999999

解决方法有不少，根据需求，我这里用了最简单最省事的tofix().

---

10 回头看本身的代码

  (1)由于是静态的，因此若是有复用的html只能笨拙的复制粘贴。若是时间足够的话，我会尝试用handlebars来模板化本身的代码。

  (2)js也有不少地方是能够复用的，若是用prototype来写能够节省一半的代码。出现这问题是水平不够。

  (3)耐心不够。当测试给我返回一堆一堆bug的时候，我以为浮躁，只想把bug赶忙解决了，不能跳出去看本身的代码。下场是在解决一个旧bug后又致使了一个新的bug，不管是对测试仍是本身，工做效率都大大下降了。

     不管何时，都要keep calm and carry on

目前就这么多了~

 

ps：

协同开发感受是很难解决的问题。

此次项目后台用的python，由于时间很紧，因此前端后台同时开发。

形成的问题是我这里每次修改一个地方，后台都要跟着修改本身的template，若是修改的地方不少，后台就要浪费不少时间在重写模板上，也不知道有什么比较好的方法。