河池网站推广,深圳宝安区核酸检测点,国外网站建设现状,手机网站建设公司报价目录#xff1a; 1、简介使用场景2、加载网络页面3、加载本地页面4、加载HTML格式的文本数据5、设置深色模式6、上传文件7、在新窗口中打开页面8、管理位置权限 1、简介使用场景
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全… 目录 1、简介使用场景2、加载网络页面3、加载本地页面4、加载HTML格式的文本数据5、设置深色模式6、上传文件7、在新窗口中打开页面8、管理位置权限 1、简介使用场景
Web是一种基于互联网的技术和资源的网络服务系统。它是指由许多互连的计算机组成的全球性计算机网络使用户能够通过浏览器访问和交互式使用各种信息和资源如网页、文档、图片、视频、音频等。通过Web用户可以浏览网页、发送电子邮件、参与在线社交网络、进行在线购物等各种活动。Web的核心技术包括超文本传输协议HTTP超文本标记语言HTML和统一资源定位器URL。
使用场景 鸿蒙的应用有时需要集成别的项目H5等入口页面如html等或者是网络地址的形式这个就需要使用到鸿蒙加载html页面或者网络地址等。
2、加载网络页面
requestPermissions: [{name: ohos.permission.INTERNET // 使用网络权限}
]import web_webview from ohos.web.webviewEntry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {Button(愚公博客首页).onClick(() {try {// 点击按钮时通过loadUrl跳转到www.example1.comthis.controller.loadUrl(www.example1.com);} catch (error) {console.error(ErrorCode: ${error.code}, Message: ${error.message});}})// 组件创建时加载www.example.comWeb({ src: www.baidu.com, controller: this.controller})}}
}3、加载本地页面
!-- local.html --
!DOCTYPE html
htmlbodypHello World/p/body
/html// xxx.ets
import web_webview from ohos.web.webview;Entry
Component
struct WebComponent {webviewController: web_webview.WebviewController new web_webview.WebviewController();build() {Column() {Button(loadUrl).onClick(() {try {// 点击按钮时通过loadUrl跳转到local1.htmlthis.webviewController.loadUrl($rawfile(index.html));} catch (error) {console.error(ErrorCode: ${error.code}, Message: ${error.message});}})// 组件创建时通过$rawfile加载本地文件local.htmlWeb({ src: $rawfile(index.html), controller: this.webviewController })}}
}4、加载HTML格式的文本数据
// xxx.ets
import web_webview from ohos.web.webview;Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController();build() {Column() {Button(loadData).onClick(() {try {// 点击按钮时通过loadData加载HTML格式的文本数据this.controller.loadData(htmlbody bgcolor\white\Source:presource/pre/body/html,text/html,UTF-8);} catch (error) {console.error(ErrorCode: ${error.code}, Message: ${error.message});}})// 组件创建时加载www.example.comWeb({ src: www.example.com, controller: this.controller })}}
}5、设置深色模式
通过darkMode()接口可以配置不同的深色模式。
WebDarkMode.Off模式表示关闭深色模式。WebDarkMode.On表示开启深色模式且深色模式跟随前端页面。WebDarkMode.Auto表示开启深色模式且深色模式跟随系统。forceDarkAccess()接口可将前端页面强制配置深色模式且深色模式不跟随前端页面和系统。配置该模式时候需要将深色模式配置成WebDarkMode.On。
// xxx.ets
import web_webview from ohos.web.webview;Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController();State mode: WebDarkMode WebDarkMode.On;State access: boolean true;build() {Column() {Web({ src: www.example.com, controller: this.controller }).darkMode(this.mode).forceDarkAccess(this.access)}}
}6、上传文件
!DOCTYPE html
html
headmeta charsetutf-8titleDocument/title
/headbody
// 点击文件上传按钮
input typefile valuefile/br
/body
/html// xxx.ets
import web_webview from ohos.web.webview;
Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()build() {Column() {// 加载本地local.html页面Web({ src: $rawfile(index.html), controller: this.controller }).onShowFileSelector((event) {// 开发者设置要上传的文件路径let fileList: Arraystring [xxx/test.png,]event.result.handleFileList(fileList)return true;})}}
}7、在新窗口中打开页面 !DOCTYPE html
html
headmeta charsetutf-8titleWindowEvent/title
/head
body
input typebutton value新窗口中打开网页 onclickOpenNewWindow()
script typetext/javascriptfunction OpenNewWindow(){let openedWindow window.open(about:blank, , locationno,statusno,scrollvarsno);openedWindow.document.write(p这是我的新窗口/p);openedWindow.focus();}
/script
/body
/html开发者可以使用multiWindowAccess()接口来设置网页是否可以在新窗口中打开。通过调用此接口并传入相应的参数可以控制网页是否允许使用新窗口。
当网页请求在新窗口中打开时应用将收到Web组件的新窗口事件可以通过onWindowNew()接口来处理此事件。在此接口中开发者可以根据需要创建新的窗口来处理Web组件的窗口请求。
// xxx.ets
import web_webview from ohos.web.webview//在同一page页有两个web组件。在WebComponent新开窗口时会跳转到NewWebViewComp。
CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController new web_webview.WebviewController()
build() {Column() {Web({ src: , controller: this.webviewController1 }).javaScriptAccess(true).multiWindowAccess(false).onWindowExit(() {console.info(NewWebViewComp onWindowExit)if (this.controller) {this.controller.close()}})}}
}Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController()dialogController: CustomDialogController | null nullbuild() {Column() {Web({ src:$rawfile(window.html), controller: this.controller }).javaScriptAccess(true)//需要使能multiWindowAccess.multiWindowAccess(true).allowWindowOpenMethod(true).onWindowNew((event) {if (this.dialogController) {this.dialogController.close()}let popController:web_webview.WebviewController new web_webview.WebviewController()this.dialogController new CustomDialogController({builder: NewWebViewComp({webviewController1: popController})})this.dialogController.open()//将新窗口对应WebviewController返回给Web内核。//如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。//若不调用event.handler.setWebController接口会造成render进程阻塞。event.handler.setWebController(popController)})}}
}8、管理位置权限
!DOCTYPE html
html
body
p idlocationInfo位置信息/p
button onclickgetLocation()获取位置/button
script
var locationInfodocument.getElementById(locationInfo);
function getLocation(){if (navigator.geolocation) {!-- 前端页面访问设备地理位置 --navigator.geolocation.getCurrentPosition(showPosition);}
}
function showPosition(position){locationInfo.innerHTMLLatitude: position.coords.latitude br /Longitude: position.coords.longitude;
}
/script
/body
/html// xxx.ets
import web_webview from ohos.web.webview;Entry
Component
struct WebComponent {controller: web_webview.WebviewController new web_webview.WebviewController();build() {Column() {Web({ src:$rawfile(getLocation.html), controller:this.controller }).geolocationAccess(true).onGeolocationShow((event) { // 地理位置权限申请通知AlertDialog.show({title: 位置权限请求,message: 是否允许获取位置信息,primaryButton: {value: cancel,action: () {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}},secondaryButton: {value: ok,action: () {event.geolocation.invoke(event.origin, true, false); // 允许此站点地理位置权限请求}},cancel: () {event.geolocation.invoke(event.origin, false, false); // 不允许此站点地理位置权限请求}})})}}
}
