50.HarmonyOS鸿蒙系统 App(ArkUI)web组件实现简易浏览器
配置网络访问权限：
跳转任务：
Button('转到')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到www.example1.com
this.webviewController.loadUrl(this.get_url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})前进代码：
Button('-->>').onClick(()=>{
if (this.webviewController.accessForward())
{
this.webviewController.forward();
return true;
}
})后退代码：
Button('<<--').onClick(()=>{
if (this.webviewController.accessBackward())
{
this.webviewController.backward();
return true;
}
})项目代码：
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
webviewController: web_webview.WebviewController = new web_webview.WebviewController();
@State get_url:string = "www.cnblogs.com/"
@State cnblogs:string = 'www.cnblogs.com/'
@State csdn:string = 'txwtech.blog.csdn.net'
@State baidu:string = 'www.baidu.com'
controller: TextInputController = new TextInputController()
build() {
Column() {
Text('简易浏览器demo')
.backgroundColor(Color.Blue)
.fontColor(Color.White)
.fontSize(28)
Row()
{
Text('地址：')
TextInput({text: this.get_url, placeholder: '请输入网址...', controller: this.controller})
.onChange((value:string)=>{
this.get_url = value
})
.backgroundColor(Color.Gray)
}
Row()
{
Button("cnblogs").onClick(()=>{
this.get_url = this.cnblogs
})
Button('csdn').onClick(()=>{
this.get_url = this.csdn
})
Button('baidu').onClick(()=>{
this.get_url = this.baidu
})
}
Row()
{
Button('<<--').onClick(()=>{
if (this.webviewController.accessBackward())
{
this.webviewController.backward();
return true;
}
})
Button(' ')
Button(' ')
Button('转到')
.onClick(() => {
try {
// 点击按钮时，通过loadUrl，跳转到www.example1.com
this.webviewController.loadUrl(this.get_url);
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Button(' ')
Button(' ')
Button('-->>').onClick(()=>{
if (this.webviewController.accessForward())
{
this.webviewController.forward();
return true;
}
})
}.borderColor(Color.Orange)
.backgroundColor(Color.Grey)
// 组件创建时，加载www.example.com
Web({ src: '', controller: this.webviewController})
}
}
}
