App HTML 交互规范

交互方式

基本结构

协议名 + 方法名 + 参数

协议名

app

登陆

方法名：login

参数： 无

说明：html页面调用发起登陆

// Javascript
var url = "app://login";

页面导航

方法名：pop

参数：无

说明：返回上一级，当前界面从左或右滑出界面。

var url = "app://pop"

方法名：push

参数：url

说明：进入到下一界面，新界面从左或右滑入。

var url = "app://push/?url=" + encodeURIComponent("http://www.example.com")

方法名：present

参数：url

说明：从底部弹出新页面

var url = "app://present/?url=" + encodeURIComponent("http://www.example.com")

方法名：popTo

参数：index | Int

说明：回到指定指定历史中页面

var url = "app://popTo/?index=0"

页面跳转

方法名：open

参数：

• page：页面名称
  
• id：内容ID
  
  说明：打开 App 指定页面。
  

// 金币任务页面
app://open/?page=task 

// 金币商城页面
app://open/?page=mall 

// 新闻
app://open/?page=newsList           // 列表
app://open/?page=newsList&id=categoryID     // 指定频道列表
app://open/?page=newsDetail&id=newsID   // 详情

// 视频
app://open/?page=videoList          // 列表
app://open/?page=videoList&id=categoryID    // 指定频道列表
app://open/?page=videoDetail&id=videoID // 详情

UI 定制

HTML 打开新的 HTML 页面，定制原生界面的样式。

定制导航栏

在新的 HTML 页面 URL 中加入相关字段，原生代码得到 URL 后，根据值自定义 navigationBar 样式。

为了避免与页面所用参数命名冲突，样式参数以navigationBar为前缀。

字段名

• navigationBarTitle: 导航栏标题，字符串
• navigationBarHidden：是否隐藏导航栏，true／false
• navigationBarBackgroundColor：导航栏背景色，#f1f2f3
• navigationBarBackButtonHidden：导航栏返回按钮，true／false
• navigationBarInfoButtonHidden：导航栏Info按钮，true／false
• navigationTranslucent：导航栏是否透明，true／false
• navigationBarTintColor：导航栏渲染色，#f1f2f3

var url = "http://www.example.com/?id=someID";
// 导航栏标题
url = url + "&navigationBarTitle=金币商城";  
// 是否隐藏导航栏
url = url + "&navigationBarHidden=false";    

var appURL = "app://push/?url=" + encodeURIComponent(url)