目录

概述

本文将描述在UAP Mobile开发平台开发一个多页面交互的应用。这里的多页面交互不仅涉及多个页面间相互导航切换，还包括如下内容：

  • 页面间传值
  • 页面间数据共享

从实现方式上，我们可以分为

  • 通过JS代码实现 多页面交互
  • 通过设计器公共服务实现多页面交互

打开页面

打开新页面同时关闭原页面

使用$view.open方法可以实现打开一个新页面。其参数如下：

  • viewid：目标页面的全名（包名+页面名），注意，约定规范为页面名首字母大写
  • isKeep：在打开新页面的同时，是否保留当前页面

示例代码

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名
  3.     "isKeep" : "false"
  4. });

以上代码实现，在当前页面关闭的情况下，再打开一个新页面com.yyuap.demo.List

打开新页面同时保留原页面

使用$view.open方法可以实现打开一个新页面。其参数如下：

  • viewid：目标页面的全名（包名+页面名），注意，约定规范为页面名首字母大写
  • isKeep：在打开新页面的同时，是否保留当前页面

示例代码

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名
  3.     "isKeep" : "true"
  4. });

以上代码实现，在当前页面不关闭的情况下，再打开一个新页面com.yyuap.demo.List

此时当前共有两个页面，当新页面关闭后，会自动显示原来未关闭的页面

关闭页面

使用$view.close()可以关闭当前页面。该方法通常和$view.open一起使用，注意open时的参数isKeep等于true。

例如

在com.yyuap.demo.Add页面有如下代码：

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名，
  3.     "isKeep" : "true"
  4. });

在com.yyuap.demo.List页面有如下代码：

  1. $view.close();

页面间传值

使用$view.open传递参数

使用$view.open方法可以实现打开一个新页面。其参数如下：

  • viewid：目标页面的全名（包名+页面名），注意，约定规范为页面名首字母大写。
  • isKeep：在打开新页面的同时，是否保留当前页面
  • 自定义参数（可选）

示例代码

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名，
  3.     "isKeep" : "false",
  4.     "data" : {a:1, b:2}//缓存自定义参数
  5. });

$view.open方法打开一个页面并传参数的重点是自定义参数，这里的参数是比较灵活的，可以是String，JSON，数组等形式。参数的key名称也是可以自由定义的。

例如上例中的第三个参数data就是一个自定义的参数，还可以实现多个参数的传递，例如;

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名，
  3.     "isKeep" : "false",
  4.     "data1" : {
  5.         a : 1,
  6.         b : 2
  7.     }, //参数是JSONObject
  8.     "data2" : [{
  9.         a : 1,
  10.         b : 2
  11.     }, {
  12.         x : 1,
  13.         y : 2
  14.     }], //参数是JSONArray
  15.     "data3" : "{x:1,y:2}", //参数是Object对应的String
  16.     "data4" : "[{a:1,b:2},{x:1,y:2}]", //参数是Array对应的String
  17.     "data5" : "helloworld"//参数是String
  18. });

目标页面获取参数

在目标页面获取参数有3种方式：

  • $param.getString(paramName)，将参数值转化为一个字符串
  • $param.getJSONObject(paramName)，将参数值转化为一个JSON对象，转化失败有提示并返回null
  • $param.getJSONArray(paramName)，将参数值转化为一个JSON数组，转化失败有提示并返回null

我们以一个具体的例子加以说明这3个API的使用，例如有如下代码

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List", //目标页面（首字母大写）全名，
  3.     "isKeep" : "false",
  4.     "data1" : {
  5.         a : 1,
  6.         b : 2
  7.     }, //参数是JSONObject
  8.     "data2" : [{
  9.         a : 1,
  10.         b : 2
  11.     }, {
  12.         x : 1,
  13.         y : 2
  14.     }], //参数是JSONArray
  15.     "data3" : "{x:1,y:2}", //参数是JSONObject对应的String
  16.     "data4" : "[{a:1, b:2},{x:1,y:2}]", //参数是JSONArray对应的String
  17.     "data5" : "hello world"//参数是String
  18. });

