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

共享包HSP内容访问

HarmonyOS

胖头鱼圆滚滚

2024-05-22 22:24:43

浏览

回答 1

待解决

回答 1

按赞同

按时间

单花红丝线

本文主要介绍从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

2024-05-23 15:54:58

如何写精华回答，获更多曝光？

发布

51CTO

51CTO博客

51CTO学堂

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

订阅鸿蒙技术特刊，精选内容抢先看