** 一、通过web组件加载网页**
在C/S应用程序中，都有网络组件用于加载网页，鸿蒙ArkTS中也有类似的组件。
web组件，用于加载指定的网页，里面有很多的方法可以调用，虽然现在用得比较少，了解还是必须的。
演示代码：
import webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
myController:webview.WebviewController=new webview.WebviewController() //控制器
@State strWebURL:string='' //网络地址
@State strWebResult:string='' //返回的结果
build() {
Column({space:10}) {
Row(){
Column(){
Row(){
TextInput({placeholder:'请输入网址'}).layoutWeight(1).onChange((value:string)=>{this.strWebURL=value})
Button('加载').onClick(()=>{
// this.strWebURL = 'https://www.baidu.com';
this.myController.loadUrl(this.strWebURL);
})
Button('刷新').onClick(()=>{
this.myController.refresh();
})
Button('停止').onClick(()=>{
this.myController.stop();
})
}
Web({
src:this.strWebURL,
controller:this.myController
}).height('100%').width('100%').zoomAccess(true).textZoomRatio(2)
}
}
}.height('100%').width('100%')
}
}
我的计算机很卡顿，一直没有重装系统，可以运行出效果，安装了Huawei Mate10的真机模拟器。
1、使用系统自带的模拟器Previewer预览时系统会提示：Property 'relativeOffset' does not exist on type 'TextAttribute'. <ArkTSCheck>，连上华为Mate10，下载安装文件后，模拟效果就出来了。
2、需要开通网络访问权限。在module.json5中配置网络访问权限：
3、注意函数名的大小写，我因为这个问题折腾了2个多小时，犯了很低级的错误。
"module": {
"requestPermissions": [
{
"name": "ohos.permission.INTERNET"
}
]
}
** 二、加载本地的网页并执行网页中的函数并得到返回数据**
与上面的类似，只是文件存放到resource\rawfile目录下。可以执行网页的程序并得到返回值。
import webview from '@ohos.web.webview';
@Entry
@Component
struct Index {
myController:webview.WebviewController=new webview.WebviewController() //控制器
@State strResult:string=''
build() {
Column({space:10}) {
Row(){
Web({
src:$rawfile('test.html'),
controller:this.myController
}).height(300).width('100%').javaScriptAccess(true)
}.height(300).width('100%').backgroundColor(Color.Pink)
Row({space:6}){
Button('加载本地网页').onClick(()=>{
console.log('123')
this.myController.runJavaScript('Test()').then(result =>{
console.log(result)
this.strResult=result})
console.log(this.strResult)
})
Text('返回数据：')
Text(this.strResult)
}.height(200).width('100%').backgroundColor(Color.Orange)
}.height('100%').width('100%')
}
}
效果图：
网页test.html内容：
<!DOCTYPE html>
<html>
<head>
<title>JavaScript->函数</title>
</head>
<body>
<div id="demo"><font size=32>JavaScript->函数</font></div>
<input type="button" value="点击" onclick="Test123()" id="DD3"/>
<input type="button" value="点击" onclick="Test()" id="DD3"/>
<script>
function Test(){
document.getElementById("demo").style.color="#d70008"
return 'test.html返回的数据'
}
function Test123(){
return '点击按钮l返回的数据'
}
</script>
</body>
</html>
** 三、通过get和post获取网络数据**
使用http不可视组件可以通过get和post方法来获取网络数据，格式比较固定，实际使用时可以根据情况再封装一下，就是加上async和await。
代码：
import http from '@ohos.net.http';
import { JSON } from '@kit.ArkTS';
@Entry
@Component
struct MyComponent {
@State StrReturnData_Get:string=''
@State StrReturnData_Post:string=''
@State strUrl_Get:string=''
@State strUrl_Post:string=''
objectToStringEncoding(obj:Record<string,string>) {
let encodedStr = '';
for (let key of Object.entries(obj)) {
encodedStr += `${key[0]}=${encodeURIComponent(key[1])}&`;
}
return encodedStr.slice(0, -1); // 去除最后多余的 '&'
}
build() {
Column({space:10}) {
Row(){
Button('获取Get数据').fontSize(12).onClick(() => this.getWeatherData());
TextInput({placeholder:'请输入网址'}).onChange((value:string)=>{this.strUrl_Get=value})
}.width('100%').height(32)
Row(){
Text(this.StrReturnData_Get)
}.layoutWeight(1)
Row(){
Button('获取Post数据').fontSize(12).onClick(() => this.getPostData())
TextInput({placeholder:'请输入网址'}).onChange((value:string)=>{this.strUrl_Post=value})
}.width('100%').height(32)
Row(){
Text(this.StrReturnData_Post)
}.layoutWeight(1)
}
}
getWeatherData() {
let httpRequest =http.createHttp()
httpRequest.request(this.strUrl_Get,
{
method:http.RequestMethod.GET,
header:{'Content-Type':'application/json'},
},
(error,data)=>{
if(!error){
this.StrReturnData_Get=data.result.toString()
console.log(this.StrReturnData_Get)
}
else {
console.log(data.responseCode.toString())
console.log(JSON.stringify(error))
}
}
)
}
getPostData() {
let httpRequest =http.createHttp()
httpRequest.request(this.strUrl_Post,
{
method:http.RequestMethod.POST,
header:{'Content-Type':'application/x-www-form-urlencoded'},
extraData:this.objectToStringEncoding(
{"name":"张三"}
)
// readTimeout:3000,
// connectTimeout:3000
},
(error,data)=>{
if(!error){
this.StrReturnData_Post=data.result.toString()
console.log(this.StrReturnData_Post)
}
else {
console.log(data.responseCode.toString())
console.log(JSON.stringify(error))
}
}
)
}
}
效果：
实际上，ArkTS中封装了很多获取网络数据的组件，后面再一一学习。