场景描述
使用原生能力startability启动其他应用前，开发者需要判断目标应用是否安装，从而执行不同的逻辑，例如：
场景一：支付时商户根据实际情况去判断，拉起支付应用还是h5页面。
场景二：分享场景与支付场景，需要列出多个用户可跳转的应用。
业务诉求：
场景一：支付时商户根据实际情况去判断，拉起支付应用还是h5页面
显示效果：
1.支付应用存在，拉起支付应用。
2.支付应用不存在，拉起h5页面进行支付。
核心代码
1.在拉起方的module.json5文件中配置querySchemes字段，表示本应用可能会用到的scheme查询，比如这里配置的payapp代表本应用可以使用bundleManager.canOpenLink()，来查询scheme为payapp的链接是否可以打开（payapp://xx?xx=1&yy=2）
"module": {
"querySchemes": [
"payapp",
],
}
2.在被拉起方的module.json文件中的skill字段中配置该应用支持的scheme协议，表示这个应用可以通过此协议打开。
"abilities": [
{
"skills": [
{
"entities": [
"entity.system.home"
],
"actions": [
"action.system.home"
],
"uris": [
{
"scheme": 'payapp'
}
],
}
]
}
]
3.在拉起方中通过bundleManager.canOpenLink()判断该链接能否打开，可以打开的话跳转支付应用进行支付，不能打开的话跳转h5页面来下载应用或者支付。
// payapp:// 后的字段可以自定义，需要由被拉起方应用进行处理
let paylink = 'payapp://startpay?apppid=123456&page=xxx/pay&query=10';
let paydata = bundleManager.canOpenLink(paylink);
if (paydata) {
let want: Want = {
uri: paylink
};
let context = getContext(this) as common.UIAbilityContext;
context.startAbility(want, (error: BusinessError) => {
console.error(`error.code = ${error.code}`);
});
} else {
this.pageInfos.pushPath({ name: 'PayWeb' })
}
//PayWeb
import web_webview from '@ohos.web.webview';
import business_error from '@ohos.base';
@Component
export struct PayWebInfo {
@Consume('pageInfos') pageInfos: NavPathStack;
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
aboutToAppear() {
try {
this.webviewController.loadUrl($rawfile("pay.html"));
} catch (error) {
let e: business_error.BusinessError = error as business_error.BusinessError;
console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);
}
}
build() {
NavDestination() {
Column() {
Web({ src: $rawfile("pay.html"), controller: this.webviewController })
}.width('100%').height('100%')
}.hideTitleBar(true)
}
}
4.被调用方在冷启动热启动的情况下都要拉起同一个支付页面，就需要在onNewWant，onCreate，onWindowStageCreate中都添加跳转支付页面的相关逻辑。
//定义一个接口接收want传入的数据
interface StartParm {
bundleName?: string
uriResult: uri.URI
started: boolean
}
//将want数据存入
function parseStartWant(want: Want): StartParm | undefined {
if (want.uri) {
let startParam: StartParm = {
bundleName: want.bundleName,
uriResult: new uri.URI(want.uri),
started: false
}
return startParam
} else {
return undefined
}
}
export default class EntryAbility extends UIAbility {
startParam?: StartParm
// 冷热启动均执行，用于跳转支付页面
action() {
if (this.startParam && !this.startParam.started) {
this.startParam.started = true
let pageInfos = AppStorage.get<NavPathStack>("pageInfos") as NavPathStack;
//判断支付页面是否存在
let data =pageInfos.getIndexByName('PayPage')
if ( data.length == 0 ) {
pageInfos.pushPath({ name: 'PayPage' })
}else {
pageInfos.removeByName('PayPage')
pageInfos.pushPath({ name: 'PayPage' })
}
}
}
onCreate(want: Want, launchParam: AbilityConstant.LaunchParam): void {
this.startParam = parseStartWant(want)
//本Demo通过AppStorage将传入的数据展示在页面上，例如消费应用，消费金额等
AppStorage.setOrCreate<StartParm>("Param",this.startParam );
}
onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
this.startParam = parseStartWant(want)
//数据处理同onCreate
AppStorage.setOrCreate<StartParm>("Param",this.startParam );
//跳转支付页面
this.action()
}
onWindowStageCreate(windowStage: window.WindowStage): void {
windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(0x0000, 'testTag', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
//由于时序问题，需要使用setTimeout保证页面压栈的顺序
setTimeout(()=>{
//跳转支付页面
this.action()
})
});
}
}
场景二：分享场景与支付场景，需要列出多个用户可跳转的应用。
显示效果：
核心代码
1.同场景一Step1，需要在querySchemes中配置需要进行跳转检测的应用。
"module": {
...
"querySchemes": [
"bank1",
...
"bank9"
]
}
2.在拉起方中遍历想要跳转的所有应用，并在弹窗中显示可以被拉起的应用。
准备被拉起方的app信息，其中目标app的图标需要拉起方应用自己准备。uri字段规格详见文末的常见问题Q1。
private payApps: PayApp[] = [
new PayApp('银行1', $r("app.media.startIcon"), 'bank1://xx?xx'),
...
new PayApp('银行9', $r("app.media.startIcon"), 'bank9://xx?xx'),
]
添加按钮，点击出现支付应用列。
Button("跳转支付列表")
.onClick(() => {
if (this.dialogController != null) {
this.dialogController.open()
}
})
添加自定义弹窗，定义弹窗以及弹窗中分割线的属性：
@State egDivider: DividerTmp = new DividerTmp(1, 10, 10, '# ffe9f0f0')
//增加一个类方便定义分割线属性
class DividerTmp {
strokeWidth: Length = 1 //分割线宽度
startMargin: Length = 10 //分割线距离左端长度
endMargin: Length = 10 //分割线距离右端长度
color: ResourceColor = '# ffe9f0f0'//分割线颜色
constructor(strokeWidth: Length, startMargin: Length, endMargin: Length, color: ResourceColor) {
this.strokeWidth = strokeWidth
this.startMargin = startMargin
this.endMargin = endMargin
this.color = color
}
}
//自定义弹窗
dialogController: CustomDialogController | null = new CustomDialogController({
builder: CustomDialogExample({
payApps: this.payApps,
egDivider: this.egDivider
}),
})
在弹窗显示之前判断应用是否已安装，在弹窗中显示已安装的应用，并实现点击跳转到该应用。
//每行app的信息
class PayApp {
name: string;
icon: Resource;
link: string;
installed: boolean = false
...
}
@CustomDialog
struct CustomDialogExample {
@Prop payApps: PayApp[]
@Prop egDivider: DividerTmp
controller?: CustomDialogController
aboutToAppear(): void {
for (let item of this.payApps) {
item.installed = bundleManager.canOpenLink(item.link)
}
this.payApps = this.payApps.filter((app) => app.installed)
}
build() {
Column() {
...
List() {
ForEach(this.payApps, (item: PayApp) => {
ListItem() {
Row() {
Image(item.icon).width(25).height(25).margin(10)
Text(item.name).fontSize(20)
}
.onClick(() => {
let context = getContext() as common.UIAbilityContext
context.startAbility({ uri: item.link })
})
.justifyContent(FlexAlign.Start)
}
}, (item: PayApp) => item.name.toString())
}
}
}
}
以上就是本篇文章所带来的鸿蒙开发中一小部分技术讲解；想要学习完整的鸿蒙全栈技术。可以在结尾找我可全部拿到！
下面是鸿蒙的完整学习路线，展示如下：
除此之外，根据这个学习鸿蒙全栈学习路线，也附带一整套完整的学习【文档+视频】，内容包含如下：
内容包含了：（ArkTS、ArkUI、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、鸿蒙南向开发、鸿蒙项目实战）等技术知识点。帮助大家在学习鸿蒙路上快速成长！
鸿蒙【北向应用开发+南向系统层开发】文档
鸿蒙【基础+实战项目】视频
鸿蒙面经
为了避免大家在学习过程中产生更多的时间成本，对比我把以上内容全部放在了↓↓↓想要的可以自拿喔！谢谢大家观看！
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
