用户从卡片跳转到我的快应用中的某个页面后,我的应用如何直接将用户带回卡片?
After a user is redirected to a page in my quick app from a card, how can my app directly take them back to the card?
在我的华为快应用中,当我在快应用中打开页面A,然后点击卡片或其他媒体进入页面B时,点击左上角的返回按钮将它们重定向到页面A第一的。但预计会在点击后退按钮后直接重定向到卡片。它是如何发生的?
问题是由页面默认启动方式标准引起的。在这种模式下,用户打开的每一个新页面都会缓存在页面栈中,所以多次打开的页面会被重复缓存。结果,用户一次只能关闭一个页面。为解决该问题,建议将B页面的启动方式设置为clearTask,在用户点击卡片跳转快应用时动态声明。在这种情况下,当页面 B 打开时页面 A 关闭,这意味着页面堆栈中只存在页面 B。当用户点击返回按钮时,将直接退出快应用。
您可以使用以下示例代码将用户从卡片重定向到使用深度链接的快应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quick app test</title>
</head>
<body>
<a href="hwfastapp://com.huawei.hello1/Test?___PARAM_LAUNCH_FLAG___=clearTask">Open through hwfastapp.</a>
<br>
<br>
<a href="hap://app/com.huawei.hello1/Test?___PARAM_LAUNCH_FLAG___=clearTask">Open through hap.</a>
</body>
</html>
卡片跳转的快应用目标页面(根据当前页面栈数,始终只有一个页面)
<template>
<div class="container">
<text>___PARAM_LAUNCH_FLAG___=</text>
<text>{{taskflag}}</text>
<text>Number of current page stacks.</text>
<text>{{length}}</text>
</div>
</template>
<style>
.container {
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
}
text {
margin-bottom: 50px;
}
</style>
<script>
import router from '@system.router';
export default {
data: {
// The default is the local app internal image
photoUri: '/Common/logo.png',
taskflag:'',
PARAM_LAUNCH_FLAG:'',
length:''
},
onInit() {
this.$page.setTitleBar({ text: 'deepLink' })
var that=this;
that.taskflag=this.PARAM_LAUNCH_FLAG;
// Call the getPages method.
let pages = router.getPages()
// The obtained value is a JSON array. Therefore, the value cannot be displayed directly. You can use the following method to display the value:
console.log("tag", this.printJSONArray(router.getPages()));
that.length= router.getLength();
console.log("pages' length = "+that.length);
},
printJSONArray(array) {
let result = ""
const suffix = ", "
Array.isArray(array) && array.forEach((element, index) => {
result = result + JSON.stringify(element) + (index === array.length-1 ? "" : ", ")
})
return result
}
}
</script>
页面启动方式可以配置为manifest文件静态声明和动态传参声明两种方式,推荐后者。静态声明方式适用于设置固定,无法灵活调整的场景。
更多详情,可以参考这篇Docs and deep link documentation。
在我的华为快应用中,当我在快应用中打开页面A,然后点击卡片或其他媒体进入页面B时,点击左上角的返回按钮将它们重定向到页面A第一的。但预计会在点击后退按钮后直接重定向到卡片。它是如何发生的?
问题是由页面默认启动方式标准引起的。在这种模式下,用户打开的每一个新页面都会缓存在页面栈中,所以多次打开的页面会被重复缓存。结果,用户一次只能关闭一个页面。为解决该问题,建议将B页面的启动方式设置为clearTask,在用户点击卡片跳转快应用时动态声明。在这种情况下,当页面 B 打开时页面 A 关闭,这意味着页面堆栈中只存在页面 B。当用户点击返回按钮时,将直接退出快应用。
您可以使用以下示例代码将用户从卡片重定向到使用深度链接的快应用:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Quick app test</title>
</head>
<body>
<a href="hwfastapp://com.huawei.hello1/Test?___PARAM_LAUNCH_FLAG___=clearTask">Open through hwfastapp.</a>
<br>
<br>
<a href="hap://app/com.huawei.hello1/Test?___PARAM_LAUNCH_FLAG___=clearTask">Open through hap.</a>
</body>
</html>
卡片跳转的快应用目标页面(根据当前页面栈数,始终只有一个页面)
<template>
<div class="container">
<text>___PARAM_LAUNCH_FLAG___=</text>
<text>{{taskflag}}</text>
<text>Number of current page stacks.</text>
<text>{{length}}</text>
</div>
</template>
<style>
.container {
flex-direction: column;
align-content: center;
align-items: center;
justify-content: center;
}
text {
margin-bottom: 50px;
}
</style>
<script>
import router from '@system.router';
export default {
data: {
// The default is the local app internal image
photoUri: '/Common/logo.png',
taskflag:'',
PARAM_LAUNCH_FLAG:'',
length:''
},
onInit() {
this.$page.setTitleBar({ text: 'deepLink' })
var that=this;
that.taskflag=this.PARAM_LAUNCH_FLAG;
// Call the getPages method.
let pages = router.getPages()
// The obtained value is a JSON array. Therefore, the value cannot be displayed directly. You can use the following method to display the value:
console.log("tag", this.printJSONArray(router.getPages()));
that.length= router.getLength();
console.log("pages' length = "+that.length);
},
printJSONArray(array) {
let result = ""
const suffix = ", "
Array.isArray(array) && array.forEach((element, index) => {
result = result + JSON.stringify(element) + (index === array.length-1 ? "" : ", ")
})
return result
}
}
</script>
页面启动方式可以配置为manifest文件静态声明和动态传参声明两种方式,推荐后者。静态声明方式适用于设置固定,无法灵活调整的场景。
更多详情,可以参考这篇Docs and deep link documentation。