前端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都是可以点击的。

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

3 ajax传data

  在提交表单的时候,有时候需要自定义data里的数据,如果我们传的数据中带有字符串,要用双引号来声明。

  这是因为在js中,声明字符串用单双引号都无所谓,但是在其他oo语言中,字符类型的格式定义格外严格,必须使用双引号。使用单引号会报错。

4 剪切板

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

  以前浏览器有个window.clipboard可以调用,不知道为什么现在成undefined了。

  然后找到一个名为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,这样问题解决了,但是并不知道是不是最好的解决方法~欢迎指正。

7. ajax返回json

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

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

(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,如果修改的地方很多,后台就要浪费很多时间在重写模板上,也不知道有什么比较好的方法。

时间: 2024-10-26 19:44:56

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

记一次SpringBoot 开发中所遇到的坑和解决方法

记一次SpringBoot 开发中所遇到的坑和解决方法 mybatis返回Integer为0,自动转型包空指针异常 当我们使用Integer去接受数据库中表的数据,如果返回的数据中为0,那么Integer便为null,这时候将Interger自动转型为int,则会出现空指针异常 这个时候,我们可以在Service层对Integer的数据进行判断,如果为空,就把它复制为0 // 在pojo中,如果Integer canJoinNun为null 就把值设置为0 if (publishMsg.getC

java新手在实际开发中所遇到的问题及解决方法小结,(持续更新遇到的问题)

?从事开发一年有余,想到自己初入公司时的困窘,在此把我记忆中在实际开发中所遇到的问题做一总结性的小结,为自己以后方便查阅,以及后来者遇到相同问题时解决更加方便快捷,希望大家集思广益把自己遇到的问题及解决方法写出来,添砖加瓦.为后来者给予一点帮助! 实用案例 如何使用Java实现汉诺塔问题 Java中定时器的使用方法 Java打印杨辉三角的具体实现代码 Java中如何实现分页功能 Java读取大文件如何高效率 Java中生成随机数的几种方法 Java zip压缩单个文件实现方法 如何计算Java对

Python和Ruby开发中源文件中文注释乱码的解决方法(Eclipse和Aptana Studio3均适用)

Eclipse的设置(Aptana Studio3与Eclipse基本完全相同,此处略) window->preferences->general->editors->text editors->spelling->encoding->UTF-8 window->preferences->workspace->text file encoding->UTF-8 打开eclipse安装目录->eclipse.ini,末行加上"

Atitit 软件开发中&#160;瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义

Atitit 软件开发中 瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义 首先我们指明,任何一种行动以及教派修行方法都有他的多元化,只看到某一方面,就不能很好的评估利弊,适不适合自己使用,犹如盲人摸象,虽然都对,但是并不完整 1. 瓦哈比教派的核心思想1 1.1. 归一化,反对多神..反对邪教与不良的 修炼方式1 1.2. 规范化,标准化最佳实践 圣训立国,依法治国1 1.3. 主张整肃社会风尚,净化人们的"心灵1 1.4. 倡导团结,团队建设1 1.5. 回归传统,轻量化1 2

node开发指南中的microblog项目中遇到的问题总结及解决方法

1      使用connect-mongdo时,报错:Cannot read property 'Store' of undefined 解决: require('connect-mongo')的时候加一个参数express,如下: var express = require('express'); var MongoStore = require('connect-mongo')(express), 2      使用app.use(express.router(routers)) 提示 h

小程序云开发调用HTTP请求中got第三方库使用失败解决方法

小程序云开发调用HTTP请求中got第三方库使用失败解决方法 错误代码 {"errorCode":1,"errorMessage":"user code exception caught","stackTrace":"The \"original\" argument must be of type function"} 替换方案 // 云函数入口文件 const cloud = req

关于微信网页/H5游戏开发中二维码无法识别的解决方法

我接触微信H5开发已经有一年多了,做过很多案例也遇到很多的问题.今天我把困扰我半年之久的问题分享出来,也就是关于微信网页/H5游戏开发中二维码无法识别的解决方法. 我在百度搜索了许久,关于微信H5网页/游戏开发问题以及解决方案的相关文章少之又少,在相关前端交流群中问别人,一问三不知,平时这些群就会上班吹牛逼,真正交流问题的人少又少,真是揪心啊,最后还是得靠自己解决了. [这里,我先举个栗子] 上面这个页面,相信从事微信H5开发的人应该很熟悉,就是常见的分享到朋友圈的页面,通常以[引导分享图标]+

c++buider2010 中.dfm无法打开设计界面的解决方法

最近一个同事离职,部分软件交接给我,基本都是C++buider2010环境开发的,可惜我还不太会用C++buider,记得昨天他说有个软件不知道被他怎么倒腾的无法看到设计界面的,他暂时也没有办法,所以在他离职一天后的今天,我决心要解决这个问题,以下是经过我验证的解决方法,希望能够帮助遇到相同为题的朋友,同时也是为了做好笔记 c++buider2010 中.dfm无法打开设计界面的解决方法: 这个问题是由于头文件引起的,例如你的头文件名为     "Hello.h"那么你可以用几十本打开

Android开发环境搭建时遇到问题的解决方法

Android开发环境搭建时遇到问题的解决方法 错误1: The connection to adb is down, and a severe error has occured. [2013-08-31 16:11:56 -com.qihoo.subject] You must restart adb and Eclipse. [2013-08-31 16:11:56 - com.qihoo.subject] Please ensure that adb is correctly locat