##介绍
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。
不会真的跳转。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent