用“小盒子”制作一个看片神器

因为内容会涉及到版权问题，所以这里只讲解制作流程，不会共享出mbx工程包。仅供学习交流

第一步 网络数据设置

和上一篇文章一样，这里的数据来自于网络，所以需要把用到的接口先添加到Http Tool中。这里涉及到的接口主要有四个 "视频列表" , "搜索", "轮播图", "视频详情"。

网络接口的设置和上一篇中基本没有差别，仅仅只是url变了。

这里只说明一下页面跳转部分，因为点击视频封面之后要跳转到对应的详情页面进行播放，所以需要将视频的id传给下一个页面。

传递参数有两种情况

1. 点击列表中的一个元素
   由于目前列表都是以模板的形式设置，所以只需要设置跳转的页面，默认就会将当前点击的数据传给下一个页面

   
   截屏2020-04-25下午10.55.22.png
   

   这时候你可以点到"播放详情"页面查看页面参数

   
   截屏2020-04-25下午10.57.19.png
   会发现默认参数"lastPageData"里已经有数据了

2. 点击非列表控件（按钮或者轮播图)
   这时候需要添加一个跳转事件，并设置传递数据。

   
   截屏2020-04-25下午11.01.05.png
   

   传递的数据可以设置为当前页面获取到的网络数据或者某个控件绑定的数据

设置完成之后，可以去目标页面查看“lastPage"，如果有值说明设置成功了

第二步 本地数据设置

比上一个demo稍微复杂一点的是这里要用到本地存储。主要功能是视频的"播放历史" 和 “收藏" 。所以需要我们建一个数据库。

这里我只设计了一个简单的数据库，其实主要包含视频id和title即可

截屏2020-04-25下午1.59.23.png

1. 添加收藏功能

首先需要添加一个页面初始化的事件。点击页面空白处，选择右侧的“事件”标签，添加你事先设置好的网络请求。（即进入页面的瞬间触发网络请求获取数据）

接下来添加一个”数据库事件"

截屏2020-04-25下午11.10.58.png

这些字段有些是可以不用设置的。但是必要的几个参数一定得有，比如vodid。

接下来用一个按钮来触发这个事件。

截屏2020-04-25下午11.13.37.png

有添加收藏就应该同时有取消收藏的功能，所以我们要对这个按钮进行特殊设置

截屏2020-04-25下午11.15.34.png

按钮的设置中有一个“支持选中”的配置。勾选后，按钮将支持两种状态 “普通”和“选中"。可以为”选中"状态设置文字和图片。另外这个状态依赖于数据库中是否存在这条数据。所以我们在页面初始化事件中要添加一个"查询数据库"的事件，然后绑定值设置为查询结果即可。添加"删除收藏"事件，在选中状态下点击按钮会触发”删除收藏“的事件

2。 收藏列表和历史列表
上一步中在进入页面时会触发”添加播放历史"的事件。点击“收藏”会触发“添加到收藏"的事件。所以数据库中目前已经有数据了，现在只需要将数据读取出来显示即可。

添加查询收藏的事件

截屏2020-04-25下午11.25.31.png

查询事件的设置比较简单，选择数据库。将查询结果给到pageData即可。

最后添加一个列表，并将pageData的值对应的给到模板数据即可

截屏2020-04-25下午11.28.38.png

下面是app效果

RPReplay_Final1587793969.2020-04-25 23_33_56.gif

最近琐事较多，文章写的比较仓促。计划是五一之后再专门写教程，大家先凑合着看吧