一、通过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中封装了很多获取网络数据的组件，后面再一一学习。
