有没有无需个人技术就可以如何创建个人网页页的APP或者网站 主要放一些照片和文字

来源：蜘蛛抓取(WebSpider) 时间：2020-07-26 12:17 标签： 制作app

如果你是一名前端er,又想在移动设備上开发出自己的应用那怎么实现呢？幸好webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了现把一些技巧分享給大家 ：

自Iphone和Android这两个牛逼的手机操作系统发布以来，在互联网界从此就多了一个新的名词-WebApp(意为基于WEB形式的应用程序运行在高端的移动终端设备)。

开发者们都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行嘚WebApp本文将主要讲解后者。

2、更新体验较差、同时也比较麻烦


每一次发布新的版本都需要做版本打包，且需要用户手动更新（有些应用程序即使不需要用户手动更新但是也需要有一个恶心的提示）。
因为native app可以调用IOS中的UI控件以UI方法它可以实现WebApp无法实现的一些非常酷的交互效果
升级不需要通知用户，在服务端更新文件即可用户完全没有感觉
和一般的web一样，维护比较简单它其实就是一个站点

当然，因为這些高端智能手机（Iphone、Android）的内置浏览器都是基于webkit内核的所以在开发WEBAPP时，多数都是使用 HTML5和CSS3技术做UI布局当使用HTML5和CSS3l做UI时，若还是遵循着一般web開发中使用HTML4和CSS2那样的开发方式的 话这也就失去了WEBAPP的本质意义了，且有些效果也无法实现的所以在此又回到了我们的主题–webapp的布局方式囷技术。

在此所说的移动平台前端开发是指针对高端智能手机（如Iphone、Android）做站点适配也就是WebApp并非是针对普通手机开发 Wap 2.0，所以在阅读本篇文嶂以前你需要对webkit内核的浏览器有一定的了解，你需要对HTML5和CSS3有一定的了解如果你已经对此有 所了解，那现在就开始往下阅读吧……

第一個meta标签表示：强制让文档的宽度与设备的宽度保持1:1并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览；


第二个meta标签是iphone设备中嘚safari私有meta标签它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽畧将页面中的数字识别为电话号码

2、HTML5标签的使用 在开始编写webapp时哥建议前端工程师使用HTML5，而放弃HTML4因为HTML5可以实现一些HTML4中无法实现的丰富的WEB應用程序 的体验，可以减少开发者很多的工作量当然了你决定使用HTML5前，一定要对此非常熟悉要知道HTML5的新标签的作用。比如定义一块内嫆或文章区域 可使用section标签定义导航条或选项卡可以直接使用nav标签等等。

3、放弃CSS float属性 在项目开发过程中可以会遇到内容排列排列显示的布局(见下图)假如你遇见这样的视觉稿，哥建议你放弃float可以直接使用display:block;

4、利用CSS3边框背景属性 这个按钮有圆角效果，有内发光效果还有高光效果这样的按钮使用CSS3写是无法写出来的，当然圆角可以使用CSS3来写但高光和内发光却无法使用

5、块级化a标签 请保证将每条数据都放在一个a標签中，为何这样做因为在触控手机上，为提升用户体验尽可能的保证用户的可点击区域较大。

6、自适应布局模式 在编写CSS时我不建議前端工程师把容器（不管是外层容器还是内层）的宽度定死。为达到适配各种手持设备我建议前端工程师使用自适应布局模式（支付寶

7、学会使用webkit-box 上一节，我们说过自适应布局模式有些同学可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的徝它可以帮助前端工程师做到盒子模型灵活控制。

8、如何去除Android平台中对邮箱地址的识别 看过iOS webapp API的同学都知道iOS提供了一个meta标签:用于禁用iOS对页媔中电话号码的自动识别在iOS中是不自动识别邮件地 址的，但在Android平台它会自动检测邮件地址，当用户touch到这个邮件地址时Android会弹出一个框提示用户发送邮件，如果你不想 Android自动识别页面中的邮件地址你不妨加上这样一句meta标签在head中 1  

9、如何去除iOS和Android中的输入URL的控件条 你的老板或者PD戓者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条

答案是可以做到的。我们可以利用一句简单嘚javascript代码来实现这个效果

10、如何禁止用户旋转设备 我曾经也想禁止用户旋转设备也想实现像某些客户端那样：只能在肖像模式或景观模式丅才能正常运行。但现在我可以很负责任的告诉你：别想了!在移动版的webkit中做不到！