以上面的例子加以说明如下：

（1）getString的用法

无论参数值原始类型，该方法统一将参数转化为字符串类型

  1. var data1 = $param.getString("data1");

结果：”{a:1,b:2}”
解释：open方法中data1是一个JSONObject，使用getString方法会将参数值转化为String

  1. var data2 = $param.getString("data2");

结果：”[{a:1,b:2},{x:1,y:2}]”
解释：open方法中data2是一个JSONArray，使用getString方法将参数值转化为String形式

  1. var data3 = $param.getString("data3");

结果：”{x:1,y:2}”
解释：open方法中data3原本就是字符串，使用getString方法将参数值转化为String形式

  1. var data4 = $param.getString("data4");

结果：”[{a:1,b:2},{x:1,y:2}]”
解释：open方法中data4原本就是字符串，使用getString方法将参数值转化为String形式

  1. var data5 = $param.getString("data5");

结果：”hello world”
解释：将参数值转化为String形式

（2）getJSONObject的用法

无论参数值原始类型，该方法统一将参数转化为JSONObject类型，如果转化失败，返回null

  1. var data = $param.getJSONObject("data1");

结果：{a:1,b:2}
解释：open方法中data1是一个JSONObject，使用getJSONObject方法会将参数值转化为JSONObject

  1. var data = $param.getJSONObject("data3");

结果：{a:1,b:2}
解释：将参数值转化为JOSNObject

以下转化失败，以下返回null

  1. var data2 = $param.getJSONArray("data2");
  2. var data4 = $param.getJSONObject("data4");
  3. var data5 = $param.getJSONObject("data5");

结果：null
解释：转化失败，返回null

（3）getJSONArray

  1. var data = $param.getJSONObject("data2");

结果：[{a:1,b:2},{x:1,y:2}]
解释：将参数值转化为JSONArray

  1. var data3 = $param.getJSONArray("data4");

结果：[{a:1,b:2},{x:1,y:2}]
解释：将参数值转化为JOSNArray

以下转化失败，以下返回null

  1. $param.getJSONArray("data1");
  2. $param.getJSONArray("data3");
  3. $param.getJSONArray("data5");

关闭页面并返回值

在某些场景下，我们需要在当前页面不关闭的情况下打开一个新的页面，在新页面操作完毕关闭后，返回一些数据给源页面，源页面接受到这些参数再进行一些业务处理。

这是一种页面参照的典型用法。

我们是可以使用$view.Open打开一个新页面，并指定参数isKeep为true，参数callback为一个回调JS方法。

  1. {
  2.     "viewid" : "com.yyuap.demo.List",
  3.     "isKeep" : "true",
  4.     "callback" : "mycallback()"
  5. }

新页面可以调用$view.close()关闭，close方法接受一个JSON对象参数， 其结构如下：

  1. {
  2.     "resultcode" : "15", //以下是自定义参数key-value
  3.     "data1" : {a:1,b:2},
  4.     "data2" : "{x:1,y:2}",
  5. }

其中resultcode等于15，是表明该页面关闭后，原页面会出发callback回调方法。默认resultcode等于0，即没有回调，新版本（V2.7及之后）中已经不需要传此参数。

完整的代码实现如下

  1. $view.open({
  2.     "viewid" : "com.yyuap.demo.List",
  3.     "isKeep" : "true",
  4.     "callback" : "mycallback()"
  5. });
  7. function mycallback() {
  8.     var data1 = $param.getJSONObject("data1");
  9.     var data2 = $param.getString("data2");
  10. }
  12. $view.close({
  13.     "resultcode" : "15",
  14.     "data1" : {
  15.         a : 1,
  16.         b : 2
  17.     },
  18.     "data2" : "{x:1,y:2}",
  19. });
文档更新时间: 2018-01-12 16:27