共享包HSP内容访问,它的使用场景是什么?

共享包HSP内容访问


HarmonyOS
2024-05-22 22:24:43
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
dushinongmin

本文主要介绍从hap跳转至hsp中的页面的场景

典型使用场景包括:

1.从entry模块跳转至library模块中的页面

2.使用web组件加载本地html页面

使用的核心API

应用内HSP开发指导

使用Web组件加载页面

核心代码解释

1.在entry模块中,添加一个按钮跳转至library模块中的index页面(路径为:library/src/main/ets/pages/menu.ets)

2.将本地页面文件放在应用的rawfile目录下,可以在Web组件创建的时候指定默认加载的本地页面 ,并且加载完成后可通过调用loadUrl()接口变更当前Web组件的页面。

import router from '@ohos.router'; 
import { BusinessError } from '@ohos.base'; 
  
@Entry 
@Component 
struct Index { 
  @State message: string = 'Hello World' 
  
  build() { 
    Row() { 
      Column() { 
        Text(this.message) 
          .fontSize(50) 
          .fontWeight(FontWeight.Bold) 
        // 添加按钮,以响应用户点击 
        Button() { 
          Text('click to pay') 
            .fontSize(30) 
            .fontWeight(FontWeight.Bold) 
        } 
        .type(ButtonType.Capsule) 
        .margin({ 
          top: 20 
        }) 
        .backgroundColor('#0D9FFB') 
        .width('40%') 
        .height('5%') 
        // 绑定点击事件 
        .onClick(() => {/*不用src/main*/ 
          router.pushUrl({url:"@bundle:com.example.hspdemo/library/ets/pages/Index" }) 
            .then(() => { 
              console.log("push page success"); 
            }).catch((err: BusinessError) => { 
            console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); 
          }) 
          // router.pushNamedRoute({name:"lib_page"}) 
          //   .then(() => { 
          //     console.log("push page success"); 
          //   }).catch((err: BusinessError) => { 
          //   console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`); 
          // }) 
        }) 
        .width('100%') 
      } 
      .height('100%') 
    } 
  } 
} 
// xxx.ets 
import web_webview from '@ohos.web.webview'; 
import business_error from '@ohos.base'; 
import hilog from '@ohos.hilog'; 
  
@Entry({routeName: 'lib_page'}) 
@Component 
export struct WebComponent { 
  webviewController: web_webview.WebviewController = new web_webview.WebviewController(); 
  onPageShow(){ 
    hilog.info(0x0000, 'javaleetest', '%{public}s', 'hsp onPageShow'); 
  } 
  build() { 
    Column() { 
      Button('loadUrl') 
        .onClick(() => { 
          try { 
            // 点击按钮时,通过loadUrl,跳转到local1.html 
            this.webviewController.loadUrl($rawfile("local.html")); 
          } catch (error) { 
            let e: business_error.BusinessError = error as business_error.BusinessError; 
            console.error(`ErrorCode: ${e.code},  Message: ${e.message}`); 
          } 
        }) 
      // 组件创建时,通过$rawfile加载本地文件local.html 
      Web({ src: $rawfile("local.html"), controller: this.webviewController }) 
    } 
  } 
} 
<!-- local.html --> 
<!DOCTYPE html> 
<html> 
<body> 
<p>Hello World</p> 
</body> 
</html>

实现效果

适配的版本信息

IDE:DevEco Studio 4.0.1.601

SDK:HarmoneyOS 4.0.10.8

分享
微博
QQ
微信
回复
2024-05-23 15:54:58
相关问题
请问ArkTS中this使用场景是什么
775浏览 • 1回复 待解决
访问HSP中ArkUI组件访问与开发
446浏览 • 1回复 待解决
关于emitter、eventHub使用场景
958浏览 • 1回复 待解决
napi 基本使用场景示例
461浏览 • 1回复 待解决
Stage模型下HSP安装时机是什么
728浏览 • 1回复 待解决
TiDB优势?有哪些应用场景
2467浏览 • 1回复 待解决
基于mysql悲观锁用场景
1453浏览 • 1回复 待解决
HAP和HSP之间如何实现数据共享
577浏览 • 1回复 待解决