目錄
一、Web組件介紹
二、創(chuàng)建組件
權(quán)限列表
三、設置樣式和屬性
四、添加事件和方法
五、訪問本地Html
1、本地html文件創(chuàng)建
2、本地html文件加載
2、JS對象注入，Html使用JS對象調(diào)用客戶端方法
3、客戶端調(diào)用本地Html網(wǎng)頁中的JS方法
使用鴻蒙的ArkUI框架開發(fā)鴻蒙應用的時候，官方為我們提供了一個web組件，提供給開發(fā)者使用，通過本文學習，我們將了解并學會如何使用Web組件進行如下操作：
- 在線網(wǎng)頁加載
- 本地離線網(wǎng)頁加載
- Web組件常用屬性設置
- 客戶端與網(wǎng)頁之間的雙向通信交互
下面我們先來看下Web組件的介紹。
一、Web組件介紹
Web是提供網(wǎng)頁顯示能力的組件，具體用法請參考?Web API。
二、創(chuàng)建組件
在pages目錄下創(chuàng)建WebComponent .ets的Page頁面，? 頁面上放一個Web組件。在Web組件中通過src指定引用的網(wǎng)頁路徑，controller為組件的控制器，通過controller綁定Web組件，用于調(diào)用Web組件的方法。
?
@Entry
@Component
struct WebComponent {
??controller: WebController =?new?WebController();
??build() {
????Column() {
??????Web({ src:?'https://www.douban.com/', controller:?this.controller })
????}
??}
}
?使用Web組件，訪問在線網(wǎng)頁，需要給應用配置網(wǎng)絡權(quán)限，
權(quán)限列表
訪問在線網(wǎng)頁時需添加網(wǎng)絡權(quán)限：ohos.permission.INTERNET
三、設置樣式和屬性
Web組件的使用需要添加豐富的頁面樣式和功能屬性。設置height、padding樣式可為Web組件添加高和內(nèi)邊距，設置fileAccess屬性可為Web組件添加文件訪問權(quán)限，設置javaScriptAccess屬性為true使Web組件具有執(zhí)行JavaScript代碼的能力。
?
@Entry
@Component
struct WebComponent {
??fileAccess: boolean =?true;
??controller: WebController =?new?WebController();
??build() {
????Column() {
??????Text('Hello world!')
????????.fontSize(20)
??????Web({ src:?'https://www.douban.com/', controller:?this.controller })
????????// 設置高和內(nèi)邊距
????????.height(500)
????????.padding(20)
????????// 設置文件訪問權(quán)限和腳本執(zhí)行權(quán)限
????????.fileAccess(this.fileAccess)
????????.javaScriptAccess(true)
??????Text('End')
????????.fontSize(20)
????}
??}
}
?四、添加事件和方法
為Web組件添加onProgressChange事件，該事件回調(diào)Web引擎加載頁面的進度值。將該進度值賦值給Progress組件的value，控制Progress組件的狀態(tài)。當進度為100%時隱藏Progress組件，Web頁面加載完成。
?
import web_view from?'@ohos.web.webview';
@Entry
@Component
struct RemoteWebPage {
??@State progress: number = 0
??@State hideProgress: boolean =?true
??controller: web_view.WebviewController =?new?web_view.WebviewController()
??build() {
????Column() {
??????Progress({ total: 100, value:?this.progress })
????????.color('#ff5cea20')
????????.visibility(this.hideProgress ? Visibility.None : Visibility.Visible)
??????Web({ src:?'https://www.douban.com/', controller:?this.controller })
????????.height('100%')
????????// 添加onProgressChange事件
????????.onProgressChange(e => {
??????????this.progress = e.newProgress
?????????// 當進度100%時，進度條消失
??????????if?(this.progress == 100) {
????????????this.hideProgress =?true
??????????}?else?{
????????????this.hideProgress =?false
??????????}
????????})
????}.backgroundColor('0xFFFFFF')
??}
}
?效果如下：
上面講的是使用Web組件訪問一個在線網(wǎng)頁，那怎么加載本地網(wǎng)頁文件呢？
五、訪問本地Html
先看效果圖
實現(xiàn)了一個加載本地網(wǎng)頁文件，然后Html網(wǎng)頁中調(diào)用客戶端的方法，進行了一個關(guān)閉頁面和拉起系統(tǒng)相冊的功能，下面開始講下代碼實現(xiàn)。
1、本地html文件創(chuàng)建
在entry/src/main/resources/rawfile目錄下，我們創(chuàng)建一個index.html文件
<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>這個是來自本地的html文件</p>
<button?type="button"?onclick="window.jsBridge.closePage()">點擊調(diào)用原生關(guān)閉頁面</button>
<button?type="button"?onclick="window.jsBridge.jumpSystemPicture()">點擊拉起原生系統(tǒng)相冊</button>
</body>
</html>2、本地html文件加載
創(chuàng)建一個LocalWebPage頁面，加載index.html 文件
import web_view from?'@ohos.web.webview';
@Entry
@Component
struct LocalWebPage {
??controller: web_view.WebviewController =?new?web_view.WebviewController()
??build() {
????Column() {
??????Web({ src: $rawfile("index.html"), controller:?this.controller })
????????.height('100%')
????}
??}
}這里我們使用$rawfile("index.html")進行本地html文件獲取。
2、JS對象注入，Html使用JS對象調(diào)用客戶端方法
如果需要進行網(wǎng)頁跟客戶端進行交互，我們需要設置往Html中注入一個JS對象，具體如下：
import web_view from?'@ohos.web.webview';
import common from?'@ohos.app.ability.common';
import router from?'@ohos.router';
@Entry
@Component
struct LocalWebPage {
??controller: web_view.WebviewController =?new?web_view.WebviewController()
??jsBridge = {
????jumpSystemPicture() {
??????let context = getContext(this) as common.UIAbilityContext;
??????let want? = {
??????????"deviceId":?"",
??????????"bundleName":?"",
??????????"abilityName":?"",
??????????"uri":?"",
??????????"type":?"image/*",
??????????"action":?"android.intent.action.GET_CONTENT",
??????????"parameters":{},
??????????"entities":[]
??????};
??????context.startAbility(want);
????},
????closePage() {
??????router.back()
????}
??}
??build() {
????Column() {
??????Web({ src: $rawfile("index.html"), controller:?this.controller })
????????.javaScriptAccess(true)
????????.javaScriptProxy({
??????????object:?this.jsBridge,
??????????name:?"jsBridge",
??????????methodList: ["closePage","jumpSystemPicture"],
??????????controller:?this.controller
????????})
????????.height('100%')
????}
??}
}這里我們定義了一個JS對象jsBridge ，定義了兩個方法，jumpSystemPicture 和closePage，分別用于html 拉起系統(tǒng)相冊和關(guān)閉客戶端頁面，然后使用Web的 javaScriptProxy方法進行JS對象注入設置，具體的配置如上述代碼，需要配置對象名稱，注入方法。
看下上文中Html 調(diào)用JS的代碼，比如調(diào)用客戶端的關(guān)閉頁面方法，使用
window.jsBridge.closePage() 進行觸發(fā)。
3、客戶端調(diào)用本地Html網(wǎng)頁中的JS方法
在onPageEnd事件中添加runJavaScript方法。onPageEnd事件是網(wǎng)頁加載完成時的回調(diào)，runJavaScript方法可以執(zhí)行HTML中的JavaScript腳本。當頁面加載完成時，觸發(fā)onPageEnd事件，調(diào)用HTML文件中的test方法，在控制臺打印信息。
import web_view from?'@ohos.web.webview';
import router from?'@ohos.router';
@Entry
@Component
struct LocalWebPage {
??controller: web_view.WebviewController =?new?web_view.WebviewController()
??build() {
????Column() {
??????Web({ src: $rawfile("index.html"), controller:?this.controller })
????????.javaScriptAccess(true)
?? ???.onPageEnd(e =>{
??????????// test()在index.html中定義
??????????this.controller.runJavaScript('test()');
??????????console.info('url: ', e.url);
????????})
????????.height('100%')
????}
??}
}<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
<p>Hello World</p>
<p>這個是來自本地的html文件</p>
<button?type="button"?onclick="window.jsBridge.closePage()">點擊調(diào)用原生關(guān)閉頁面</button>
<button?type="button"?onclick="window.jsBridge.jumpSystemPicture()">點擊拉起原生系統(tǒng)相冊</button>
</body>
<script?type="text/javascript">
??function test() {
??????console.info('Ark Web Component');
??}
</script>
</html>上面方法只提到了調(diào)用網(wǎng)頁中的JS方法，如果要異步獲取JS方法返回的數(shù)據(jù)，應該怎么操作呢，感興趣的評論區(qū)留意討論，有時間我再補充講解下。文章來源：http://www.zghlxwxcb.cn/news/detail-727431.html
本文到此完結(jié)，謝謝閱讀！文章來源地址http://www.zghlxwxcb.cn/news/detail-727431.html
到了這里，關(guān)于【鴻蒙應用ArkTS開發(fā)系列】- Web組件使用講解的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
