鸿蒙NEXT版实战开发：前端页面调用应用侧函数（前端页面JavaScript） ...

往期鸿蒙全套实战出色文章必看内容：

• 鸿蒙开发核心知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

前端页面调用应用侧函数

开发者使用Web组件将应用侧代码注册到前端页面中，注册完成之后，前端页面中使用注册的对象名称就可以调用应用侧的函数，实现在前端页面中调用应用侧方法。
注册应用侧代码有两种方式，一种在Web组件初始化调用，使用javaScriptProxy()接口。别的一种在Web组件初始化完成后调用，使用registerJavaScriptProxy()接口。
在下面的示例中，将test()方法注册在前端页面中， 该函数可以在前端页面触发运行。

• javaScriptProxy()接口使用示例如下。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  4. class testClass {
  5.   constructor() {
  6.   }
  8.   test(): string {
  9.     return 'ArkTS Hello World!';
  10.   }
  11. }
  13. @Entry
  14. @Component
  15. struct WebComponent {
  16.   webviewController: webview.WebviewController = new webview.WebviewController();
  17.   // 声明需要注册的对象
  18.   @State testObj: testClass = new testClass();
  20.   build() {
  21.     Column() {
  22.       // Web组件加载本地index.html页面
  23.       Web({ src: $rawfile('index.html'), controller: this.webviewController})
  24.         // 将对象注入到web端
  25.         .javaScriptProxy({
  26.           object: this.testObj,
  27.           name: "testObjName",
  28.           methodList: ["test"],
  29.           controller: this.webviewController,
  30.           // 可选参数
  31.           asyncMethodList: [],
  32.           permission: '{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"resource","host":"rawfile","port":"","path":""},' +
  33.                       '{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodName":"test","urlPermissionList":' +
  34.                       '[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource","host":"rawfile","port":"","path":""}]},' +
  35.                       '{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port":"","path":"t"},' +
  36.                       '{"scheme":"u","host":"v","port":"","path":""}]}]}}'
  37.         })
  38.     }
  39.   }
  40. }

  复制代码
• 应用侧使用registerJavaScriptProxy()接口注册。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6.   constructor() {
  7.   }
  9.   test(): string {
  10.     return "ArkUI Web Component";
  11.   }
  13.   toString(): void {
  14.     console.log('Web Component toString');
  15.   }
  16. }
  18. @Entry
  19. @Component
  20. struct Index {
  21.   webviewController: webview.WebviewController = new webview.WebviewController();
  22.   @State testObj: testClass = new testClass();
  24.   build() {
  25.     Column() {
  26.       Button('refresh')
  27.         .onClick(() => {
  28.           try {
  29.             this.webviewController.refresh();
  30.           } catch (error) {
  31.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  32.           }
  33.         })
  34.       Button('Register JavaScript To Window')
  35.         .onClick(() => {
  36.           try {
  37.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"],
  38.                     // 可选参数, asyncMethodList
  39.                     [],
  40.                     // 可选参数, permission
  41.                     '{"javascriptProxyPermission":{"urlPermissionList":[{"scheme":"resource","host":"rawfile","port":"","path":""},' +
  42.                     '{"scheme":"e","host":"f","port":"g","path":"h"}],"methodList":[{"methodName":"test","urlPermissionList":' +
  43.                     '[{"scheme":"https","host":"xxx.com","port":"","path":""},{"scheme":"resource","host":"rawfile","port":"","path":""}]},' +
  44.                     '{"methodName":"test11","urlPermissionList":[{"scheme":"q","host":"r","port":"","path":"t"},' +
  45.                     '{"scheme":"u","host":"v","port":"","path":""}]}]}}'
  46.             );
  47.           } catch (error) {
  48.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  49.           }
  50.         })
  51.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  52.     }
  53.   }
  54. }

  复制代码
  阐明
  
  
  
  • 使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效。
    
     
  
