当前位置: 澳门新濠3559 > 编程 > 正文

移动端的开发方向逐渐向移动端网页倾斜,在页

时间:2019-12-27 17:08来源:编程
需求:想制作一个简单的手机端网页,在页面上能够实现输入数据,计算后输出结果的效果。计算公式比较简单,都是初中级别的,最后要将这个网页生成二维码,手机扫码后就可以实

需求:想制作一个简单的手机端网页,在页面上能够实现输入数据,计算后输出结果的效果。计算公式比较简单,都是初中级别的,最后要将这个网页生成二维码,手机扫码后就可以实现在手机端完成计算~这个应该怎么做呀,求大神们给些思路和实现方法

如何进行移动端的页面开发

应该说,移动端的开发是伴随着HTML5的兴起而出现的,2007年第一款iPhone诞生,2009年HTML5这个名词第一次登上“舞台”。当时的移动互联网开始逐渐兴起,发展到今,移动互联网已经和人们的日常生活密切相关。作为开发者,对于一个崭新的事物,一直在尝试的“路上”,到底最好的开发方式是什么?本文介绍了从移动端诞生到现在,自己探索到的开发方法,并配以相应知识点,欢迎跟大家沟通、分享。

最近做了个获取Kindle特价书的app(https://www.coolapk.com/apk/167660),
使用了jsoup来解析亚马逊的html代码,觉得很强大,遂分享一下。

初次接触移动端,绝对单位的使用

自己接触移动端开发是在2012年,那时候比较新潮的是制作WEB APP。什么是WEB APP呢?所谓的WEB APP就是用网页模拟出原生语言(如iOS)开发的APP交互效果。虽然在表现层面上,HTML5表现突出,但不得不承认的是,在系统性能层面,WEB APP明显要差于原生应用(即Native APP)。这也就使得WEB APP这条路暂时性的被堵住了。

于是,移动端的开发方向逐渐向移动端网页倾斜。对于PC端,我们一直使用的是px(像素)进行代码的书写,但是到了移动端,需要面临不同的分辨率。在2012年的时候,自己和团队成员在写移动端的时候,由于是初次接触,还是在使用px(像素)作为单位。因为在2012年的时候,绝大多数的手机的屏幕大小都是320*480分辨率,所以,即便是使用像素作为单位进行移动端网页开发也是完全可以的。

关于视口的知识,可点击查看——移动端H5知识-视口viewport

如图:

横向百分比,纵向像素值

随着移动端的继续发展,在2012年9月,iPhone5上市,开始引领“特殊分辨率”的发展,于是,320*480分辨率的手机屏幕在整个手机市场当中占有的份额越来越少,各种各样的分辨率如雨后春笋般冒了出来。

此时我们再进行固定像素进行开发明显是不明智的。于是,我们开始采用百分比(相对度量单位)进行盒模型横向属性(width、左右内边距、左右外边距)的制作,使用em(相对度量单位)实现文字的处理。但盒模型纵向上还是使用固定像素作为单位。

但是,这种操作导致了一个问题——主要表现在img标签的处理上。对于图片来说,只需要设置横向百分比,纵向会自动等比例缩放。在列表页以及内容页还好,毕竟内容是自动撑开父级高度的;但是在首页或者二级页,但凡涉及到父级元素高度固定的盒模型,里面的img就会出现变形(压缩或者拉伸)的问题。

这个问题也是困扰了自己许久,但是一直没有找到一个非常好的解决办法。

澳门新濠3559 1

响应式布局

当自己还在纠结img的处理时,2013年,在北京流行起了一种新的技术——响应式布局。通过媒体查询,针对不同大小分辨率的设备,设置不同的样式。应该说,对移动端页面的开发帮助不大,原因在于,响应式的出现主要是因为我们希望一段代码能够同时适配PC端、平板电脑以及手机。由于三种平台的样式以及用户体验应该是迥然不同的,那么此时,我们就需要有“断点”,在不同位置,有不同的样式,而在两个“断点”之间的样式,则使用相对单位做“渐变性的过渡”。

应该说,响应式布局解决了典型的屏幕像素不同样式的问题,但是却依旧搞定不了之前的那个问题。

关于CSS3媒体查询的知识,可点击查看——移动端H5知识-CSS3媒体查询

效果

横向纵向均百分比

在横向百分比,纵向像素值的方法无效时,自己能够想到的就是纵向也设置为百分比了,但是却发现,盒模型属性在纵向上的一些设置上是存在问题的,如padding-top/bottom、margin-top/bottom等。而文本属性中line-height在设置百分比时也并不是按照当前元素高度计算的。

于是,横纵向均设置为百分比的方法就破灭了~

关于盒模型的一些问题以及背景的合理使用,可点击查看——移动端H5知识-百变盒模型以及移动端H5知识-背景的妙用

1、Jsoup

横向纵向rem

随着HTML5的发展,除了原来的em单位,又新增了rem单位。这两个单位都是相对单位。1em表示的是当前元素一个字体大小的尺寸;而1rem,也表示的是一个字体大小的尺寸,但是是针对html标签进行计算的。相比之下,rem的计算起来要简单很多。于是,自己尝试用rem解决横向以及纵向的设置,舍弃掉了百分比,发现还是挺不错的,算是兼容了绝大多数机型和浏览器。之后,在使用一款华为手机进行测试的时候,发现并不支持横向的rem。于是,又需要想办法啦~~~

介绍

jsoup 是一款Java 的HTML解析器,可直接解析某个URL地址、HTML文本内容。它提供了一套非常省力的API,可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据。

正解 —— 横向百分比,纵向rem

针对华为手机,我尝试了横向百分比,发现还是能够支持的,于是就折中了一下,横向使用百分比进行控制,纵向使用rem作为单位。此时能够实现所有浏览器的兼容。

地址

澳门新濠3559,Jsoup 官网:https://jsoup.org/

Jsoup 中文文档:http://www.open-open.com/jsoup/

优化正解 —— 横向百分比,纵向rem

在横向使用百分比,纵向使用rem时,会由于计算产生一定的误差,于是,运用学习过的一些HTML5技术,进行移动端页面的优化,例如,使用CSS3的盒阴影替换掉边框。而对于rem,在计算中通常是存在一定的字体误差的(会计算出小数点),此时正好接触了一下淘宝的移动端页面,看到了一个不错的JS框架——flexible.js,通过这个框架对页面进行处理,能够防止小数点的出现。

关于flexible.js框架的具体用法,可点击查看——移动端H5知识-处理rem小数点 flexible.js

导入

Eclipse 可以下载jar: https://jsoup.org/download

Android studio可以在Gradle中添加:

compile 'org.jsoup:jsoup:1.11.2'

优化正解2 —— 任性的使用固定像素来实现

上个月月初,发现网易移动端的制作方法有些特殊,查看代码时发现,网易采用了固定像素进行书写,而通过MetaHandler.js进行了页面的控制。最近尝试了一下,感觉还是挺不错的,兼容也是比较好的,不失为一种好方法。

关于MetaHandler.js框架的具体用法,可点击查看——移动端H5知识-固定像素的实现方法

简单使用

从一个Url中加载Document:

Document doc = Jsoup.connect("http://baidu.com/").get();

获取id为next的a标签:

Element next = doc.getElementById("next");

获取该a标签的href属性:

String nextUrl = next.attr("href");

具体使用方法可以看使用文档: http://www.open-open.com/jsoup/

2、上手

我们以亚马逊Kindle每周特价书为例,地址: https://www.amazon.cn/s/ref=sr_pg_1?rh=n%3A1852543071&sort=popularity-rank&ie=UTF8&qid=1511322011

在浏览器中打开网页(以chrome为例),可以看到如图:

澳门新濠3559 2

每周特价书页面

按F12查看源码,然后按Ctrl+shift+C,然后点击图书的区域,通过查找,我们可以看到如下的源码:

澳门新濠3559 3

网页源码

可以看出来,id为 “s-results-list-atf” 的ul标签,便是商品列表,class为s-result-item的li标签,便是列表item。

那么,我们可以写代码,用户获取所有商品的标签:

    Connection con = Jsoup.connect(url);
// UserAgent是发送给服务器的当前浏览器的信息。
// 这是我的电脑的chrome的userAgent。
con.userAgent("Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36");
// 获取所有的class 为 "s-result-item"的li标签。
Elements elements = document.getElementsByClass("s-result-item");
for (Element li : elements) {
   ...
}

我们展开每个item的li标签,继续查找,可以看到图片的信息:

澳门新濠3559 4

商品图片

则,我们可以写:

 Element img = li.select("img[alt=产品详细信息]").first();
 // 图片地址
 String imgUrl = img.attr("src");

商品标题和链接:

澳门新濠3559 5

商品标题

// 标题、链接
                    Element aTtile = li.select("a.s-access-detail-page").first();
                    String title = aTtile.attr("title");
                    String bookUrl = aTtile.attr("href");

以此类推,我们可以将本页面的图书图片、标题、链接、作者、评分、评分数量等信息,全部爬出来。同时,不要忘了,我们还要找到下一页的链接:

// 下一页
            Element aNextPage = document.getElementById("pagnNextLink");
            if (aNextPage == null) {
                mNextPageUrl = null;
            } else {
                mNextPageUrl = "https://www.amazon.cn" + aNextPage.attr("href");
            }

这样,我们在上拉加载的时候,就可以通过mNextPageUrl是否为Null,来判断是否还有下一页。

3、其他问题

这篇文章里,我演示的是电脑端网页,而我在app中用的是手机端网页,因为同样的链接,手机端网页比电脑端网页少100kb左右流量(不计算图片)。如果大家要在项目中使用,尽量使用手机端网页比较好一点。
那么,怎么让获取的网页为手机端的呢?
我们修改UserAgent为手机浏览器:

connection.userAgent(String userAgent);

比如我的小米Max2的Via浏览器的UserAgent为:

User-Agent,Mozilla/5.0 (Linux; Android 7.1.1; MI MAX 2 Build/NMF26F) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.83 Mobile Safari/537.36

记住,大多数网站的手机端和电脑端的Jsoup分析规则,是不一样的,大家要做区别。

4、总结

记得原来在学校学java的时候,写过一个百度搜索的小软件,可以获取百度搜索出来的结果的前十项,那时候还是用正则来一点一点匹配的。

而现在我们可以用Jsoup简单地实现这些功能,而且Jsoup最大的好处在于 可通过DOM,CSS以及类似于jQuery的操作方法来取出和操作数据,如果你对前端稍微懂点的话,操作起来基本没有什么学习成本的。

编辑:编程 本文来源:移动端的开发方向逐渐向移动端网页倾斜,在页

关键词: