帮助UI工作人员生成图片静态页面

##介绍

ImagePageHelper.js是一款帮助运营或者美工同事实现简单图片页面的js库。

美工将网页效果图直接贴在HTML页面中，对于用户来说，显示效果和原生网页相同，缺点是没有动画效果。 不过对于某些只具有展示和跳转的简单网页还是可以接受，能够减轻前端的重复劳动。

使用ImagePageHelper.js, 可以设置同一图片中的多个区域的点击跳转，实现类似静态页面的跳转功能。 支持跳转到APP的对应Url，如果检查到用户没有安装APP，则跳转APPstore下载页面。 也可以跳转网页链接。

另外，ImagepageHelper.js还封装了不同操作系统的实现，现只支持IOS和Android。

##使用方法

首先需要引入ImagePageHelper.js文件到对应的HTML文档中

<script>path/subpath/ImagePageHelper.js</script>

引入文件之后，创建一个ImagePageHelper的实例对象，并运用该对象的initImagePage方法去初始化页面

var imageHelper = new window.baoTV.mobile.imagePageHelper(); imageHelper.initImagePage(imgId, dataSet, params, debugMode);

initImagePage方法有四个参数：

#####imgId: 图片在HTML文档中的id #####dataSet: 点击区域相关信息 #####params: 跳转url相关信息 #####debugMode: 是否开启debug模式

调用完initImagePage,就完成了对网页的设置，可以让图片网页实现静态网页的功能。

##数据结构 ###imgId

描述：HTML文档中图片的ID 类型：string

###dataSet 描述：点击区域相关信息 类型：array

结构：

dataSet = [ // APP 1 { appName: string, //app名称，一个页面支持多种app跳转，根据appName与其跳转路径做对应。 data: [ //区域1 { x: number, //区域左上角x值 y: number, //区域左上角y值 width: number, // 区域宽度 height: number, //区域高度 videoInfo: { // 点击区域跳转信息，里面的属性可以根据具体情况进行数量上的变化，属性名可根据实际情况自取，但是属性申明顺序要和模板填充顺序对应 seriesId : number, //属性举例，可根据实际情况变化 videoId: number //属性举例，可根据实际情况变化 //.... } }, //区域2 { x: number, y: number, width: number, height: number, videoInfo: { seriesId : number, videoId: number //.... } } //... ] }, //APP 2 { appName: string, data: [ { x: number, y: number, width: number, height: number, videoInfo: { seriesId : number videoId: number //.... } } //... ] } //... ]

例如：

var dataSet = [ { appName: "APP1", data: [ { x: 0, y: 0, width: 500, height:300, videoInfo: { seriesId: 1, videoId: 1 } }, { x: 0, y: 400, width: 500, height:300, videoInfo: { seriesId: 2, videoId: 2 } }, ] }, { appName: "APP2", data: [ { x: 0, y: 800, width: 500, height:300, videoInfo: { seriesId: 3, videoId: 3 } } ] }, { appName: "NOAPP", data: [ { x: 0, y: 800, width: 500, height:300, websiteUrl: "http://www.google.com" } ] } ];

###params 描述：跳转url相关信息 类型：object

结构：

params = { appStoreUrl : {}, // appStore下载app链接 iosAppUrlTemplete : {}, //跳转ios app url模板 androidAppUrlTemplete : {}} //跳转android app url模板 };

例如：

var params = { appStoreUrl : { app1: "http://app1.test.com", app2: "http://app2.test.com" }, iosAppUrlTemplete : { app1 : "DemoApp1://seryId=null&videoId=null&action=playVideo", app2 : "DemoApp2://seryId=null&videoId=null&action=playVideo" }, androidAppUrlTemplete : { app1 : "DemoApp1://series/null/videos/null", app2 : "DemoApp2://series/null/videos/null" } };

appStoreUrl, iosAppUrlTemplete, androidAppUrlTemplete, 都是hash值，它们的key就是app的名字，跟dataSet中的属性appName相对应(两个值要一致)。 因为每个app都对应着不同的跳转链接和应用商店。

模板介绍 跳转app的url不是固定的，需要确定跳转视频的id等一系列信息，所以需要用模板参数和dataSet中的videoInfo合作生成。 模板参数提供android和ios app的跳转模板，动态的参数用null来代替，作为占位。 例：

ios模板："DemoApp://seryId=null&videoId=null&action=playVideo" android模板： "DemoApp://series/null/videos/null"

ImagePageHelper会帮助将动态信息替换掉摸板中的填充位。

如果dataSet的信息如下：

var dataSet = [ { appName: "app1", data: [ { x: 0, y: 0, width: 500, height:300, videoInfo: { seriesId: 1, videoId: 1 } } ] } ]

那么点击该区域所生成的跳转url如下

ios : "DemoApp1://seryId=1&videoId=1&action=playVideo" android: "DemoApp1://series/1/videos/1"

###debugMode 描述：是否开启debug模式 类型：boolean

##跳转网站链接模式

支持APP跳转的同时也支持网站链接的跳转。

将需要跳转网站链接的区域插入dataSet中，appName必须是"NOAPP"（全部字母大写）。这里面的data数据则都是跳转网站的区域信息。 所需要提供的信息有：

var dataSet = [ { x: 0, y: 0, width: 500, height:300, websiteUrl : "http://www.demo.com" }]

##Debug模式

将debugMode设置为true，则进入调试模式。

进入调试模式后，点击图片设置区域，会弹出对话框。 如果跳转区域所对应的是APP跳转的话，对话框中的信息为跳转的 APP Url，下载 APP Url。 如果跳转区所对应的是网页跳转的话，对话框中的信息为跳转的APP Url。

不会真的跳转。