android扣扣登录界面,手机QQ

企鹅FM - H5 与 Native 支持能力

目前 支持能力大致分为三块

url 参数，可用于控制 native 的页面显示以及操作，包括导航栏和右上角分享按钮的展示

jsbridge, 可以让 H5 页面中使用 native 的能力，比如播放，收藏，关注等

schema, 除了通常支持的 schema 跳转之外，还支持呼起登录页和分享框

具体功能和使用方式详见如下

URL 参数

导航栏展示 showNavBar

用于控制是否 H5 页面是否显示导航栏，默认不显示

showNavBar=1 显示下方导航栏，逻辑和之前的一致

showNavBar=0 不显示下方导航栏

分享按钮显示 sharebtn

让 H5 用于控制 native 右上角的分享按钮显示，需要通过 jsbridge 将分享所需信息传到 native 中

sharebtn=1

返回控制 backAction

用于控制 H5 中右上角按钮的功能，默认为退出H5

backAction=up 退出 H5

backAction=back 返回到上一个页面

返回控制 finishH5

用于解决企鹅点歌台的闭环问题，当页面到达最后一个页面时不希望用户点击左上角时回退到之前的页面，直接返回 native，左上角按钮显示为“关闭”

finishH5=true

minibar控制 minibar

用于控制 H5 页面中的 minibar 展示，默认不需要minibar，当不为 0 的时候则展示 mibibar

minibar=1

jsbridge 支持

播放节目

mqq.invoke('nextradio','playShow',{mid:'节目id',si:'***'},funciton(o){

console.log(JSON.stringify(o));

})mid:需要播放的节目在 H5 加密后id

si : sourceinfo

callback:

{

showName: '节目名',

showCover:'节目封面图片url',

showOnwer:'节目主播名',

showAlbumName:'节目所属专辑名',

}

播放器状态获取

mqq.invoke('nextradio','playerState',{},funciton(o){

console.log(JSON.stringify(o));

})callback:

{

currentTime: '当前时间精度(秒)',

totalDuration:'节目总时长(秒)',

isPlaying:'是否正在播放,‘0’没播，‘1’播放',

}

获取登录态

mqq.addEventListener("loginState",function(o){

console.log(JSON.stringify(o));

});mqq.invoke('nextradio','getLoginToken',{},funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(已登录)-1(未登录)',

data:'token',

userName:'用户名',

userLogo:'用户头像'

}用户已登录，直接返回

用户尚未登录，此时没有登录状态返回。

当客户端完成登录后，登录态再通过事件loginState返回

收藏专辑

