鸿蒙开发Hvigor插件动态生成代码

Hvigor允许开发者实现自己的插件,开发者可以定义自己的构建逻辑,并与他人共享。Hvigor主要提供了两种方式来实现插件:基于hvigorfile脚本开发插件、基于typescript项目开发。下面以基于hvigorfile脚本开发插件进行介绍。

基于hvigorfile脚本开发

基于hvigorfile.ts脚本开发的方式,其优点是可实现快速开发,直接编辑工程或模块下hvigorfile.ts即可编写插件代码,不足之处是在多个项目中,无法方便的进行插件代码的复用和共享分发。

  1. 导入模块依赖。
// 导入接口
import { HvigorPlugin, HvigorNode } from '@ohos/hvigor'
  1. 编写插件代码。
    在hvigorfile.ts中定义插件方法,实现HvigorPlugin接口。
// 实现自定义插件
function customPlugin(): HvigorPlugin {
    return {
        pluginId: 'customPlugin',
        apply(node: HvigorNode) {
            // 插件主体
            console.log('hello customPlugin!');
        }
    }
}
  1. 在导出声明中使用插件。
export default {
    system: appTasks,
    plugins:[
        customPlugin()  // 应用自定义Plugin
    ]
}

使用hvigorfile插件动态生成navigation防混淆文件

我们在使用navigation的系统路由表时,每次添加新页面,都需要配置一下release环境防混淆。若将这些页面放在一个固定的目录下,则与我们的模块化设计相违背,若命名使用固定的前缀或后缀,总感觉有点多余,手动一个一个的添加,虽然符合我们的代码规范设计,但就是有点繁琐。有没有更方便的方式来处理这个混淆配置呢?

其实我们可以在写一个hvigorfilew插件来自动生成混淆配置文件。我们自定义一个HvigorPlugin任务,通过OhosHapContext对象读取module.json5文件中的routerMap字段,可以获取系统路由表的名称,再读取profile目录下的路由表。解析json文件内存,并将页面路径写到一个混淆文件中,这样每次编译时,自动生成防混淆文件,我们只需要引入这个文件就可以了。示例如下

import { hapTasks, OhosHapContext, OhosPluginId } from '@ohos/hvigor-ohos-plugin'
import { HvigorPlugin, HvigorNode, FileUtil } from '@ohos/hvigor'

function parseRouterMap(): HvigorPlugin {
  return {
    pluginId: 'parseRouterMap',
    apply(node: HvigorNode) {
      const hapCtx = node.getContext(OhosPluginId.OHOS_HAP_PLUGIN) as OhosHapContext
      const moduleJson = hapCtx.getModuleJsonOpt()
      const routerMapName = moduleJson['module']['routerMap'].split(':')[1]
      const dir = hapCtx.getModulePath()
      const srcFile = FileUtil.pathResolve(dir, 'src', 'main', 'resources', 'base', 'profile', `${routerMapName}.json`)
      const json = FileUtil.readJson5(srcFile)
      const routerRuleFile = FileUtil.pathResolve(dir, 'obfuscation-router.txt')
      FileUtil.ensureFileSync(routerRuleFile)
      const routerMapArray = json['routerMap']
      let rules = '-keep-file-name\n'
      for (const element of routerMapArray) {
        const pageSourceFile = element['pageSourceFile']
        const path = pageSourceFile.substring(0, pageSourceFile.lastIndexOf('.'))
        rules += `${path}\n`
      }
      FileUtil.writeFileSync(routerRuleFile, rules)
    }
  }
}

export default {
  system: hapTasks,
  plugins:[parseRouterMap()]
}

编译后会在entry目录下生成obfuscation-router.txt防混淆文件,只要引入这个文件就可以了。

使用hvigorfile插件动态生成navigation页面枚举名称

我们在我们navigation的push跳转到新页面时,都得提前定义好系统路由表中的页面name,因为使用的name与系统路由表中定义的name不相同时,跳转页面则会白屏。有了前面的经验,其它我们也可以动态生成一个ets文件,将系统路由表中的页面名称自动生成一个枚举,这样就不用每次配置系统路由表,还是复制一下名称了。例如我们的系统路由表是这样的

