首页 > 其他分享 >【HarmonyOS】如何实现entry模块页面跳转HSP共享包页面(API9)

【HarmonyOS】如何实现entry模块页面跳转HSP共享包页面(API9)

时间:2023-12-15 15:47:51浏览次数:27  
标签:API9 library HSP 模块 跳转 entry 页面

【关键字】

API9、ArkTS、跨包路由跳转、entry模块页面跳转HSP共享包页面

 

【写在前面】

本篇文章主要介绍使用API9 ArkTS开发鸿蒙应用时,如何实现从entry模块或feature模块页面,跳转到HSP library模块的页面。

 

【开发步骤】

第一步:在API9 Stage模型的工程中,【右键-New-Module】选择Shared Library模板新建HSP共享包模块,命名为library,会在工程目录下生成library模块;

cke_562.png

cke_1053.png

cke_1584.png

第二步:在entry模块页面中,定义按钮点击实现,编写跳转代码,如下所示:

import router from '@ohos.router';

@Entry
@Component
struct Index {
  build() {
    Column() {
      Button("跳转library页面").onClick(() => {
        router.pushUrl({
          url: '@bundle:com.harmonyos.myapplication/library/ets/pages/Index'
        }).then(() => {
          console.log("push page success");
        }).catch(err => {
          console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
        })
      })
    }
    .width("100%")
    .height("100%")
  }
}

其中router.pushUrl方法的入参中url内容的模板为:

'@bundle:包名(bundleName)/模块名(moduleName)/路径/页面所在的文件名(不加.ets后缀)'

第三步:在DevEco Studio中点击【Run-Edit Configurations】打开配置项,点击entry模块下的“Deploy Multi Hap”勾选“Deploy Multi Hap Packages”将entry和library模块一起运行,如下所示:

cke_4576.png

第四步:运行工程,点击“跳转library页面”按钮,即可实现跳转到library的index页面,最终效果如下所示:

 

【参考文档】

HSP-跨包页面路由跳转

标签:API9,library,HSP,模块,跳转,entry,页面
From: https://www.cnblogs.com/mayism123/p/17903481.html

相关文章

  • fastapi-cdn-host发布了 -- FastAPI接口文档/docs页面空白的问题,现在很好解决了~
    代码地址:https://github.com/waketzheng/fastapi-cdn-host如何安装:pipinstallfastapi-cdn-host使用方法:fromfastapiimportFastAPIfromfastapi_cdn_hostimportmonkey_patch_for_docs_uiapp=FastAPI()monkey_patch_for_docs_ui(app)#增加这行就能解决/docs页面空......
  • 汇编-JGE有符号大于等于则跳转
      .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,+100cmpeax,+10jgelabel0;有符号大于......
  • 汇编-JNGE有符号小于则跳转
     .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,+10cmpeax,+100jngelabel0;有符号小于则......
  • 汇编-JNG有符号小于等于则跳转
      .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,+10cmpeax,+10jnglabel0;有符号小于......
  • 汇编-JG有符号大于则跳转
     .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,+10cmpeax,+10jglabel0;有符号大于则跳......
  • Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)
    1、需求使用Vue+ElementUI实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,本文实现为跳转到新增页面。2、实现1)列表页index.vue<el-table><!--其他列--><el-table-columnlabel="操作"width="150"><templateslot-scope=......
  • 汇编-JNAE无符号小于则跳转
     .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,10cmpeax,100;比较eax和10的大小jnaelabel......
  • 购物车页面,根据选中的商品来动态更改总价格
    一、前端代码首先引入:import{ref,computed}from'vue'将checked数组更新为响应式引用,使用ref()函数:constchecked=ref([])使用v-model将checked数组绑定到van-checkbox组件上:<van-checkbox:name="item.cartID"checked-color="#ff5d4e"v-mod......
  • 汇编-JE等于则跳转和JNE不等于则跳转
     JE等于则跳转 .386.modelflat,stdcalloptioncasemap:none.stack4096IncludeIrvine32.incincludelibIrvine32.libExitProcessPROTO,dwExitCode:DWORD.data.codemainPROCmoveax,10cmpeax,10;相等相减......
  • iframe父子页面通信相互调用传递参数多个postMessage
    效果如何运行父页面代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title>......