mqq.invoke('nextradio','favorAlbum',{mid:'专辑id',isFavor:'0取消 1收藏'},funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

收藏节目

mqq.invoke('nextradio','favorShow',{mid:'节目id',isFavor:'0取消 1收藏'},funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

关注主播

mqq.invoke('nextradio','favorAnchor',{mid:'主播id',isFavor:'0取消 1关注'},funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

分享

用于 H5 将分享所需数据传递给应用，与 shareBtn 组合使用

mqq.invoke('nextradio','share',{

url:'分享url',

title:'分享标题',

summary:'分享描述',

cover:'分享封面',

extraSummary:'分享描述',

suffixSummary:'分享描述',

shareType:'0-图片 1-音乐 2-网页',

dataUrl:'音频url',

},

funciton(o){

console.log(JSON.stringify(o));

})

现网案例：

jcev2_p_7_o_extraSummary: 我在#企鹅点歌台#点了一首歌，欢迎来听。

jcev2_p_1_o_summary: 送给在炎炎夏日中辛勤劳作的每一个可爱人儿，有付出就会有收获，

jcev2_p_6_o_type: 1

jcev2_p_8_o_suffixSummary: http://h5.qzone.qq.com/song/card?appUrl=2470&cardid=wb_12653633_1466673338_a&themeid=1032&_wv=1 @企鹅FM

jcev2_p_5_o_dataUrl: http://ws.stream.qqmusic.qq.com/153811.m4a?fromtag=46

jcev2_p_2_o_cover: http://imgcache.qq.com/fm/photo_new/T002R120x120M000001MYVwe23zYvz.jpg

jcev2_p_4_o_qqURL: http://h5.qzone.qq.com/song/card?appUrl=2470&cardid=wb_12653633_1466673338_a&themeid=1032&_wv=1

jcev2_p_3_o_wxURL: http://h5.qzone.qq.com/song/card?appUrl=2470&cardid=wb_12653633_1466673338_a&themeid=1032&_wv=1

jcev2_p_0_o_title: 花开无声在企鹅FM为你点歌

url参数会被填入这两个字段：qqURL和wxURL

呼起IAP支付

用于直接在H5界面呼起IAP支付

mqq.invoke('nextradio','chargeIAP',{

beanlevel:'1', // 1,2,3,4,5,6 共6档

},

funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

呼起Android端米大师支付

用于直接在H5界面呼起Android端米大师支付

mqq.invoke('nextradio','launchPay',{

payNum:'60', //购买数量

},

funciton(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)-2 用户取消',

}

端内呼起充值和支付弹层

呼起充值弹层

mqq.invoke('nextradio', 'showChargeView', {

needPayNum: 60 //充值金额

}, function (o) {

console.log(JSON.stringify(o));

});callback:

{

code: '1(操作成功)-1(操作失败)',

}

呼起整本专辑购买弹层

mqq.invoke('nextradio','payAlbum',{

mid: mid, //专辑加密id

si: si // sourceInfo，来源信息，产品运营同学配置，作上报时区分用

},function(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

呼起批量节目购买弹层

mqq.invoke('nextradio','payBatch',{

mid: mid, //专辑加密id

si: si //sourceInfo，来源信息，产品运营同学配置，作上报时区分用

},function(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

呼起合集购买弹层

mqq.invoke('nextradio','payIssue',{

mid: mid, //合集id

si: si // sourceInfo，来源信息，产品运营同学配置，作上报时区分用

},function(o){

console.log(JSON.stringify(o));

})callback:

{

code: '1(操作成功)-1(操作失败)',

}

schema

页面跳转

走schema统一跳转, schema 跳转控制见网址

https://docs.google.com/spreadsheets/d/1QiUBiHcGfZoif1suExnf67M1AUBbjQHTItfUErc9BOY/edit?pref=2&pli=1#gid=0

nextradio://action/h5_lg

nextradio://action/h5_lg?redirect_url=http%3A%2F%2Fwww.qq.com%2F

通过 schema 呼起登陆页之后，登录成功之后视图栈最顶层的 WebView 会跳转到该网址。

nextradio://action/share

用于分享的 schema，会呼起 native 的分享窗口，分享所需的数据都来源于参数，客户端接收到这个 schema 之后，会将其参数封装为一个 OutShare。

必填字段

title 标题

summary 概要文案

cover 封面图片URL

url 点击跳转URL

extraSummary 文案 (微博分享时使用的，这句话就是微博的主题内容)

可选字段

dataUrl default null 音乐/图片 url 只有分享类型是音乐或图片时才有用

shareType 默认值 2 分享类型见下文

suffixSummary 这个微博分享用的,默认值是 “url @企鹅FM” 会包含跳转url和@企鹅FM字样

详细说明

微博分享完整样式是：

“extraSummary + suffixSummary”

其中extraSummary是必选字段，suffixSummary是可选字段，如果是null，客户端按默认逻辑拼接一个suffixSummary。(拼接逻辑上面提到)。

默认分享类型是分享一个url，在微信，QQ中打开一个网页

如果有需求分享音乐，图片类型，需要带shareType参数，可选值如下

enum ShareType {

SharePicture =0, //分享图片

ShareMusic =1, //分享音乐

ShareWebPage =2, //分享网页

};

举个栗子

栗子中的 URL 木有做 encode。

nextradio://action/share?title=芈月传 第三集 痛失双亲&summary=光合积木&cover=&url=http://fm.qq.com&extraSummary=我正在收听《芈月传 第三集 痛失双亲》，一起来听吧！&cover=http://imgcache.qq.com/music/photo/rmid_album_120/v/W/004KSpOn281DvW.jpg?time=0&dataUrl=http://ws.stream.fm.qq.com/xxx/R224002AFJI849kbIX.m4a