• 可选参数permission是一个json字符串，示例如下：
  
  1. {
  2.   "javascriptProxyPermission": {
  3.     "urlPermissionList": [       // Object级权限，如果匹配，所有Method都授权
  4.       {
  5.         "scheme": "resource",    // 精确匹配，不能为空
  6.         "host": "rawfile",       // 精确匹配，不能为空
  7.         "port": "",              // 精确匹配，为空不检查
  8.         "path": ""               // 前缀匹配，为空不检查
  9.       },
  10.       {
  11.         "scheme": "https",       // 精确匹配，不能为空
  12.         "host": "xxx.com",       // 精确匹配，不能为空
  13.         "port": "8080",          // 精确匹配，为空不检查
  14.         "path": "a/b/c"          // 前缀匹配，为空不检查
  15.       }
  16.     ],
  17.     "methodList": [
  18.       {
  19.         "methodName": "test",
  20.         "urlPermissionList": [   // Method级权限
  21.           {
  22.             "scheme": "https",   // 精确匹配，不能为空
  23.             "host": "xxx.com",   // 精确匹配，不能为空
  24.             "port": "",          // 精确匹配，为空不检查
  25.             "path": ""           // 前缀匹配，为空不检查
  26.           },
  27.           {
  28.             "scheme": "resource",// 精确匹配，不能为空
  29.             "host": "rawfile",   // 精确匹配，不能为空
  30.             "port": "",          // 精确匹配，为空不检查
  31.             "path": ""           // 前缀匹配，为空不检查
  32.           }
  33.         ]
  34.       },
  35.       {
  36.         "methodName": "test11",
  37.         "urlPermissionList": [   // Method级权限
  38.           {
  39.             "scheme": "q",       // 精确匹配，不能为空
  40.             "host": "r",         // 精确匹配，不能为空
  41.             "port": "",          // 精确匹配，为空不检查
  42.             "path": "t"          // 前缀匹配，为空不检查
  43.           },
  44.           {
  45.             "scheme": "u",       // 精确匹配，不能为空
  46.             "host": "v",         // 精确匹配，不能为空
  47.             "port": "",          // 精确匹配，为空不检查
  48.             "path": ""           // 前缀匹配，为空不检查
  49.           }
  50.         ]
  51.       }
  52.     ]
  53.   }
  54. }

  复制代码
• index.html前端页面触发应用侧代码。
  
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.         let str = testObjName.test();
  10.         document.getElementById("demo").innerHTML = str;
  11.         console.info('ArkTS Hello World! :' + str);
  12.     }
  13. </script>
  14. </body>
  15. </html>

  复制代码

复杂类型使用方法

• 应用侧和前端页面之间转达Array。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6.   constructor() {
  7.   }
  9.   test(): Array<Number> {
  10.     return [1, 2, 3, 4]
  11.   }
  13.   toString(param: String): void {
  14.     console.log('Web Component toString' + param);
  15.   }
  16. }
  18. @Entry
  19. @Component
  20. struct Index {
  21.   webviewController: webview.WebviewController = new webview.WebviewController();
  22.   @State testObj: testClass = new testClass();
  24.   build() {
  25.     Column() {
  26.       Button('refresh')
  27.         .onClick(() => {
  28.           try {
  29.             this.webviewController.refresh();
  30.           } catch (error) {
  31.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  32.           }
  33.         })
  34.       Button('Register JavaScript To Window')
  35.         .onClick(() => {
  36.           try {
  37.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  38.           } catch (error) {
  39.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  40.           }
  41.         })
  42.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  43.     }
  44.   }
  45. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.         testObjName.toString(testObjName.test());
  10.     }
  11. </script>
  12. </body>
  13. </html>

  复制代码
• 应用侧和前端页面之间转达基础类型，非Function等复杂类型。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class student {
  6.   name: string = '';
  7.   age: string = '';
  8. }
  10. class testClass {
  11.   constructor() {
  12.   }
  14.   // 传递的基础类型name:"jeck", age:"12"。
  15.   test(): student {
  16.     let st: student = { name: "jeck", age: "12" };
  17.     return st;
  18.   }
  20.   toString(param: ESObject): void {
  21.     console.log('Web Component toString' + param["name"]);
  22.   }
  23. }
  25. @Entry
  26. @Component
  27. struct Index {
  28.   webviewController: webview.WebviewController = new webview.WebviewController();
  29.   @State testObj: testClass = new testClass();
  31.   build() {
  32.     Column() {
  33.       Button('refresh')
  34.         .onClick(() => {
  35.           try {
  36.             this.webviewController.refresh();
  37.           } catch (error) {
  38.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  39.           }
  40.         })
  41.       Button('Register JavaScript To Window')
  42.         .onClick(() => {
  43.           try {
  44.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  45.           } catch (error) {
  46.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  47.           }
  48.         })
  49.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  50.     }
  51.   }
  52. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.         testObjName.toString(testObjName.test());
  10.     }
  11. </script>
  12. </body>
  13. </html>

  复制代码
