适用于鸿蒙的路由方法插件

在ArkWeb项目中，前端调用鸿蒙原生的方法需要使用javaScriptProxy，需要创建我们自己的代理对象，该代理对象中会包含大量的自定义方法，还需要维护大量的方法名字符串，比较难以维护。

arkwebapiplugin插件就是将一个个处理方法与path进行映射，类似于spring boot的controller层

引入插件

1. 首先需要新建两个装饰器（注解）

/**
 * 装饰器controller，作用于类
 * @param parma
 * @returns
 */
export function WebApiController(parma: WebApiControllerParams) {
  return Object;
}

export interface WebApiControllerParams {
  basePath: string;
}

/**
 * 装饰器mapper，作用于方法
 * @param params
 * @returns
 */
export function WebApiMethod(params: WebApiMethodParams) {
  return (target: ESObject, propertyKey: string, descriptor: PropertyDescriptor) => {
  };
}

export interface WebApiMethodParams {
  path: string;
  requestType?: 'GET' | 'POST' | 'PUT' | 'DELETE';
}

2. 引入插件

在hvigor/hvigor-config.json5中引入插件依赖

"dependencies": {
    "@wujingze-self/arkwebapiplugin": "1.0.12"
}

3. 使用插件

在需要使用该插件的模块的hvigorfile.ts中使用插件

import { hapTasks } from '@ohos/hvigor-ohos-plugin';
import { modulePlugin } from '@hadss/hmrouter-plugin';
import { scanWebApiPlugin } from '@wujingze-self/arkwebapiplugin';

export default {
  system: hapTasks, /* Built-in plugin of Hvigor. It cannot be modified. */
  plugins: [modulePlugin(), scanWebApiPlugin('src/main/ets/pages/day34/webapi')] // 初始化传入需要扫描的包
}

如何使用

1. 在扫描的包下创建Controller

   import { WebApiController, WebApiMethod } from "library_arkweb_api";
      
   @WebApiController({ basePath: '/user' })
   export default class UserController {
     @WebApiMethod({ path: '/add', requestType: 'PUT' })
     addUser() {
      
     }
      
     @WebApiMethod({ path: '/find', requestType: 'GET' })
     findUser() {
      
     }
      
     @WebApiMethod({ path: '/delete', requestType: 'DELETE' })
     deleteUser() {
      
     }
      
     @WebApiMethod({ path: '/login', requestType: 'POST' })
     login() {
      
     }
   }

2. 重新build一下模块Generate Build Profile

   此时会在当前模块下生成src/main/ets/webapi/generated/WebApiControllerManager.ets

      
   import BuildController from "../../pages/day34/webapi/controller/BuildController"
   import ShopController from "../../pages/day34/webapi/ShopController"
   import UserController from "../../pages/day34/webapi/UserController"
      
   export default class WebApiControllerManager {
      
       static readonly putMethod = new Map<string,(params?:object)=>object|void>()
       static readonly getMethod = new Map<string,(params?:object)=>object|void>()
       static readonly postMethod = new Map<string,(params?:object)=>object|void>()
       static readonly deleteMethod = new Map<string,(params?:object)=>object|void>()
      
       static {
           const BuildControllerInstance = new BuildController()
           const ShopControllerInstance = new ShopController()
           const UserControllerInstance = new UserController()
              
           WebApiControllerManager.putMethod.set(
               "/build/add",
               BuildControllerInstance.addBuild.bind(BuildControllerInstance)
           )
      
           WebApiControllerManager.putMethod.set(
               "/shop/add",
               ShopControllerInstance.addShop.bind(ShopControllerInstance)
           )
      
           WebApiControllerManager.putMethod.set(
               "/user/add",
               UserControllerInstance.addUser.bind(UserControllerInstance)
           )
      
           WebApiControllerManager.getMethod.set(
               "/user/find",
               UserControllerInstance.findUser.bind(UserControllerInstance)
           )
      
           WebApiControllerManager.deleteMethod.set(
               "/user/delete",
               UserControllerInstance.deleteUser.bind(UserControllerInstance)
           )
      
           WebApiControllerManager.postMethod.set(
               "/user/login",
               UserControllerInstance.login.bind(UserControllerInstance)
           )
      
       }
      
   }

3. 这样就可以根据请求类型和请求path得到对应的函数进行调用了，javaScriptProxy的代理对象只需要添加一个方法，进行路由的处理即可