[奇妙盒子]图片网站转App(优化版),附带完整设计教程

By | 2020年8月15日

前段时间完成了一个初版的图片网站转原生App的功能。这两天通过对多个图片网站的测试,发现了几个问题并做了相应的优化

优化功能

上个版本只能自动识别列表,对于下面这种情况就无法识别了

对于这类网站 : 进入图片详情页面不会将所有图片列出来,而是每个页面只显示一张,需要通过点击按钮切换到下一张。还要滑动页面才能看到完整图片。

希望达到的效果:  按照手机上的浏览习惯,点击一个图片集的封面 直接 进入类似系统相册的浏览页面,通过左右滑动切换图片,支持缩放。如此一来广告不见了, 沉浸式浏览图片, 让体验直接上升好几个level。

下面是手机上的最终效果

工程制作详解

接下来我将从零开始讲解这个工程的制作过程,保证你按照流程操作最终可以制作出上面的效果

首先创建新的工程之后, 进入编辑页面直接点击 网页解析 进入网页解析页面。这里我们解析的目标网页是该网站的手机壁纸模块 ‘http://www.win4000.com/mobile_0_0_0_1.html’ 。在地址栏输入该网址按回车键。

第一步: 抓取数据

等待网页加载完成(菊花停止转动),底部分析栏会列出所有识别出来的列表。点击不同列表查看数据可以很容易知道其对应于网页上哪一部分数据。这里“列表1”就是我们需要的壁纸列表。建议双击列表名称修改为”壁纸列表”,方便后面设置的时候能更快的找到它。

我们来简单分析一下列表的数据包含哪些内容。 主要看表头

  • “link1″: 表示点击图片之后跳转到新的网页的链接, 由标题+链接组成
  • “photo-src”: 表示图片的链接,可以直接将地址拷贝后在系统浏览器查看内容
  • ”photo-data-original”:  表示图片地址。通过查看内容发现这个才是我们需要的图片链接,上面那个只是占位图的链接。
  • “text”:  图片下面的标题

该网页底部有页码标签,点击第二页之后 链接变成了”http://www.win4000.com/mobile_0_0_0_2.html”,很明显链接中最后的数字”2“代表页码。

所以想要让”图片列表“支持翻页,我们需要勾选翻页按钮,并在后面输入翻页表达式 ”http://www.win4000.com/mobile_0_0_0_{+page}.html“。奇妙盒子中所有需要外部控制的数据都是以”{+page}”的方式填写,page可以替换成其他词。

点击保存。主页列表数据的获取就设置完成了

接下来是详情页面的数据

点击壁纸列表中任意一张图片,跳转到新的网页。我这里是 ”http://www.win4000.com/mobile_detail_172068.html“。

因为这个网页是由上个页面跳转过来,所以该链接跟上一页“图片列表”里的”link1“是有直接关系的。我们可以返回上一页查看link1的完整数据,发现标题后面跟着的数据就是这个链接,所以在详情页里我们可以直接复制地址栏中的链接,粘贴到动态路径中。表示地址栏中整个链接都是由上一页传递过来的。(大部分网站link1只给出相对路径 “/mobile_detail_172068.html”, 如果是这种,我们只需要把地址栏中尾部数据拷贝到动态路径中即可)

在详情页,请注意壁纸右侧有一个按钮,点击后会切换到下一张图片,然后链接地址变成了”http://www.win4000.com/mobile_detail_172068_2.html“, 很显然 链接最后那个数字就是控制图片翻页的。和上面一样。我们勾选翻页,然后输入翻页表达式 ”http://www.win4000.com/mobile_detail_172068_{+page}.html

这里比较特别的一点是我们只需要获取页面中间那张大图。而数据分析的结果只有列表。所以我们需要选中”手动选择元素“, 然后点击中间那张大图片。 这时”手动选择元素”后面多了一个标签,底部分析栏也多出了一个”单个元素”的项(右侧的图片就是你点击的图片的地址,你可以复制地址到浏览器确认是否是你点击的那张)。 如此设置完之后,即表示这个页面只获取中间那张大图,并且支持翻页。

假设这个页面大图总共可以翻页8次,最后“单个元素”提供给外部的就是一个包含8个图片链接地址的集合。

最后记得点击保存。详情页的数据获取就完成了

第二步:设置页面数据

关闭网页解析窗口,回到工程主编辑页面。选中左侧的主页。现在我们将要为这个页面添加控件并填充数据。

首先需要先设置页面数据。

什么是页面数据?

在第一步中我们设置了数据抓取。就好比你用猎枪捕获了猎物,之后你需要用容器装下这些猎物,方便后面交易。而这个容器必须和你的猎物匹配,因为你不可能用一个饭盒去装一头野猪。回到我们的主题,”页面数据”就是用来临时安放你抓取数据的地方。

这里有一些默认的数据

page: 如果本页面的列表具有分页功能,page会自动记录页码。主要是提供给网络请求。比如有些接口必须传入页码去获取数据

lastItemId: 如果本页面列表具有分页功能,lastItemId是最后一条数据的Id.主要提供给网络请求,因为部分网络请求的分页需要传入最后一条数据id

