Harmony鸿蒙实战开发-浏览器app【源码在文末】文章目录Harmony鸿蒙实战开发-浏览器app【源码在文末】一、运行演示1、logo2、首界面3、浏览历史4、设置5、夜间模式6、切换搜索引擎7、进行搜索二、部分代码三、源码运行工具DevEco Studio一、运行演示1、logo2、首界面3、浏览历史4、设置5、夜间模式6、切换搜索引擎7、进行搜索二、部分代码importwebviewfromohos.web.webviewimportCommonConstantsfrom../common/constants/CommonConstantsimport{FunctionButtons}from../view/FunctionButtonsimportHistoryfrom../common/bean/Historyimportwindowfromohos.windowimportPreferenceModelfrom../model/PreferenceModel// 将持久化存储中不同属性的初始值设定为默认值PersistentStorage.PersistProp(privateMode,false)PersistentStorage.PersistProp(currentEngineIndex,0)PersistentStorage.PersistProp(currentEngineName,Bing)PersistentStorage.PersistProp(darkMode,false)EntryComponentstruct Index{// 定义用于存储网页地址的状态变量Stateurl:string// 定义Web组件的显示状态初始为隐藏StateisShowed:VisibilityVisibility.None// 定义一个高度状态变量初始为10%Statehigh:string10%// 定义搜索框文本的对齐方式状态变量初始为左对齐StatetextAlign:TextAlignTextAlign.Start// 定义键盘高度状态变量初始为0StatekeyboardHeight:number0// 定义当前页面加载进度状态变量初始为0StatecurrentProgress:number0// 定义页面是否可回退的状态变量初始为falseStateisBacked:booleanfalse// 定义页面是否可前进的状态变量初始为falseStateisForwarded:booleanfalse// 定义并提供一个历史记录数组初始为空数组Provide(histories)histories:ArrayHistory[]// 定义并提供一个WebView控制器实例ProvidewebviewController:webview.WebviewControllernewwebview.WebviewController()// 定义并提供一个搜索状态变量初始为falseProvide(webIsSearched)Watch(onSearched)isSearched:booleanfalse// 从应用程序存储中链接到持久化的隐私模式属性StorageLink(privateMode)privateMode:stringfalse// 从应用程序存储中链接到持久化的暗模式属性StorageLink(darkMode)darkMode:stringfalse// 从应用程序存储中链接到持久化的搜索引擎索引属性StorageLink(currentEngineIndex)searchEngine:number0// 定义一个窗口类实例初始为nullprivatewindowClass:window.Windownull// 在组件即将显示时执行的异步函数asyncaboutToAppear(){// 从存储中获取偏好设置awaitPreferenceModel.getPreferencesFromStorage();// 获取浏览历史记录并更新状态变量PreferenceModel.getHistories().then(histories{if(histories!null){this.historieshistories}})// 开启软键盘高度变化的监听window.getLastWindow(getContext(this),(err,data){if(err){console.log(err.message)}this.windowClassdatathis.windowClass.on(keyboardHeightChange,(data){this.keyboardHeightdata})})}// 保存浏览记录的函数onSaveHistory(){// 创建一个新的历史记录对象lethistorynewHistory(this.webviewController.getTitle(),this.webviewController.getUrl())// 将新的历史记录添加到历史记录数组中this.histories.push(history)// 将更新后的历史记录数组写入存储中PreferenceModel.writeHistories(this.histories)}// 判断用户输入的内容是否为网址的函数privatecheckContent(content:string){// 检查内容是否以特定域名后缀结尾if(content.endsWith(.com)||content.endsWith(.cn)||content.endsWith(.tv)){returntrue}else{returnfalse}}// 搜索完成后的回调函数onSearched(){// 显示Web组件this.isShowedVisibility.Visible// 修改Web组件的高度this.high91%// 修改搜索框的文本对齐方式this.textAlignTextAlign.Center}// 构建UI界面的函数build(){// 使用Flex布局组件Flex({direction:FlexDirection.Column,alignItems:ItemAlign.Center}){// 定义一个列组件Column(){// 再定义一个嵌套的列组件Column(){// 如果没有进行搜索显示应用程序的名称和图标if(!this.isSearched){// 定义一个行组件包含图标和应用名称Row(){Image($r(app.media.app_icon)).width(30).height(30).margin({bottom:25,right:10})Text(CommonConstants.APP_NAME).fontSize(25).fontColor(this.darkModefalse?Color.Black:Color.White).margin({bottom:25}).animation({duration:300})}.width(100%).height(100%).justifyContent(FlexAlign.Center)}// 定义Web组件用于加载网页Web({src:this.url,controller:this.webviewController}).width(100%).height(100%).visibility(this.isShowed).animation({duration:300})// 页面加载进度变化的回调函数.onProgressChange((event){this.currentProgressevent.newProgress})// 刷新访问历史记录的回调函数.onRefreshAccessedHistory((event){if(!event.isRefreshed!this.privateMode){this.onSaveHistory()}this.isBackedthis.webviewController.accessBackward()this.isForwardedthis.webviewController.accessForward()})}.width(100%).height(this.high).justifyContent(FlexAlign.Center).animation({duration:300})// 定义一个堆栈布局组件包含搜索框和进度条Stack({alignContent:Alignment.Bottom}){// 定义搜索组件Search({placeholder:搜索或输入网址,value:this.url}).width(90%).height(8%).size({height:50}).margin({top:5,bottom:10}).offset(this.isSearched?{y:-this.keyboardHeight/3.8}:{}).textAlign(this.textAlign).backgroundColor(this.darkModefalse?#E8E8E8:#696969).animation({duration:300})// 提交搜索内容的回调函数.onSubmit((value){// 判断内容是否为网址if(this.checkContent(value)){this.webviewController.loadUrl(value)}else{this.webviewController.loadUrl(CommonConstants.SEARCH_ENGINE[this.searchEngine].prefixvalue)}this.urlthis.webviewController.getOriginalUrl()// 更改搜索框的搜索状态if(!this.isSearched){this.isSearchedtrue}// 保存浏览历史this.onSaveHistory()})// 定义进度条组件Progress({value:this.currentProgress,type:ProgressType.Linear}).visibility(this.currentProgress100||this.currentProgress0?Visibility.None:Visibility.Visible).animation({duration:100})}}.width(100%).layoutWeight(11).justifyContent(FlexAlign.Center)// 定义功能按钮组件FunctionButtons({isBacked:$isBacked,isForward:$isForwarded}).width(100%).margin({top:5}).layoutWeight(1)}.backgroundColor(this.darkModefalse?Color.White:#1C1C1C).animation({duration:300})}}三、源码通过百度网盘分享的文件…zip链接https://pan.baidu.com/s/1xbu6QWOItJCKOzAaG49Piw文件已经加密请联系请加下方wx号获取源码仅一杯奶茶钱号码Lvnvn0508