一、應(yīng)用側(cè)調(diào)用前端頁面函數(shù) 使用 runJavaScript()
二骗污、前端頁面調(diào)用應(yīng)用側(cè)函數(shù)
注冊應(yīng)用側(cè)代碼有兩種方式崇猫，
- 一種在Web組件初始化使用調(diào)用，使用[javaScriptProxy()
- 另外一種在Web組件初始化完成后調(diào)用需忿，使用registerjavascriptproxy（）接口（注意：使用registerJavaScriptProxy()接口注冊方法時诅炉，注冊后需調(diào)用refresh()接口生效）
三、代碼 : ets 代碼(已編譯通過贴谎，可運(yùn)行)
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中回調(diào) 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調(diào)用js方法改變text值+1')
.fontSize(25)
.onClick(()=>{
//調(diào)用js方法
this.webviewController.runJavaScript("change_text_add()")
})
Button('ets調(diào)用js方法改變text值-1')
.fontSize(25)
.onClick(()=>{
//調(diào)用js方法
this.webviewController.runJavaScript("change_text_reduce()")
})
Button('ets調(diào)用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對象中調(diào)用該對象的方法
.javaScriptProxy({
object : this.contentCall,
name : "callBackToApp",
methodList : ["callbackOne","callbackTwo"],
controller : this.webviewController
})
}
}
}
HTML 代碼, 需要把index.html 放入對應(yīng)模塊 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調(diào)用js方法，間接回調(diào)ets的方法
function change_text_add() {
console.log('change_text_add start');
var str = callBackToApp.callbackOne(); //js調(diào)用ets方法擅这，實現(xiàn)ets訪問
console.log('change_text_add end');
}
//ets調(diào)用js方法澈魄，間接回調(diào)ets的方法
function change_text_reduce() {
console.log('change_text_reduce start');
var str = callBackToApp.callbackTwo(); //js調(diào)用ets方法，實現(xiàn)ets訪問
console.log('change_text_reduce end');
}
</script>
</body>
</html>
四 官網(wǎng) 例子
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(); 一致仲翎，
官網(wǎng)上不一致
五 注意點
本地模擬上HTML button 不能點擊痹扇，需要真實手機(jī)、遠(yuǎn)程模擬器溯香、遠(yuǎn)程真機(jī)測試
