apicloud apicloud

注册
查看: 19872|回复: 52

[APP开发技巧] 仿网易新闻客户端启动页动态加载广告思路

 

主题:
35
帖子:
444
云币:
1293

APICloud粉丝连续签到100天模块开发者

[APP开发技巧] 仿网易新闻客户端启动页动态加载广告思路

 
19872 52 | 发表于 2015-12-27 00:56:36 |阅读模式 | |
本帖最后由 流风回雪 于 2016-2-21 00:31 编辑


先来张效果图,图中,启动页面的广告图是通过api.imageCache从网上加载进来的,
广告图片地址:http://img1.126.net/channel6/2015/ad/2_1224a.jpg
这也是最近两天网易新闻客户端展示的广告,被我抓包过来放在这个Demo中了。

概念:
首先要明确一个概念,不管是原生开发(iOS)还是APICloud开发的APP,都是不能在打包后修改启动图的,除非你的APP重新打包升级更新,以跟换启动图。

思路:
既然启动图无法更换,那网上那么多APP是如何做到启动页上动态的加广告呢?如网易新闻客户端那样。
其实,只要你细心就会发现,当你启动网易新闻客户端后立马显示在你眼前的是一个没有广告的启动图,一两秒后那些广告才显示出来的。
也就是说,它这个启动画面是分了两部分,一是真正的那个和APP一起打包的启动图,带广告那个其实是个背景图与前面真实启动图一样的“伪启动图”,
不过由于他们两个图片的logo一样(位置),所以大家还认为那是同一个启动图,并且还在上面每天不断的跟换广告
说到这里,想必大家都明白如何用APICloud做这种启动广告了,无非就是关闭真实启动图后,立马用frame显示一个真实启动图一样的背景,然后再在上面加一个广告图而。

问题:
如果我只需要做一个铺满整个屏幕的的启动广告图那没什么问题,目前的APICloud完全能做到。但问题来了,如何做一个像网易新闻客户端那种,下半截漏一个LOGO出来的启动广告页,并且这个启动广告页上的LOGO要与前面真实启动页上的LOGO对齐,不错位,让用户感觉不出来你这是两个页面?因为APICloud可以生成安卓、苹果不同平台,不同屏幕尺寸的APP,我要如何去适配?Q群里有人说用html+css+js什么的能做到。且前端高手@Delicate 也尝试过,无法适配各种尺寸的设备,LOGO会错位,还要放一张几M的启动图到APP中一起打包。

解决方案:
而我能想到的办法就是动态获取当前用户设备的启动图,他设备用多大尺寸、比例的图,我就用多大尺寸和比例的图来做广告页的背景图,这样就不会出现错位问题了。
那如何获取当前用户设备的启动图呢?目前的APICloud没法做到,于是我发帖求助,但官方没理睬,没办法,我只好自己搞自定义模块了。
现在模块提交到模块Store,需要漫长的等待官方审核。先弄个二维码和视频给大家体验下。
等模块好了大家就可以在启动页上赚钱了

模块文档:
http://docs.apicloud.com/%E7%AB%AFAPI/%E5%8A%9F%E8%83%BD%E6%89%A9%E5%B1%95/launchImage

二维码:

二维码Demo不是最新的,最新代码请下载附件

PS:
1、第一次启动后要等几秒钟,等广告图后台延迟获取并缓存,第二次启动广告就会展现出来了。
2、广告图可以点击。

视频:
http://v.youku.com/v_show/id_XMTQyNTQ3NzU1Mg==.html

Demo:


更新记录:
1、1月4日:由于之前提交的模块名首字母大写了,不符合规范,所以重新提交审核了,本帖的二维码与TestCase也更新了下。
2、2月21日:修复安卓上点开广告后,再返回来,中间内容不显示问题。




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

2

查看全部评分

喜马拉雅FM、懒人听书 APP出售!