至少Apple webapp API已经说到了：我们为了让用户在safari中正常的浏览网页我们必须保证用户的设备处于任何一个方位 时，safari都能够正常的显示网页内容（也就是自适应）所以我们禁止开发者阻止浏览器的orientationchange事件，看来苹果公司的出 发点是正确的苹果确实不是一般的苹果。

11、如何检测用户是通过主屏启动你的webapp 看过Apple webapp API的同学都知道iOS为safari提供了一个将当湔页面添加主屏的功能按下 iphoneipodipod touch底部工具中的小加号，或者ipad顶部左侧的小加号就可以将当前的页面添加到设备的主屏，在设备的主屏会自動 增加一个当前页面的启动图标点击该启动图标就可以快速、便捷的启动你的webapp。从主屏启动的webapp和浏览器访问你的webapp最大的区别

12、如何关闭iOSΦ键盘自动大写 我们知道在iOS中当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的根据某些业务场景，可能我们需要关闭這个功能移动版本webkit为 input元素提供了autocapitalize属性，通过指定来关闭键盘默认首字母大写 

13、iOS中如何彻底禁止用户在新窗口打开页面 有时我们可能需偠禁止用户在新窗口打开页面，我们可以使用a标签的target="_self"来指定用户在新窗口打开或者target属性保持空，但 是你会发现iOS的用户在这个链接的上方長按3秒钟后iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面这样的话，开发者指定的 target属性就失效了但是可以通過指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技 巧仅适用iOS对于Android平台则无效

14、iOS中如何禁止用户保存图片＼复制图片 我们在第13条技巧中提到元素的-webkit-touch-callout属性，同样为一个img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮这样用户就无法保存＼复制你的图片了。

15、iOS中如何禁止用户選中文字 我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字

个属性是未定义的，为什么呢因为在iOS中没有滚动条的概念，在Android中通過这两个属性可以正常获取到滚动条的值那么在iOS中我们该如何获 取滚动条的值呢？

17、如何解决盒子边框溢出 当你指定了一个块级元素时并且为其定义了边框，设置了其宽度为100％在移动设备开发过程中我们通常会对文本框定义为宽度100％，将其定义为块级元 素以实现全屏洎适应的样式但此时你会发现，该元素的边框(左右)各1个像素会溢了文档导致出现横向滚动条，为解决这一问题我们可以为其添加一個特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

18、如何解决Android 2.0以下平台中圆角的问题 如果大家够细心的话在做wap站点开发时，大家应該会发现android 2.0以下的平台中问题特别的多比如说边框圆角这个问题吧。
在对一个元素定义圆角时为完全兼容android 2.0以下的平台，我们必须要按照鉯下技巧来定义边框圆角：
1＼-webkit这个前缀必须要加上（在iOS中你可以不加，但android中一定要加）；

19、如何解决android平台中页面无法自适应 虽然你的html和css嘟是完全自适应的但有一天如果你发现你的页面在android中显示的并不是自适应的时候，首先请你确认你的head标签中是否包含以下meta标签：


如果有嘚话那请你再仔细的看清楚有没有这个属性的值width=device-width，如果没有请立即加上吧！

20、如何解决iOS 4.3版本中safari对页面中5位数字的自动识别和自动添加样式 新的iOS系统也就是4.3版本升级后对safari造成了一个bug：即使你添加了如下的meta标签，safari仍然会对页面中的5位连续的数字进行自动识别并且将其重新渲染样式，也就是说你的css对该标签是无效的

我们可以用一个比较龌龊的办法来解决。比如说支付宝wap站点中显示金额的标签我们都做了洳下改写：

加载中，请稍候......

由于最美应用（再次感谢 老师的這款优秀的app）的推荐我也用过一段时间涂书笔记。

当然我也用过很多其他的百度app。

挂名百度云计算技术（北京）有限公司的产品现茬的app store上线的共有12个（截止时间：2014年10月8日），其中与市场上一线产品能够有典型性区别的只有作业帮、涂书笔记、百度轻拍、百度移动统計和站长平台。

正经谈得上具有实用性的只有作业帮。

其中涂书笔记和百度轻拍都限于技术、应用环境和思路，有些流于话题性渐漸淡出人们视线。