• 应用侧调用前端页面的Callback。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6.   constructor() {
  7.   }
  9.   test(param: Function): void {
  10.     param("call callback");
  11.   }
  13.   toString(param: String): void {
  14.     console.log('Web Component toString' + param);
  15.   }
  16. }
  18. @Entry
  19. @Component
  20. struct Index {
  21.   webviewController: webview.WebviewController = new webview.WebviewController();
  22.   @State testObj: testClass = new testClass();
  24.   build() {
  25.     Column() {
  26.       Button('refresh')
  27.         .onClick(() => {
  28.           try {
  29.             this.webviewController.refresh();
  30.           } catch (error) {
  31.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  32.           }
  33.         })
  34.       Button('Register JavaScript To Window')
  35.         .onClick(() => {
  36.           try {
  37.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  38.           } catch (error) {
  39.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  40.           }
  41.         })
  42.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  43.     }
  44.   }
  45. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.         testObjName.test(function(param){testObjName.toString(param)});
  10.     }
  11. </script>
  12. </body>
  13. </html>

  复制代码
• 应用侧调用前端页面Object里的Function。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6.   constructor() {
  7.   }
  9.   test(param: ESObject): void {
  10.     param.hello("call obj func");
  11.   }
  13.   toString(param: String): void {
  14.     console.log('Web Component toString' + param);
  15.   }
  16. }
  18. @Entry
  19. @Component
  20. struct Index {
  21.   webviewController: webview.WebviewController = new webview.WebviewController();
  22.   @State testObj: testClass = new testClass();
  24.   build() {
  25.     Column() {
  26.       Button('refresh')
  27.         .onClick(() => {
  28.           try {
  29.             this.webviewController.refresh();
  30.           } catch (error) {
  31.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  32.           }
  33.         })
  34.       Button('Register JavaScript To Window')
  35.         .onClick(() => {
  36.           try {
  37.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  38.           } catch (error) {
  39.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  40.           }
  41.         })
  42.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  43.     }
  44.   }
  45. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     // 写法1
  9.     class Student {
  10.         constructor(nameList) {
  11.             this.methodNameListForJsProxy = nameList;
  12.         }
  13.         hello(param) {
  14.             testObjName.toString(param)
  15.         }
  16.     }
  17.     var st = new Student(["hello"])
  18.     // 写法2
  19.     //创建一个构造器，构造函数首字母大写
  20.     function Obj1(){
  21.         this.methodNameListForJsProxy=["hello"];
  22.         this.hello=function(param){
  23.             testObjName.toString(param)
  24.         };
  25.     }
  26.     //利用构造器，通过new关键字生成对象
  27.     var st1 = new Obj1();
  28.     function callArkTS() {
  29.         testObjName.test(st);
  30.         testObjName.test(st1);
  31.     }
  32. </script>
  33. </body>
  34. </html>

  复制代码
• 前端页面调用应用侧Object里的Function。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class ObjOther {
  6.   methodNameListForJsProxy: string[]
  8.   constructor(list: string[]) {
  9.     this.methodNameListForJsProxy = list
  10.   }
  12.   testOther(json: string): void {
  13.     console.info(json)
  14.   }
  15. }
  17. class testClass {
  18.   ObjReturn: ObjOther
  20.   constructor() {
  21.     this.ObjReturn = new ObjOther(["testOther"]);
  22.   }
  24.   test(): ESObject {
  25.     return this.ObjReturn
  26.   }
  28.   toString(param: string): void {
  29.     console.log('Web Component toString' + param);
  30.   }
  31. }
  33. @Entry
  34. @Component
  35. struct Index {
  36.   webviewController: webview.WebviewController = new webview.WebviewController();
  37.   @State testObj: testClass = new testClass();
  39.   build() {
  40.     Column() {
  41.       Button('refresh')
  42.         .onClick(() => {
  43.           try {
  44.             this.webviewController.refresh();
  45.           } catch (error) {
  46.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  47.           }
  48.         })
  49.       Button('Register JavaScript To Window')
  50.         .onClick(() => {
  51.           try {
  52.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  53.           } catch (error) {
  54.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  55.           }
  56.         })
  57.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  58.     }
  59.   }
  60. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.       testObjName.test().testOther("call other object func");
  10.     }
  11. </script>
  12. </body>
  13. </html>

  复制代码
• Promise场景。
  第一种使用方法，在应用侧new Promise。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6.   constructor() {
  7.   }
  9.   test(): Promise<string> {
  10.     let p: Promise<string> = new Promise((resolve, reject) => {
  11.       setTimeout(() => {
  12.         console.log('执行完成');
  13.         reject('fail');
  14.       }, 10000);
  15.     });
  16.     return p;
  17.   }
  19.   toString(param: String): void {
  20.     console.log(" " + param);
  21.   }
  22. }
  24. @Entry
  25. @Component
  26. struct Index {
  27.   webviewController: webview.WebviewController = new webview.WebviewController();
  28.   @State testObj: testClass = new testClass();
  30.   build() {
  31.     Column() {
  32.       Button('refresh')
  33.         .onClick(() => {
  34.           try {
  35.             this.webviewController.refresh();
  36.           } catch (error) {
  37.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  38.           }
  39.         })
  40.       Button('Register JavaScript To Window')
  41.         .onClick(() => {
  42.           try {
  43.             this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  44.           } catch (error) {
  45.             console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
  46.           }
  47.         })
  48.       Web({ src: $rawfile('index.html'), controller: this.webviewController })
  49.     }
  50.   }
  51. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.       testObjName.test().then((param)=>{testObjName.toString(param)}).catch((param)=>{testObjName.toString(param)})
  10.     }
  11. </script>
  12. </body>
  13. </html>

  复制代码
  第二种使用方法，在前端页面new Promise。
  
  1. // xxx.ets
  2. import { webview } from '@kit.ArkWeb';
  3. import { BusinessError } from '@kit.BasicServicesKit';
  5. class testClass {
  6. constructor() {
  7. }
  9. test(param:Function): void {
  10. setTimeout( () => { param("suc") }, 10000)
  11. }
  13. toString(param:String): void {
  14. console.log(" " + param);
  15. }
  16. }
  18. @Entry
  19. @Component
  20. struct Index {
  21. webviewController: webview.WebviewController = new webview.WebviewController();
  22. @State testObj: testClass = new testClass();
  24. build() {
  25. Column() {
  26. Button('refresh')
  27. .onClick(() => {
  28. try {
  29. this.webviewController.refresh();
  30. } catch (error) {
  31. console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
  32. }
  33. })
  34. Button('Register JavaScript To Window')
  35. .onClick(() => {
  36. try {
  37. this.webviewController.registerJavaScriptProxy(this.testObj, "testObjName", ["test", "toString"]);
  38. } catch (error) {
  39. console.error(`ErrorCode: ${(error as BusinessError).code}, Message: ${(error as BusinessError).message}`);
  40. }
  41. })
  42. Web({ src: $rawfile('index.html'), controller: this.webviewController })
  43. }
  44. }
  45. }

  复制代码
  1. <!-- index.html -->
  2. <!DOCTYPE html>
  3. <html>
  4. <body>
  5. <button type="button" onclick="callArkTS()">Click Me!</button>
  6. <p id="demo"></p>
  7. <script>
  8.     function callArkTS() {
  9.       let funpromise
  10.       var p = new Promise(function(resolve, reject){funpromise=(param)=>{resolve(param)}})
  11.       testObjName.test(funpromise)
  12.       p.then((param)=>{testObjName.toString(param)})
  13.     }
  14. </script>
  15. </body>
  16. </html>

  复制代码

​

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。