主题:
10
帖子:
30
云币:
231
发表于 2016-1-9 22:21:24 |
本帖最后由 snuwlxkj 于 2016-1-9 22:29 编辑

  1.         function removelv(){
  2.                 setTimeout(function(){
  3.                         api.removeLaunchView({
  4.                             animation:{
  5.                                 type:'fade',
  6.                                 duration:300
  7.                             }
  8.                         });
  9.                 },300);
  10.         }
  11.         
  12.         function startAdvert(){
  13.                 var timestamp = Math.ceil(new Date().getTime()/1000),btime = new Date().getTime();
  14.                 var SAD = $api.getStorage('SAD');
  15.                 if(SAD && parseInt(SAD.enddate) >= timestamp){
  16.                         api.imageCache({
  17.                             url: SAD.imageurl,
  18.                             policy:'cache_only',
  19.                             thumbnail:false
  20.                         },function(ret,err){//回调时间成问题
  21.                             if (ret) {
  22.                                         if(new Date().getTime() <= btime + 3000){
  23.                                         openWin('startadvert','widget://html/startadvert.html',{pageParam:{adlink:SAD.linkurl,adimg:ret.url},animation:{type:'none'}});
  24.                                     }else removelv();
  25.                             }else removelv();
  26.                         });
  27.                         ~function(){
  28.                                 if(new Date().getTime() > btime + 3000){
  29.                                         removelv();
  30.                                         return;
  31.                                 }
  32.                                 setTimeout(arguments.callee,500);
  33.                         }();
  34.                 }else removelv();
  35.                 var params = ["a=startAdvert"];
  36.             api.ajax({
  37.                     url:ououHost + params.join('&'),
  38.                     method:'get',
  39.                     timeout:timeout,
  40.             },function(ret,err){
  41.                     if(ret){
  42.                             $api.setStorage('SAD',ret);
  43.                     }
  44.             });
  45.         }
复制代码
我这代码估计得打楼主脸了。。。
当然阅读这代码得有点js基础的人,代码详情我就不作解释,能够读懂的直接拿走。
调用代码直接在apiready里面执行startAdvert();函数就可以了,前提是app必须设置手动移除启动画面
startadvert.html页面很简单,就是显示缓存后的广告图片

主题:
51
帖子:
819
云币:
172
发表于 2016-1-6 03:34:29 来自手机 |
魅族这种奇葩分辨率还是有问题~~~~

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
35
帖子:
444
云币:
1293

APICloud粉丝连续签到100天模块开发者

 楼主| 发表于 2015-12-28 17:06:15 |
今晚整理模块提交
喜马拉雅FM、懒人听书 APP出售!

实习司机

UID:164493

主题:
1
帖子:
177
云币:
833
发表于 2015-12-28 15:19:41 |
文笔不错!

主题:
0
帖子:
62
云币:
1481

APICloud粉丝连续签到100天签到党

发表于 2015-12-28 17:24:42 |
不错,希望有更多的技术分享出来

主题:
71
帖子:
212
云币:
170
发表于 2015-12-28 17:27:41 |

不错,图片右上角上面能加一个倒计时就好了。。。

主题:
35
帖子:
444
云币:
1293

APICloud粉丝连续签到100天模块开发者

 楼主| 发表于 2015-12-28 17:50:20 |
李子木 发表于 2015-12-28 17:27
不错,图片右上角上面能加一个倒计时就好了。。。

这功能html+js自己开发即可,很简单的。我那模块只是用来获取启动图而已。目前是为了logo不错位。
喜马拉雅FM、懒人听书 APP出售!

主题:
71
帖子:
212
云币:
170
发表于 2015-12-28 17:54:24 |
流风回雪 发表于 2015-12-28 17:50
这功能html+js自己开发即可,很简单的。我那模块只是用来获取启动图而已。目前是为了logo不错位。 ...

哎,我前段不行,你这个功能我用UIScrollPicture模块已经实现了,就是到倒计时不会弄。。。

转正司机

UID:134779

主题:
27
帖子:
196
云币:
571
发表于 2015-12-28 18:16:37 来自手机 |
不错,感谢分享

主题:
35
帖子:
444
云币:
1293

APICloud粉丝连续签到100天模块开发者

 楼主| 发表于 2015-12-28 18:38:59 |
李子木 发表于 2015-12-28 17:54
哎,我前段不行,你这个功能我用UIScrollPicture模块已经实现了,就是到倒计时不会弄。。。 ...

UIScrollPicture 不是做轮播图的吗?也能搞启动广告页?
喜马拉雅FM、懒人听书 APP出售!

主题:
51
帖子:
206
云币:
112

一周年圣诞节

发表于 2015-12-28 18:42:23 |
感谢分享
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表