一、应用侧调用前端页面函数 使用 runJavaScript()
二、前端页面调用应用侧函数
注册应用侧代码有两种方式，
- 一种在Web组件初始化使用调用，使用[javaScriptProxy()
- 另外一种在Web组件初始化完成后调用，使用registerjavascriptproxy（）接口（注意：使用registerJavaScriptProxy()接口注册方法时，注册后需调用refresh()接口生效）
三、代码 : ets 代码(已编译通过，可运行)
import web_webview from '@ohos.web.webview';
const TAG = "huxiubo"
@Entry
@Component
struct Mainindex {
@State count : number = 0;
// 定义Web组件的控制器controller
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
// js中回调 etc 方法
contentCall = {
callbackOne : () =>{
this.count+=1;
console.log(TAG, 'callbackOne success')
},
callbackTwo : () =>{
this.count-=1;
console.log(TAG, 'callbackTwo success')
}
}
build() {
Column({space:12}) {
Text(`js修改ets属性text: ${this.count}`)
.fontSize(25)
Button('ets调用js方法改变text值+1')
.fontSize(25)
.onClick(()=>{
//调用js方法
this.webviewController.runJavaScript("change_text_add()")
})
Button('ets调用js方法改变text值-1')
.fontSize(25)
.onClick(()=>{
//调用js方法
this.webviewController.runJavaScript("change_text_reduce()")
})
Button('ets调用js方法改变web显示')
.fontSize(25)
.onClick(()=>{
this.webviewController.runJavaScript("change_html_context('"+this.count+"')")
})
Web({ src: $rawfile('index.html'), controller: this.webviewController })
.fileAccess(true)
.javaScriptAccess(true)
.zoomAccess(true)
.imageAccess(true)
.height(500)
.padding(20)
//注入JavaScript对象到window对象中，并在window对象中调用该对象的方法
.javaScriptProxy({
object : this.contentCall,
name : "callBackToApp",
methodList : ["callbackOne","callbackTwo"],
controller : this.webviewController
})
}
}
}
HTML 代码, 需要把index.html 放入对应模块 resources->rawfile 目录中
<!DOCTYPE html>
<html>
<body>
Hello world!
<div id="indexjs" contenteditable="true"></div>
<script>
var INDEX = {};
INDEX.editor = document.getElementById('indexjs'); //获取html中元素
INDEX.setHtml = function(contents) {
INDEX.editor.innerHTML = contents; //给id=“indexjs”的div元素赋值
}
function change_html_context(contents) {
INDEX.setHtml(contents);
}
//ets调用js方法，间接回调ets的方法
function change_text_add() {
console.log('change_text_add start');
var str = callBackToApp.callbackOne(); //js调用ets方法，实现ets访问
console.log('change_text_add end');
}
//ets调用js方法，间接回调ets的方法
function change_text_reduce() {
console.log('change_text_reduce start');
var str = callBackToApp.callbackTwo(); //js调用ets方法，实现ets访问
console.log('change_text_reduce end');
}
</script>
</body>
</html>
四 官网 例子
ets
import web_webview from '@ohos.web.webview';
const TAG = "huxiubo"
class testClass {
constructor() {
}
test(): string {
console.info(TAG, `hxuibuo`);
return 'ArkTS Hello World!';
}
}
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
// 声明需要注册的对象
@State testObj: testClass = new testClass();
build() {
Column({space: 20}) {
Button("huxiubo")
// web组件加载本地index.html页面
Web({ src: $rawfile('index.html'), controller: this.webviewController})
// 将对象注入到web端
.javaScriptProxy({
object: this.testObj,
name: "testObjName",
methodList: ["test"],
controller: this.webviewController
})
}
}
}
html
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="callArkTS()">Click Me!</button>
<p id="demo"></p>
<script>
function callArkTS() {
let str = testObjName.test();
document.getElementById("demo").innerHTML = str;
console.info('ArkTS Hello World! :' + str);
}
</script>
</body>
</html>
注意：其中 ets 中 name: "testObjName", 需要和 HTML 中 let str = testObjName.test(); 一致，
官网上不一致
五 注意点
本地模拟上HTML button 不能点击，需要真实手机、远程模拟器、远程真机测试
网友评论