{
  "routerMap": [
    {
      "name": "dialog",
      "pageSourceFile": "src/main/ets/pages/dialog/DialogPage.ets",
      "buildFunction": "dialogBuilder"
    },
    {
      "name": "web",
      "pageSourceFile": "src/main/ets/pages/web/WebPage.ets",
      "buildFunction": "webBuilder"
    },
    {
      "name": "login",
      "pageSourceFile": "src/main/ets/pages/login/LoginPage.ets",
      "buildFunction": "loginBuilder"
    }
  ]
}

我们现在实现一个hvigorfile插件,来解析系统路由表中的name字段,并生成对应的枚举值。示例如下

import { hapTasks, OhosHapContext, OhosPluginId } from '@ohos/hvigor-ohos-plugin'
import { HvigorPlugin, HvigorNode, FileUtil } from '@ohos/hvigor'

function parseRouterMap(): HvigorPlugin {
  return {
    pluginId: 'parseRouterMap',
    apply(node: HvigorNode) {
      const hapCtx = node.getContext(OhosPluginId.OHOS_HAP_PLUGIN) as OhosHapContext
      const moduleJson = hapCtx.getModuleJsonOpt()
      const routerMapName = moduleJson['module']['routerMap'].split(':')[1]
      const dir = hapCtx.getModulePath()
      const srcFile = FileUtil.pathResolve(dir, 'src', 'main', 'resources', 'base', 'profile', `${routerMapName}.json`)
      const json = FileUtil.readJson5(srcFile)
      const routerMapFile = FileUtil.pathResolve(dir, 'src', 'main', 'ets', 'Pages.ets')
      FileUtil.ensureFileSync(routerMapFile)
      const routerMapArray = json['routerMap']
      let ss = ''
      for (const element of routerMapArray) {
        const name = element['name']
        ss += `  ${name} = '${name}',\n`
      }
      ss = `export enum Pages {\n${ss}}`
      FileUtil.writeFileSync(routerMapFile, ss)
    }
  }
}

export default {
  system: hapTasks,
  plugins:[parseRouterMap()]
}

我们在ets目录下生成了一个Pages.ets文件,并将所有navigation页面生成对应的枚举值,页面跳转时,使用这些枚举值就不怕出错了。Pages.ets内容如下

export enum Pages {
  dialog = 'dialog',
  web = 'web',
  login = 'login',
}
#鸿蒙#
全部评论

相关推荐

使用AJAX进行异步通信的基本步骤如下:https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024创建XMLHttpRequest对象:使用JavaScript代码创建一个XMLHttpRequest对象,该对象用于进行异步通信。为XMLHttpRequest对象添加事件监听器:为XMLHttpRequest对象添加事件监听器,以便在通信状态改变时接收回调。创建请求:使用XMLHttpRequest对象的open方法创建一个HTTP请求。其中,需要指定请求的方法(GET或POST)和目标URL。设置请求头部:使用XMLHttpRequest对象的setRequestHeader方法设置请求头部,以便向服务器传递必要的信息,如数据格式等。发送请求:使用XMLHttpRequest对象的send方法发送请求。对于GET请求,可以将参数拼接到URL后面;对于POST请求,可以将参数以字符串或FormData对象的形式传递。处理响应:在XMLHttpRequest对象的事件回调函数中,使用responseText或responseXML属性来获取服务器的响应数据。可以使用这些数据来更新页面或进行其他操作。AJAX的原理是通过XMLHttpRequest对象实现与服务器的异步通信。在传统的同步通信中,浏览器发起请求后需要等待服务器响应,并在等待期间无法进行其他操作。而使用AJAX进行异步通信时,浏览器可以在发送请求后继续执行其他代码,不需要等待服务器响应。当响应返回后,浏览器会调用注册的回调函数来处理响应数据,从而实现异步更新页面内容。AJAX主要用于以下方面:https://www.nowcoder.com/issue/tutorial?zhuanlanId=Mg58Em&uuid=43521d43a8e341f888324dd690363024动态加载内容:可以在页面加载完成后通过AJAX请求服务器获取额外的内容,如文章列表、评论等。表单数据提交:可以通过AJAX将表单数据异步提交给服务器,而不需要刷新整个页面。轮询更新:可以周期性地向服务器发送请求,以获取热点数据的更新。需要注意的是,由于AJAX请求涉及跨域问题,可能会遇到安全性限制。在跨域请求时,需要服务器允许相关的请求,并且需要特别处理响应的数据。
点赞 评论 收藏
分享
2024-11-20
在牛客打卡269天,今天也很努力鸭!
点赞 评论 收藏
分享
点赞 收藏 评论
分享
牛客网
牛客企业服务