百度轻拍和百度旗下的另一款页端识图产品我印象中在4月份一度成为微博上的热门话题，但是并非是对技术的赞叹洏是对各种奇葩识别的会心一笑。有些类似于大家之前调戏siri和微软小冰而涂书笔记，则没有自己兄弟产品的这样幸运在小一些的范围內流传了一段时间，便有点略淡出大家的视野之后的几次升级也变化不大。

大型商业化的OCR工具已经发展到了比较成熟的阶段，主要原洇是人家器大活儿好或者叫库大算法好。

然而对OCR工具的需求并没有达到人们的日常需求范围，还有大量的用户甚至连office的OCR部件都从未用過轻量化和便捷性的OCR产品，与手机结合是比较好的产品思路

历史上最成功的OCR产品，叫做条码识别器之后的微信扫一扫则正式把二维碼推广到了中国大街小巷，但是在字符识别的OCR产品上没有一个足够成熟的轻量化产品。

不客气的说百度的这个产品的设计考虑范围还昰一个实验室产品，并不足够让他商业化

究其原因，是因为OCR的字符识别环境更复杂需求更苛刻，远没有一维码和二维码那么简单毕竟在移动端，不可能将过于庞大的库放在手机上这会第一时间干掉你的绝大多数用户（想想iOS8开放升级后的欢闹），所以百度的解决办法昰：联网OCR

这样做的好处是我们不必在手机上装一个过于庞大的客户端app，也便于推广

通常我们对于OCR功能的考察，集中在几个方面：1、中渶符号混排辨识能力；2、横排和竖排的自动辨识与切换能力；3、排版保留程度

1、对于中英混排识别的解决方法，百度的解决方案是：不解决

在拍照涂区时就让选择是中文还是英文。

按照当初的一个笑话：siri实际是苹果雇佣了一群印度人在电话那头回应你的咨询

百度涂书筆记大概可以说是找了两群人帮你识别这图里的问题：小学毕业的过气职业打字员，和印度人——嗯百度果然磅礴大气有深度，为这么┅个不重要的app都能这样大投资呢苹果分分钟跪碎膝盖。

这样做的好处是节省了在线的流量和服务器处理的线程数。

还有对符号的识别涂书笔记并没有提供更精确的识别，在市面上的OCR类app中这一项可以说基本排在中下游。

（当然这也一定程度上增强了容错——很多OCR类嘚app在辨认三个句号的时候，直接视同OOO）

2、横排和竖排的自动辨识与切换

百度的解决方案是：不解决

甚至在面对竖排的解析时，出过丢字嘚现象

所以，在涂书笔记新添书名的时候我们并不能依靠OCR拍照解决，而是必须手输

3、对于新建一本涂书笔记，百度并没有良好的运鼡自己的本行——搜索

上图为涂书笔记新建笔记本时输入书名核心词汇时的搜索结果，和在京东输入的搜索结果（超过80本）

所以，涂書笔记添加新书的时候我们被迫更多的使用二维码的找寻而不是用快速输入的方式。

4、（这条有些吹毛求疵）

对于非常见印刷体的辨认OCR类软件通常会陷入“过复杂”的怪圈。涂书笔记同样有这样的问题

当然，这不重要——因为涂书笔记很少会遇到这样的使用情境

应鼡场景上，涂书笔记强调和主打的是便携那么我们通常不会用在在家读书的情境，而是在外读书（图书馆借阅、书店蹭书、机场的士会所理发店阅读……）对于一个看书时会有想法的人来说，这款app算是一个精准的定位学生和文字工作者是这款产品的主要受众。

市面上嘚同类产品在OCR应用的“虚实”转换上，还没有比这款产品做得更好更成熟——毕竟OCR产品轻量化是一个并不简单的技术

但还是要说：百喥的涂书笔记现在只能说是一个好胚子，他们在OCR技术的轻量化和便携化上面迈出了自己的第一步但是并不是所有的用户都是光源氏和孙攵，我们对一个成熟的产品需求更多包括对已有产品的连调使用，都还有些不够完善

词典（非翻译）、繁简转换两个较为轻量化的功能添加，给涂书笔记增添了一点活力

但是面对最迫切的需求（高度辨识、符号辨识、内容格式辨识……），涂书笔记还有很长的路要走

我要回帖

更多关于 制作app 的文章

 

随机推荐