专业版应用开发指南

跳转到: 导航, 搜索
(移动端Html5支持)
(技术开发)
 
(未显示2个用户的45个中间版本)
第46行: 第46行:
  
 
===测试用户===
 
===测试用户===
#应用在未通过审核之前,不能大范围推广,您可以设置最多15个测试用户来测试尚在开发中的应用。
+
 
 +
1、应用在未通过审核之前,如需进行完整测试,请向qyapps@staff.sina.com.cn申请相应的企业应用测试账号,用于相应授权、传参等的测试。
 +
 
 +
 
 +
2、应用在未通过审核之前,不能大范围推广,您可以设置最多15个测试用户(大多数情况下是个人用户)来测试尚在开发中的应用。
 
{{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkq2ajxyj.jpg}}
 
{{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkq2ajxyj.jpg}}
 
*相关内容填写完毕后,请点击保存按钮进行保存。
 
*相关内容填写完毕后,请点击保存按钮进行保存。
  
 
==技术开发==
 
==技术开发==
 +
 
应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。
 
应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。
 
App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。
 
App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。
第65行: 第70行:
 
{{center|http://www.sinaimg.cn/blog/developer/wiki/kfzn_01_s.png}}
 
{{center|http://www.sinaimg.cn/blog/developer/wiki/kfzn_01_s.png}}
  
===专业版应用框架会POST给您的应用以下信息:===
+
===专业版应用框架会GET给您的应用以下信息:===
  
 
1.1用户未授权传递参数
 
1.1用户未授权传递参数
第77行: 第82行:
 
{{api_args|viewer|true|int|当前登陆用户uid}}
 
{{api_args|viewer|true|int|当前登陆用户uid}}
 
{{api_args|sub_appkey|true|string|企业安装应用后的子key}}
 
{{api_args|sub_appkey|true|string|企业安装应用后的子key}}
 +
{{api_args|tokenString|true|string|未授权也有tokenString参数,但解析出的数组中无access_token信息}}
 
|}
 
|}
 
用户未授权时应用需要自动判断,并调用[http://open.weibo.com/wiki/index.php/API%E6%96%87%E6%A1%A3#.E7.99.BB.E9.99.86.2FOAuth_2.0.E6.8E.A5.E5.8F.A3.5BNEW.5D OAuth 2.0] 授权弹层。
 
用户未授权时应用需要自动判断,并调用[http://open.weibo.com/wiki/index.php/API%E6%96%87%E6%A1%A3#.E7.99.BB.E9.99.86.2FOAuth_2.0.E6.8E.A5.E5.8F.A3.5BNEW.5D OAuth 2.0] 授权弹层。
第95行: 第101行:
 
{{api_args|tokenString|true|string|access token,请按.分割为两部分,后一部分先base64_decode,然后json_decode}}
 
{{api_args|tokenString|true|string|access token,请按.分割为两部分,后一部分先base64_decode,然后json_decode}}
 
|}
 
|}
 +
 +
===授权回调页设置:===
 +
{{center|http://www.sinaimg.cn/blog/developer/wiki/anquanyumingweizhi.png}}
 +
 +
 +
{{center|http://www.sinaimg.cn/blog/developer/wiki/anquanyumingtianxie.png}}
  
 
===调用应用授权弹层===
 
===调用应用授权弹层===
第102行: 第114行:
  
 
<pre>
 
<pre>
 +
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>未授权时的页面</title>
 +
 
<style>
 
<style>
 
body{
 
body{
第108行: 第127行:
 
</style>
 
</style>
  
<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js" language="JavaScript"></script>
+
<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/appClient.js" type="text/javascript"></script>
<script src="http://tjs.sjs.sinajs.cn/t35/apps/opent/js/frames/client.js" language="JavaScript"></script>
+
  
 
<script>  
 
<script>  
  
弹出授权弹层:
+
//弹出授权弹层:
 
function authLoad(){
 
function authLoad(){
 
  App.AuthDialog.show({
 
  App.AuthDialog.show({
client_id : '<?=WB_AKEY;?>',    //必选,sub_appkey
+
client_id : '<?=WB_AKEY;?>',    //必选,填入框架通过get方式传递的sub_appkey参数
redirect_uri : '<?=$canvas_page;?>',    //必选,授权后的回调地址,正确范例:http://e.weibo.com/{uid}/app_{appkey}
+
redirect_uri : '<?=$canvas_page;?>',     
 +
//必选,授权回调地址,必须以http://e.weibo.com开头,类似http://e.weibo.com/1717871843/app_738247391
 +
//或者http://e.weibo.com/thirdapp/app?appkey=738247391,不同企业应用的前台url是不固定的,需要用uid拼装
 
height: 120,    //可选,默认距顶端120px
 
height: 120,    //可选,默认距顶端120px
display: 'apponweibo'  //必选
+
display: 'apponweibo'  //必选,移动端H5授权则应为display: 'mobile'
 
});
 
});
 
}
 
}
 
</script>
 
</script>
  
 +
</head>
 +
<body onload="authLoad();">
 +
 +
</body>
 +
</html>
  
 
</pre>
 
</pre>
 +
 +
线上授权范例:http://e.weibo.com/2822861085/app_639562573
  
 
===用户进行授权操作===
 
===用户进行授权操作===
第132行: 第159行:
  
 
开发参考:[[ API文档 |API参考]]、[[Weibo-JS V2  | Javascript SDK ]]、[http://code.google.com/p/libweibo/  PHPSDK及调用DEMO]
 
开发参考:[[ API文档 |API参考]]、[[Weibo-JS V2  | Javascript SDK ]]、[http://code.google.com/p/libweibo/  PHPSDK及调用DEMO]
 +
 +
===设计样式===
 +
 +
专业版应用是通过Iframe的形式将应用的页面嵌套进微博的页面当中,有2个页面供用户使用。
 +
 +
1.应用地址:此页面是应用被用户安装后,其他用户访问此应用时看到的页面,宽度940px,高度为600-3000px。如下图所示:
 +
 +
{{center|http://www.sinaimg.cn/blog/developer/wiki/sxyv5.jpg}}
 +
 +
2.管理地址:此页面是应用被用户安装后,用户在企业微博管理中心中,管理此应用时用到的页面,宽度760px,高度为600-3000px。如下图所示:
 +
{{center|http://www.sinaimg.cn/blog/developer/wiki/sxyv5gl.jpg}}
 +
  
 
===应用动态高度自适应===
 
===应用动态高度自适应===
 
Iframe高度:开发者可以使Iframe的高度根据你的应用页面自适应,但需要开发者在应用页面中部署一段JS代码:
 
Iframe高度:开发者可以使Iframe的高度根据你的应用页面自适应,但需要开发者在应用页面中部署一段JS代码:
 
<pre>
 
<pre>
<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js?version="></script>
+
<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js" type="text/javascript"></script>
<script type="text/javascript">
+
</pre>
FrameClient.addEvent('scroll', function(evt, data){
+
<br>
//使用data中需要的属性来达到自己相对于父页面的定位。
+
*提示:若你的应用有多个页面,并且每个页面的高度不一致,则每个页面都需要部署以上JS代码。appClient.js为支持授权弾层的iframe自适应,包含client.js的所有功能。appClient.js在调用授权弹层时已加载。
});
+
</script>
+
  
 +
 +
页面中如果存在浮动层,并且浮动层的最下边超过了页面中的底部元素。这种情况下可能会出现高度自适应不正常。
 +
 +
 +
解决方案:
 +
 +
(1)浮动层在页面基本元素的可视范围内显示。
 +
 +
(2)在页面底部插入一个空白元素,高度视情况而定(如:空白元素的下边沿与浮动层的下边沿持平)。
 +
 +
(3)将页面中的body或者某个外层容器的高度设置为一个合适的值(如:<body style="height:800px;">)。
 +
 +
===页面浮层居中解决方案===
 +
 +
如果需要在页面中的浮层保持在当前浏览器位置居中显示,那么需要加入如下代码:
 +
 +
<pre>
 +
//在v4或v5下监听scroll事件
 +
FrameClient.addEvent('scroll', function(evt, data) {
 +
      //console.log(data);//使用data中的属性来达到自己相对于父页面的定位。
 +
});
 +
 +
//v4所接收到data的参数说明:
 +
/*
 +
data:{
 +
      top : 0,
 +
      left : 0, // 子页面左侧相对于父页面左侧距离
 +
      scrollTop : 0,//父页面纵向滚动条顶部距离
 +
      scrollLeft : 0,// 父页面横向滚动条
 +
      width : 0,
 +
      height : 0
 +
}
 +
*/
 +
 +
//v5所接收到data的参数说明:
 +
/*
 +
data:{//其中中间层代表e.weibo.com,最外层代表weibo.com,最内层为第三方应用
 +
    isV5 : ture,//是否在V5框架下
 +
    scrollTop : 0,//最外层纵向滚动条顶部距离
 +
    scrollLeft : 0,//最外层横向向滚动条左部距离
 +
    top : 0,//中间层iframe距离顶端的高度
 +
    left : 0,//中间层iframe距离最外层的值
 +
    height : 0,//最外层页面clientHeight的高度
 +
    scrollTopInner : 0//滚动轴到中间层顶部的高度
 +
}
 +
*/
 +
</pre>
 +
<br>
 +
 +
若需要判断应用在v4下还是v5下存在可使用类似如下语句:
 +
 +
<pre>
 +
FrameClient.addEvent('scroll', function(evt, data) {
 +
      if(data.isV5 == true){//说明应用在v5下,data为v5下的数据
 +
             
 +
      }else {//说明应用在v4下,data为v4下的数据
 +
         
 +
      }
 +
});
 +
</pre>
 +
<br>
 +
 +
 +
===最外层页面跳转方法说明===
 +
 +
V4与V5情况下,最外层页面的跳转办法:
 +
 +
使用window.top.location.href
 +
 +
<pre>
 +
//v5下跳转最外层页面
 +
window.top.location.href = 'http://weibo.com?xxx=******';
 +
//v4下跳转最外层页面
 +
window.top.location.href = 'http://e.weibo.com?xxx=******';
 
</pre>
 
</pre>
 
<br>
 
<br>
*提示:若你的应用有多个页面,并且每个页面的高度不一致,则每个页面都需要部署以上JS代码。
 
  
 
===URL规范===
 
===URL规范===
第174行: 第284行:
  
 
===移动端Html5支持===
 
===移动端Html5支持===
 +
 +
{{center|http://www.sinaimg.cn/blog/developer/wiki/yidongduanyingyongrukou.png}}
  
 
新浪企业微博应用H5首页url为:http://e.weibo.cn/{uid}/app_{appkey}
 
新浪企业微博应用H5首页url为:http://e.weibo.cn/{uid}/app_{appkey}
  
  
在移动端浏览器中,访问http://e.weibo.com/{uid}/app_{appkey}?key=******,会重定向到http://e.weibo.cn/{uid}/app_{appkey}?key=******
+
在移动端浏览器中,访问http://weibo.com/{uid}/app?from=page_100606&mod=TAB&appid={appkey}&key=****** ,会重定向到http://e.weibo.cn/{uid}/app_{appkey}?key=******
  
  
 
以上跳转映射由企业微博框架完成,应用可以忽略,但应用的首页需要根据浏览器的类型以及HTTP referer等必要的信息,加载或跳转至对应的应用页面。例如HTTP referer如果是e.weibo.com,则加载PC端页面;如果是e.weibo.cn,则加载移动端H5页面。
 
以上跳转映射由企业微博框架完成,应用可以忽略,但应用的首页需要根据浏览器的类型以及HTTP referer等必要的信息,加载或跳转至对应的应用页面。例如HTTP referer如果是e.weibo.com,则加载PC端页面;如果是e.weibo.cn,则加载移动端H5页面。
 +
 +
 +
微博移动客户端框架(同样是iframe机制)同样会向第三方应用传递以下参数:
 +
 +
i. viewer:当前登录用户uid
 +
 +
ii. cid:被访问者uid
 +
 +
iii. sub_appkey
 +
 +
H5的OAuth授权中的display参数应使用mobile。需将接口调用地址从api.weibo.com更换为open.weibo.cn。
 +
 +
移动终端的授权页面请参考http://open.weibo.com/wiki/Oauth2/authorize 中的说明
 +
 +
 +
企业应用H5的导航必须明确、易于点击。如果包含多个页面,则需要明确的返回首页的导航。
 +
 +
 +
企业应用H5端测试流程:
 +
 +
1、自行申请测试应用,无须提交审核。申请完成后请将应用名称和appkey通过邮件告知qyapps@staff.sina.com.cn,请求打开移动端支持。
 +
 +
2、申请测试帐号,测试帐号PC端安装测试应用,并设置前台显示。
 +
 +
3、通过最新微博客户端搜索测试帐号,进入测试。
 +
 +
'''如未申请开通H5端展示权限,应用在被安装后在无线端依然无法展示,请注意。'''
  
  
第188行: 第327行:
 
<pre>  
 
<pre>  
 
'mobilephone' => array(
 
'mobilephone' => array(
'nokia'          => 'Nokia',         
+
        'nokia'          => 'Nokia',         
 
         'iphone'        => 'iPhone',
 
         'iphone'        => 'iPhone',
 
         'ipod'        => 'iPod',       
 
         'ipod'        => 'iPod',       
第196行: 第335行:
 
         'SonyEricsson'      => 'SonyEricsson',   
 
         'SonyEricsson'      => 'SonyEricsson',   
 
         'Sony'      => 'Sony',         
 
         'Sony'      => 'Sony',         
'motorola'      => 'Motorola',                                         
+
        'motorola'      => 'Motorola',                                         
'mobileexplorer' => 'Mobile Explorer',
+
        'mobileexplorer' => 'Mobile Explorer',
'openwave'      => 'Open Wave',
+
        'openwave'      => 'Open Wave',
'opera mini'    => 'Opera Mini',
+
        'opera mini'    => 'Opera Mini',
'operamini'      => 'Opera Mini',
+
        'operamini'      => 'Opera Mini',
'elaine'        => 'Palm',
+
        'elaine'        => 'Palm',
'palmsource'    => 'Palm',
+
        'palmsource'    => 'Palm',
'digital paths'  => 'Palm',
+
        'digital paths'  => 'Palm',
'avantgo'        => 'Avantgo',
+
        'avantgo'        => 'Avantgo',
'xiino'          => 'Xiino',
+
        'xiino'          => 'Xiino',
'palmscape'      => 'Palmscape',
+
        'palmscape'      => 'Palmscape',
'ericsson'      => 'Ericsson',
+
        'ericsson'      => 'Ericsson',
'blackBerry'    => 'BlackBerry',
+
        'blackBerry'    => 'BlackBerry',
    'SmartPhone'      => 'SmartPhone',         
+
        'SmartPhone'      => 'SmartPhone',         
 
         'WindowsCE'      => 'WindowsCE',
 
         'WindowsCE'      => 'WindowsCE',
    'Mobile'        => 'Unknown Mobile',
+
        'Mobile'        => 'Unknown Mobile',
),
+
)
 
          
 
          
    'pad' => array(
+
'pad' => array(
 
         'ipad'          => 'iPad',
 
         'ipad'          => 'iPad',
 
         'tablet'        => 'Tablet',                   
 
         'tablet'        => 'Tablet',                   
     ),
+
     )
 
</pre>
 
</pre>
  
第225行: 第364行:
 
{{center|http://ww3.sinaimg.cn/mw690/683f0951jw1dyfkq2puxuj.jpg}}
 
{{center|http://ww3.sinaimg.cn/mw690/683f0951jw1dyfkq2puxuj.jpg}}
 
专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。
 
专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。
<br>
 
<br>
 
PDF完整版开发文档下载:[http://vdisk.weibo.com/s/gSFQp 个性化应用开发文档(PDF)] [http://vdisk.weibo.com/s/gT4kF 通用应用开发文档(PDF)]
 
<br>
 
 
<br>
 
<br>
 
[[专业版应用开发者红宝书]]
 
[[专业版应用开发者红宝书]]
<br>
 
 
<br>
 
<br>
 
审核详情请参考:[[专业版应用审核规范]]
 
审核详情请参考:[[专业版应用审核规范]]

2013年11月22日 (五) 17:53的最后版本

目录

专业版应用创建及发布流程图

专业版应用的创建及发布包括下面的流程,开发者可以根据应用当前的状态进行相应的操作:

683f0951jw1dwep6j2eqdj.jpg

请注意,修改白名单以及企业应用定价,无须进行二次审核。

登录微博账号

建议由技术开发人员使用官方微博帐号来登录

683f0951jw1dyfkd4gck7j.jpg

设置开发者信息

点击顶导航“应用开发”,在下拉菜单中选择“专业版应用”,进入到应用开发页面; 在应用开发页面中,点击“创建应用”按钮:

683f0951jw1dyfkd4ycefj.jpg
  • 若您还没有填写开发者信息,系统会自动跳转到编辑开发者信息页面。

开发者信息内容填写:

  1. 开发者类型:个人/公司,根据实际情况进行填写。如开发收费的通用应用,必须以公司身份填写。
  2. 开发者名称:请填写公司名称或者您的个人姓名。
  3. 其他信息:个人/公司网站、联系电话、联系Email。
  • 请如实填写,以便于我们和您及时沟通联系。
new_shlczn_04.jpg
  • 填写完毕,请点击保存按钮进行保存

创建专业版应用

创建专业版应用需要完善以下信息:

  1. 应用名称:该名称用于来源显示,用户通过应用发布微博信息后,应用的名称会出现在微博信息下方,点击后直接进入应用地址。
  2. 应用分类:请依据您所开发的应用类型来选择相关的分类信息;请确认您的应用分类正确,否则无法通过您的审核申请。
683f0951jw1dweqn46i0bj.jpg

编辑应用基本信息

应用页面设置

  1. 应用名称:站内应用、移动应用、网站接入中已经使用的应用名称均不可再注册成为专业版应用。仅官方应用和认证合作伙伴应用可以使用 “企业※※”、”政府※※”、“媒体※※”、“蓝V※※”作为应用名称,否则相应申请将被驳回
  2. 应用地址:专业版微博主页通过iframe嵌入的应用前台页面,用于展示给机构的访问者看
  3. 管理地址:专业版微博管理后台通过iframe嵌入的应用后台页面,用于专业版微博主管理之用
  4. 应用类型:如果是只有后台管理,无须前台展示的应用,请选择应用类型为“管理类应用”(重要,设置错误可能导致相关功能异常,#请谨慎设置,如有疑问请联系 qyapps@staff.sina.com.cn)
  5. 行业分类:通用、汽车、美食、旅游、房产、电商、教育、零售、休闲娱乐、IT、服饰、美容化妆、文化出版、金融。例如,您的应用选择的行业分类是美食,则在专业版应用广场中,您的应用会出现在美食应用的筛选结果中。
  6. 功能分类:通用、互动展示、营销工具、市场调研、求职招聘、运营管理、客户服务、舆情监控、数据分析。例如,您的应用选择的功能分类是数据分析,则在专业版应用广场中,您的应用会出现在数据分析应用的筛选结果中。

SEO相关

专业版应用创建时填写的“应用介绍”内容,会进入专业版微博框架meta信息中的Description,“行业分类”、“功能分类”会进入专业版微博框架页面的Keywords部分,“应用名称”会成为专业版微博框架title中的一部分。请在开放平台填写相应信息时,注意做好SEO优化。

应用截图

  1. 请上传相关的应用介绍照片,这些图片会在应用频道中展示,让用户能更直观的了解你的应用。
683f0951jw1dyfkq1whauj.jpg

测试用户

1、应用在未通过审核之前,如需进行完整测试,请向qyapps@staff.sina.com.cn申请相应的企业应用测试账号,用于相应授权、传参等的测试。


2、应用在未通过审核之前,不能大范围推广,您可以设置最多15个测试用户(大多数情况下是个人用户)来测试尚在开发中的应用。

683f0951jw1dyfkq2ajxyj.jpg
  • 相关内容填写完毕后,请点击保存按钮进行保存。

技术开发

应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。 App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。

企业应用授权机制

专业版应用的使用分为两步,第一步是在专业版微博应用广场中安装应用,第二步(如果需要的话),是用户通过OAuth完成相应的授权。机构安装应用后,会生成各自不同的sub appkey,用以和应用的Appkey区分。当用户对专业版应用进行授权的时候,应直接对sub_appkey授权,也就是OAuth授权请使用sub_appkey以及相应的secret来完成。通过这样的授权机制,用户向“京东商城”的“微热卖”应用授权,不意味着同时也向“天猫”的“微热卖”授权。如果不严格遵守sub_appkey机制,将无法使用专业版应用的通知机制,未来也有可能产生更多的其它接口问题。

683f0951jw1dwer6r1ktjj.jpg


专业版应用授权流程

kfzn_01_s.png

专业版应用框架会GET给您的应用以下信息:

1.1用户未授权传递参数

  必选 类型及范围 说明
cid true int 当前被访问的专业版用户uid
viewer true int 当前登陆用户uid
sub_appkey true string 企业安装应用后的子key
tokenString true string 未授权也有tokenString参数,但解析出的数组中无access_token信息

用户未授权时应用需要自动判断,并调用OAuth 2.0 授权弹层。



1.2用户授权后传递参数

  必选 类型及范围 说明
cid true int 当前被访问的专业版用户uid
viewer true int 当前登陆用户uid
sub_appkey true string 企业安装应用后的子key
tokenString true string access token,请按.分割为两部分,后一部分先base64_decode,然后json_decode

授权回调页设置:

anquanyumingweizhi.png


anquanyumingtianxie.png

调用应用授权弹层

调用授权弹层时,页面背景用一张应用图片填充,给用户带来更好的体验。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>未授权时的页面</title>

<style>
body{
	background:url("http://qimeng.appsina.com/images/1.jpg");
}
</style>

<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/appClient.js" type="text/javascript"></script>

<script> 

//弹出授权弹层:
function authLoad(){
 	App.AuthDialog.show({
	client_id : '<?=WB_AKEY;?>',    //必选,填入框架通过get方式传递的sub_appkey参数
	redirect_uri : '<?=$canvas_page;?>',     
	//必选,授权回调地址,必须以http://e.weibo.com开头,类似http://e.weibo.com/1717871843/app_738247391
	//或者http://e.weibo.com/thirdapp/app?appkey=738247391,不同企业应用的前台url是不固定的,需要用uid拼装
	height: 120,    //可选,默认距顶端120px
	display: 'apponweibo'  //必选,移动端H5授权则应为display: 'mobile'
	});
}
</script>

</head>
<body onload="authLoad();">

</body>
</html>

线上授权范例:http://e.weibo.com/2822861085/app_639562573

用户进行授权操作

用户进行授权操作后,会回调专业版应用页面(即e.weibo.com/<uid>/app_<appkey>),重新进行以上流程。


开发参考:API参考 Javascript SDK PHPSDK及调用DEMO

设计样式

专业版应用是通过Iframe的形式将应用的页面嵌套进微博的页面当中,有2个页面供用户使用。

1.应用地址:此页面是应用被用户安装后,其他用户访问此应用时看到的页面,宽度940px,高度为600-3000px。如下图所示:

sxyv5.jpg

2.管理地址:此页面是应用被用户安装后,用户在企业微博管理中心中,管理此应用时用到的页面,宽度760px,高度为600-3000px。如下图所示:

sxyv5gl.jpg


应用动态高度自适应

Iframe高度:开发者可以使Iframe的高度根据你的应用页面自适应,但需要开发者在应用页面中部署一段JS代码:

<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js" type="text/javascript"></script>


  • 提示:若你的应用有多个页面,并且每个页面的高度不一致,则每个页面都需要部署以上JS代码。appClient.js为支持授权弾层的iframe自适应,包含client.js的所有功能。appClient.js在调用授权弹层时已加载。


页面中如果存在浮动层,并且浮动层的最下边超过了页面中的底部元素。这种情况下可能会出现高度自适应不正常。


解决方案:

(1)浮动层在页面基本元素的可视范围内显示。

(2)在页面底部插入一个空白元素,高度视情况而定(如:空白元素的下边沿与浮动层的下边沿持平)。

(3)将页面中的body或者某个外层容器的高度设置为一个合适的值(如:<body style="height:800px;">)。

页面浮层居中解决方案

如果需要在页面中的浮层保持在当前浏览器位置居中显示,那么需要加入如下代码:

//在v4或v5下监听scroll事件
FrameClient.addEvent('scroll', function(evt, data) {
       //console.log(data);//使用data中的属性来达到自己相对于父页面的定位。
});

//v4所接收到data的参数说明:
/*
data:{ 
      top : 0, 
      left : 0, // 子页面左侧相对于父页面左侧距离
      scrollTop : 0,//父页面纵向滚动条顶部距离 
      scrollLeft : 0,// 父页面横向滚动条 
      width : 0, 
      height : 0 
}
*/

//v5所接收到data的参数说明:
/*
data:{//其中中间层代表e.weibo.com,最外层代表weibo.com,最内层为第三方应用
    isV5 : ture,//是否在V5框架下
    scrollTop : 0,//最外层纵向滚动条顶部距离 
    scrollLeft : 0,//最外层横向向滚动条左部距离 
    top : 0,//中间层iframe距离顶端的高度
    left : 0,//中间层iframe距离最外层的值
    height : 0,//最外层页面clientHeight的高度
    scrollTopInner : 0//滚动轴到中间层顶部的高度
} 
*/


若需要判断应用在v4下还是v5下存在可使用类似如下语句:

FrameClient.addEvent('scroll', function(evt, data) {
       if(data.isV5 == true){//说明应用在v5下,data为v5下的数据
              
       }else {//说明应用在v4下,data为v4下的数据
          
      }
});



最外层页面跳转方法说明

V4与V5情况下,最外层页面的跳转办法:

使用window.top.location.href

//v5下跳转最外层页面
window.top.location.href = 'http://weibo.com?xxx=******';
//v4下跳转最外层页面
window.top.location.href = 'http://e.weibo.com?xxx=******';


URL规范

  1. 本规范主要针对展示类应用的前台,展示类应用的后台和管理类应用请忽略
  2. 应用父框架URL为http://e.weibo.com/{uid}/app_{appkey}?key=******
  3. 应用内部页面与新浪专业版微博应用url必须实现一一对应
  4. 在专业版应用内部页面分享相关的功能或者组件中,请务必以新浪专业版微博应用url作为分享内容中的链接
  5. 应用内部的跳转链接,无论是<a>标签,还是js代码跳转等,强制要求必须使用新浪专业版微博应用url
  6. 假设新浪专业版微博应用url为http://e.weibo.com/{uid}/app_{appkey}?key=****** ,则专业版微博的页面框架会向专业版应用iframe地址url中追加以下参数“key=******”,应用应当根据相应参数,加载相应的页面或进行对应处理响应。******部分可进行自定义,但会过滤掉除字母数字以及下划线外的其它特殊字符

数据监测

<a suda-uatrack = "key=ebusiness_apps&value=1365680744:1762587913:share: 13939943415:58: 2nBbQ2Yj:1" 
href="javascript:void(0)" onclick="return false;" action-type = "change" class = "change_cont" 
action-data = "offset=1">分享</a>

企业可以在专业版微博管理首页—数据中心—应用数据中查看到相应的互动数据等。第三方开发者可以在open.weibo.com我的应用—数据统计查看相应数据。

安全相关

专业版应用应当判定HTTP的referer参数,如果来源不是http://e.weibo.com 域名下的链接,应显示友好的错误提示,个性化应用也可以直接跳转到对应的专业版微博框架地址。

有后台管理设置的专业版应用,应考虑在后台进行授权控制,保证通过框架获得的cid参数和授权后获得uid一致,才允许访问后台,修改应用设置。


移动端Html5支持

yidongduanyingyongrukou.png

新浪企业微博应用H5首页url为:http://e.weibo.cn/{uid}/app_{appkey}


在移动端浏览器中,访问http://weibo.com/{uid}/app?from=page_100606&mod=TAB&appid={appkey}&key=****** ,会重定向到http://e.weibo.cn/{uid}/app_{appkey}?key=******


以上跳转映射由企业微博框架完成,应用可以忽略,但应用的首页需要根据浏览器的类型以及HTTP referer等必要的信息,加载或跳转至对应的应用页面。例如HTTP referer如果是e.weibo.com,则加载PC端页面;如果是e.weibo.cn,则加载移动端H5页面。


微博移动客户端框架(同样是iframe机制)同样会向第三方应用传递以下参数:

i. viewer:当前登录用户uid

ii. cid:被访问者uid

iii. sub_appkey

H5的OAuth授权中的display参数应使用mobile。需将接口调用地址从api.weibo.com更换为open.weibo.cn。

移动终端的授权页面请参考http://open.weibo.com/wiki/Oauth2/authorize 中的说明


企业应用H5的导航必须明确、易于点击。如果包含多个页面,则需要明确的返回首页的导航。


企业应用H5端测试流程:

1、自行申请测试应用,无须提交审核。申请完成后请将应用名称和appkey通过邮件告知qyapps@staff.sina.com.cn,请求打开移动端支持。

2、申请测试帐号,测试帐号PC端安装测试应用,并设置前台显示。

3、通过最新微博客户端搜索测试帐号,进入测试。

如未申请开通H5端展示权限,应用在被安装后在无线端依然无法展示,请注意。


移动端use-agent:

 
'mobilephone' => array(
        'nokia'          => 'Nokia',         
        'iphone'         => 'iPhone',
        'ipod'         => 'iPod',       
        'symbian'       => 'Symbian',   
        'android'        => 'Android',
        'htc'        => 'HTC',       
        'SonyEricsson'       => 'SonyEricsson',  
        'Sony'       => 'Sony',        
        'motorola'       => 'Motorola',                                         
        'mobileexplorer' => 'Mobile Explorer',
        'openwave'       => 'Open Wave',
        'opera mini'     => 'Opera Mini',
        'operamini'      => 'Opera Mini',
        'elaine'         => 'Palm',
        'palmsource'     => 'Palm',
        'digital paths'  => 'Palm',
        'avantgo'        => 'Avantgo',
        'xiino'          => 'Xiino',
        'palmscape'      => 'Palmscape',
        'ericsson'       => 'Ericsson',
        'blackBerry'     => 'BlackBerry',
        'SmartPhone'       => 'SmartPhone',        
        'WindowsCE'       => 'WindowsCE',
        'Mobile'         => 'Unknown Mobile',
)
        
'pad' => array(
        'ipad'           => 'iPad',
        'tablet'         => 'Tablet',                  
    )

专业版应用审核

当您完成专业版应用的开发并测试没有问题后,可以在专业版应用的汇总信息页面点击“提交审核”按钮,将您的应用提交给平台工作人员进行审核。 我们的工作人员在收到您的申请后,会和您进行联络,并试用您所开发的应用,在确认应用开发已经完成并且可以正常使用后,会通过您的申请。

683f0951jw1dyfkq2puxuj.jpg

专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。
专业版应用开发者红宝书
审核详情请参考:专业版应用审核规范

文档更新时间: 2013-11-22