lastPageData: 如果这个页面是由其他页面跳转过来,而其他页面在跳转中设置了传递数据,这里将用来保存该数据

lastPageKeyStr: 其实是lastPageData中提取的一个关键字段。比如列表跳转,列表会传递点击项绑定的数据。如果数据庞大且复杂,而本页面只需要其中一个字段,则可以改为传单个字段。这样本页面直接使用lastPageKeyStr就更高效

pageData: 默认预留的一个数据。如果不设置则为空。

我们将用一个容器来存放网页获取到的壁纸列表。这里可以直接用pageData。选中pageData, 点击右侧编辑。 选择数据类型为网页数据, 网页页面选择 “手机壁纸主页”. 下面将列出该网页下所有列表数据模型。我们选中 “壁纸列表”,点击确认。 然后关闭“页面数据”.

第三步:添加控件,绑定数据

由于网格列表为收费控件,所以这里我改用普通列表显示(操作方法基本一样)。

拖拽列表控件到主页中。对右侧面板进行如下设置:

  1. 勾选右侧中的“全屏”让列表填充画布。
  2.  修改类型为”传统列表”
  3. 调整元素高度,我这里改成了80
  4. 设置数据获取。这里需要先设置页面事件。

点击“页面事件” – ”新建事件” – “网页解析”。 出现如下界面

选择数据对应的网页。点击添加按钮,将网页抓取的”壁纸列表” 数据 给到 临时存放这个数据的“壁纸列表”容器中,点击确定。然后继续对列表进行设置

5. 数据获取事件选择刚刚添加的页面事件。

6. 绑定数据:这里的列出的数据就是“页面数据”。列表数据必须为一个集合Array,选择”壁纸列表”

关于列表的数据设置下面截取了一张B站的图。分别对应了传统列表里的几个设置项。最初我是按这类模板设计的,后来发现有部分列表需要右标题(可以在记账本工程中查看效果), 所以后面增加了该项。任何一项只要不设置就不会显示。

这里我们只需要设置两个:图片、标题。其他都可以不用管。

图片这里设置为photo-original,标题为text

然后我们可以对列表外观做一个简单的调整,把封面宽度设置为100。

接下来新建一个页面,取名为“图片详情页”。即点击列表中一个单元格之后跳转到该页面查看图片详情。

这里我们需要的是一个图片浏览器。所以将页面设置为图片浏览器

暂时不做其他设置。我们先回到上一个页面(主页), 选中列表。在点击跳转那里选择刚才新建的”页面详情页”。传递数据默认是“传递绑定值”,所以我们不用改。到这里主页的所有设置就结束了

接下来我们可以专心设计详情页面了。

和上一页设置的顺序一样

Step 1: 设置页面数据。因为上一页我们设置了传递绑定值,所有这里我们可以看到 lastPageData变成了上一页中单元格里存储的数据。这里主要用到的是link,即点击封面之后跳转到一个新的网址。这是抓捕数据需要的一个动态路径。接下来还要用一个容器来存放抓取回来的数据,即多张图片的一个集合。这里比较特殊的是”单个元素”的数据模型没有列在模型列表当中,所以我们需要选择自定义模型。然后输入一个 { “imgs” : [“”]} ,了解Json数据的同学应该很容易看懂,这表示一个可以存放无数个链接地址的容器,它的名字叫 imgs。输入完成后,保存按钮高亮,点击保存即可

(PS:写教程时突然发现这里完全可以将”单个元素”存放在模型列表中,那样就不用自定义模型了。下个版本会修改。不过正好这里可以让大家了解自定义模型的使用)

Step 2: 添加“页面事件”,事件的作用是将捕获回来的数据放到我们设置的容器中。点击页面事件 – 网页解析。

  1. 选择网页“壁纸详情页”,
  2. 设置动态路径为lastPageData中的link1, 即上一页点击的那个链接
  3. 赋值数据点击添加。左边选择 ” 单个元素” ,右边选择”imgs”。这样设置后,通过网页解析出来的图片列表数据就保存到了我们设置的”imgs”中

Step 3: 将容器中的数据填充到页面控件中

这是一个图片浏览器。我们需要为它设置一个数据获取事件,选择刚才我们设置的事件, 即这个浏览器出现的时候就会去抓捕数据。然后设置图片数据,即数据抓取完之后,将imgs给到这个浏览器去展示。

到这里功能已经全部做完了,我们不要忘了做一个收尾工作。也就是切换工程的入口。否则你就没办法切换工程了,除非再传入一个新的工程包。

选择 “ 我的”, 拖入一个按钮,双击按钮,修改名字为“工程列表”. 在右侧选择事件一栏,选择事件“工程列表”.

到此为止, 整个工程就完成了。点击导出工程包。

你可以直接通过airDrop传到手机上用”奇妙盒子”打开查看工程。

你也可以通过qq或微信传到手机里,在文件的“其他应用打开”中选择”奇妙盒子”

最后附上本教程的工程包: 壁纸

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注