目录：
- 1、加载网络页面/本地页面/html页面
- 2、页面布局
- 3、HTTP/HTTPS的数据请求
- 4、上传图片并保存数据
1、加载网络页面/本地页面/html页面
// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct WebComponent {controller: webview.WebviewController = new webview.WebviewController();build() {Column() {Button('loadUrl').onClick(() => {try {// 点击按钮时，通过loadUrl，跳转到www.example1.comthis.controller.loadUrl('www.example1.com');// 点击按钮时，通过loadUrl，跳转到local1.htmlthis.controller.loadUrl($rawfile("local1.html"));// 点击按钮时，通过loadData，加载HTML格式的文本数据this.controller.loadData("<html><body bgcolor=\"white\">Source:<pre>source</pre></body></html>","text/html","UTF-8");} catch (error) {let e: BusinessError = error as BusinessError;console.error(`ErrorCode: ${e.code}, Message: ${e.message}`);}})// 组件创建时，加载www.example.comWeb({ src: 'www.example.com', controller: this.controller})}}
}
2、页面布局
2.1示例：
// import { CourseLearning } from '@ohos/learning';
import { KnowledgeMap } from '@ohos/map';@Entry
@Component
struct Index {build() {Column() {// CourseLearning()KnowledgeMap()}.backgroundColor('#F1F3F5').padding({ top: 36, bottom: 28 })}
}
import { util } from '@kit.ArkTS';
import { BusinessError } from '@kit.BasicServicesKit';
import { Section } from '../view/KnowledgeMapContent';
import { NavBarItem, NavBarItemType } from '../view/NavBarItem';@Component
export struct KnowledgeMap {@State navBarList: NavBarItemType[] = [{ order: '01', title: '准备与学习' },{ order: '02', title: '构建应用' },{ order: '03', title: '应用测试' },{ order: '04', title: '上架' },{ order: '05', title: '运营增长' },{ order: '06', title: '商业变现' },{ order: '07', title: '更多' }];@State sections: Section[] = [];private getSections() {try {getContext(this).resourceManager.getRawFileContent("MapData.json", (error: BusinessError, value: Uint8Array) => {const textDecoder = util.TextDecoder.create("utf-8");const res = textDecoder.decodeWithStream(value, { stream: false });this.sections = JSON.parse(res);});} catch (error) {console.error(`callback getRawFileContent failed, error is ${JSON.stringify(error)}`)}}aboutToAppear(): void {this.getSections();}build() {Scroll() {Column() {Text('知识地图').fontFamily('HarmonyHeiTi-Bold').fontSize(24).fontColor(Color.Black).textAlign(TextAlign.Start).lineHeight(33).fontWeight(700).width('100%')Image($r("app.media.knowledge_map_banner")).width('100%').borderRadius(16).margin({ top: 19, bottom: 8 })Text('通过循序渐进的学习路径，无经验和有经验的开发者都可以轻松掌握ArkTS语言声明式开发范式，体验更简洁、更友好的HarmonyOS应用开发旅程。').fontFamily('HarmonyHeiTi').fontSize('14vp').fontColor('rgba(0,0,0,0.60)').fontWeight(400).textAlign(TextAlign.Start)List({ space: 12 }) {ForEach(this.navBarList, (item: NavBarItemType, index: number) => {ListItem() {NavBarItem({ navBarItem: item })}.width('100%')}, (item: NavBarItemType): string => item.title)}.width('100%').margin({ top: 24 })}.padding({top: 12,right: 16,bottom: 12,left: 16})}.backgroundColor('#F1F3F5').align(Alignment.TopStart).constraintSize({ minHeight: '100%' }).scrollable(ScrollDirection.Vertical).scrollBar(BarState.Auto).scrollBarColor(Color.Gray).edgeEffect(EdgeEffect.Spring)}
}
2.2示例：
import { CourseLearning } from '@ohos/learning';
import { KnowledgeMap } from '@ohos/map';
import { QuickStartPage } from '@ohos/quickstart';@Entry
@Component
struct Index {@State currentIndex: number = 0;private tabsController: TabsController = new TabsController();@BuildertabBarBuilder(title: string, targetIndex: number, selectedIcon: Resource, unselectIcon: Resource) {Column() {Image(this.currentIndex === targetIndex ? selectedIcon : unselectIcon).width(24).height(24)Text(title).fontFamily('HarmonyHeiTi-Medium').fontSize(10).fontColor(this.currentIndex === targetIndex ? '#0A59F7' : 'rgba(0,0,0,0.60)').textAlign(TextAlign.Center).lineHeight(14).fontWeight(500)}.width('100%').height('100%').justifyContent(FlexAlign.Center).alignItems(HorizontalAlign.Center).onClick(() => {this.currentIndex = targetIndex;this.tabsController.changeIndex(targetIndex);})}build() {Tabs({ barPosition: BarPosition.End, controller: this.tabsController }) {TabContent() {QuickStartPage()}.tabBar(this.tabBarBuilder('快速入门', 0, $r('app.media.ic_01_on'), $r('app.media.ic_01_off')))TabContent() {CourseLearning()}.tabBar(this.tabBarBuilder('课程学习', 1, $r('app.media.ic_02_on'), $r('app.media.ic_02_off')))TabContent() {KnowledgeMap()}.tabBar(this.tabBarBuilder('知识地图', 2, $r('app.media.ic_03_on'), $r('app.media.ic_03_off')))}.vertical(false).divider({strokeWidth: 0.5,color: '#0D182431'}).scrollable(false).backgroundColor('#F1F3F5').padding({ top: 36, bottom: 28 })}
}
import { TutorialView } from '../view/TutorialView';
import { ArticleClass } from '../model/ArticleClass'
import { ArticleDetailPage } from './ArticleDetailPage';
import { Banner } from '../view/Banner';
import { EnablementView } from '../view/EnablementView';
import { BannerDetailPage } from './BannerDetailPage';
import { BannerClass } from '../model/BannerClass';@Component
export struct QuickStartPage {@State message: string = '快速入门';@Provide('articlePathStack') articlePathStack: NavPathStack = new NavPathStack();@BuilderquickStartRouter(name: string, param?: ArticleClass | BannerClass) {if (name === 'articleDetail') {ArticleDetailPage()} else if (name === 'bannerDetailPage') {BannerDetailPage()}}build() {Navigation(this.articlePathStack) {Column() {Text(this.message).fontSize(24).fontWeight(700).width('100%').textAlign(TextAlign.Start).padding({ left: 16 }).fontFamily('HarmonyHeiTi-Bold').lineHeight(33)Scroll() {Column() {Banner()EnablementView()TutorialView()}}.layoutWeight(1).scrollBar(BarState.Off).align(Alignment.TopStart)}.width('100%').height('100%').backgroundColor('#F1F3F5')}.navDestination(this.quickStartRouter).hideTitleBar(true).mode(NavigationMode.Stack)}
}
import { webview } from '@kit.ArkWeb';
import { ArticleClass } from '../model/ArticleClass'@Component
export struct ArticleDetailPage {@State webviewController: webview.WebviewController = new webview.WebviewController;@Consume('articlePathStack') articlePathStack: NavPathStack;@State articleDetail: ArticleClass | null = null;aboutToAppear(): void {this.articleDetail = this.articlePathStack.getParamByName('articleDetail')[0] as ArticleClass;}build() {NavDestination() {Column() {Row() {Row() {Image($r('app.media.ic_back')).width(40).height(40).onClick(() => {this.articlePathStack.pop()})Row() {Text(this.articleDetail?.title).fontFamily('HarmonyHeiTi-Bold').fontSize(20).textAlign(TextAlign.Start).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1).fontWeight(700).margin({ left: 8 })}}.width('80%')}.justifyContent(FlexAlign.SpaceBetween).width('100%').height(56)WebComponent({ articleDetail: this.articleDetail, webviewController: this.webviewController })}.padding({ left: 16, right: 16 }).width('100%').height('100%').justifyContent(FlexAlign.SpaceBetween)}.hideTitleBar(true)}
}@Component
struct WebComponent {@Prop articleDetail: ArticleClass | null;@Prop webviewController: WebviewController;build() {Column() {Web({ src: this.articleDetail?.webUrl, controller: this.webviewController }).darkMode(WebDarkMode.Auto).domStorageAccess(true).zoomAccess(true).fileAccess(true).mixedMode(MixedMode.All).cacheMode(CacheMode.None).javaScriptAccess(true).width('100%').layoutWeight(1)}}
}
3、HTTP/HTTPS的数据请求
aboutToAppear() {// Request news category.NewsViewModel.getNewsTypeList().then((typeList: NewsTypeModel[]) => {this.tabBarArray = typeList;}).catch((typeList: NewsTypeModel[]) => {this.tabBarArray = typeList;});}
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { CommonConstant as Const } from '../common/constant/CommonConstant';
import { NewsData } from './NewsData';
import NewsTypeModel from './NewsTypeModel';
import { httpRequestGet } from '../common/utils/HttpUtil';
import Logger from '../common/utils/Logger';
import ResponseResult from './ResponseResult';class NewsViewModel {/*** Get news type list from server.** @return NewsTypeBean[] newsTypeList*/getNewsTypeList(): Promise<NewsTypeModel[]> {return new Promise((resolve: Function, reject: Function) => {let url = `${Const.SERVER}/${Const.GET_NEWS_TYPE}`;httpRequestGet(url).then((data: ResponseResult) => {if (data.code === Const.SERVER_CODE_SUCCESS) {resolve(data.data);} else {reject(Const.TabBars_DEFAULT_NEWS_TYPES);}}).catch(() => {reject(Const.TabBars_DEFAULT_NEWS_TYPES);});});}/*** Get default news type list.** @return NewsTypeBean[] newsTypeList*/getDefaultTypeList(): NewsTypeModel[] {return Const.TabBars_DEFAULT_NEWS_TYPES;}/*** Get news type list from server.** @return NewsData[] newsDataList*/getNewsList(currentPage: number, pageSize: number, path: string): Promise<NewsData[]> {return new Promise(async (resolve: Function, reject: Function) => {let url = `${Const.SERVER}/${path}`;url += '?currentPage=' + currentPage + '&pageSize=' + pageSize;httpRequestGet(url).then((data: ResponseResult) => {if (data.code === Const.SERVER_CODE_SUCCESS) {resolve(data.data);} else {Logger.error('getNewsList failed', JSON.stringify(data));reject($r('app.string.page_none_msg'));}}).catch((err: Error) => {Logger.error('getNewsList failed', JSON.stringify(err));reject($r('app.string.http_error_message'));});});}
}let newsViewModel = new NewsViewModel();export default newsViewModel as NewsViewModel;
远程请求工具类：
/** Copyright (c) 2022 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { http } from '@kit.NetworkKit';
import ResponseResult from '../../viewmodel/ResponseResult';
import { CommonConstant as Const, ContentType } from '../constant/CommonConstant';/*** Initiates an HTTP request to a given URL.** @param url URL for initiating an HTTP request.* @param params Params for initiating an HTTP request.*/
export function httpRequestGet(url: string): Promise<ResponseResult> {let httpRequest = http.createHttp();let responseResult = httpRequest.request(url, {method: http.RequestMethod.GET,readTimeout: Const.HTTP_READ_TIMEOUT,header: {'Content-Type': ContentType.JSON},connectTimeout: Const.HTTP_READ_TIMEOUT,extraData: {}});let serverData: ResponseResult = new ResponseResult();// Processes the data and returns.return responseResult.then((value: http.HttpResponse) => {if (value.responseCode === Const.HTTP_CODE_200) {// Obtains the returned data.let result = `${value.result}`;let resultJson: ResponseResult = JSON.parse(result);if (resultJson.code === Const.SERVER_CODE_SUCCESS) {serverData.data = resultJson.data;}serverData.code = resultJson.code;serverData.msg = resultJson.msg;} else {serverData.msg = `${$r('app.string.http_error_message')}&${value.responseCode}`;}return serverData;}).catch(() => {serverData.msg = $r('app.string.http_error_message');return serverData;})
}
https的数据请求：
async onRequest() {if (this.webVisibility === Visibility.Hidden) {this.webVisibility = Visibility.Visible;try {let result = await httpGet(this.webSrc);if (result && result.responseCode === http.ResponseCode.OK) {this.controller.clearHistory();this.controller.loadUrl(this.webSrc);}} catch (error) {promptAction.showToast({message: $r('app.string.http_response_error')})}} else {this.webVisibility = Visibility.Hidden;}}
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { http } from '@kit.NetworkKit';
import CommonConstant from '../constant/CommonConstants';/*** Initiates an HTTP request to a given URL.** @param url URL for initiating an HTTP request.* @returns the result of HTTPS.*/
export default async function httpGet(url: string) {if (!url) {return undefined;}let request = http.createHttp();let result = await request.request(url, {method: http.RequestMethod.GET,header: { 'Content-Type': 'application/json' },readTimeout: CommonConstant.READ_TIMEOUT,connectTimeout: CommonConstant.CONNECT_TIMEOUT});return result;
}
4、上传图片并保存数据
uploadNewsData() {if (this.title === '') {showToast($r('app.string.prompt_no_title'));return;}if (this.content === '') {showToast($r('app.string.prompt_no_content'));return;}if (this.imageUri === '') {showToast($r('app.string.prompt_no_file'));return;}this.isUploading = true;let serverData = fileUpload(getContext(this), this.imageUri);serverData.then((data: ResponseResult) => {let imageUrl = data.data;let newsFile = new NewsFile();newsFile.id = 0;newsFile.url = imageUrl;newsFile.type = 0;newsFile.newsId = 0;let newsData: NewsData = new NewsData();newsData.title = this.title;newsData.content = this.content;newsData.imagesUrl = [newsFile];NewsViewModel.uploadNews(newsData).then(() => {this.isUploading = false;GlobalContext.getContext().setObject('isBackRouter', true);router.back();}).catch(() => {this.isUploading = false;showToast($r('app.string.upload_error_message'));});}).catch(() => {this.isUploading = false;showToast($r('app.string.upload_error_message'));});}build() {Stack() {Navigation() {Column() {Column() {TextInput({ placeholder: $r('app.string.title_default_text') }).fontSize($r('app.float.title_font')).placeholderFont({ size: $r('app.float.title_font') }).margin({ top: $r('app.float.common_padding') }).fontColor($r('app.color.title_color')).backgroundColor(Color.White).onChange((value: string) => {this.title = value;}).width(Constants.FULL_PERCENT).height($r('app.float.input_height'))Divider().opacity($r('app.float.divider_opacity')).color($r('app.color.title_color')).width(Constants.DIVIDER_WIDTH)TextArea({ placeholder: $r('app.string.content_default_text') }).placeholderFont({ size: $r('app.float.title_font') }).fontColor($r('app.color.title_color')).height($r('app.float.area_height')).fontSize($r('app.float.title_font')).margin({ top: $r('app.float.normal_padding') }).backgroundColor(Color.White).onChange((value: string) => {this.content = value;})Scroll() {Row() {Image(this.imageUri ? this.imageUri : $r('app.media.ic_add_pic')).width($r('app.float.img_size')).height($r('app.float.img_size')).objectFit(ImageFit.Cover).onClick(() => this.selectImage())}.padding($r('app.float.common_padding'))}.width(Constants.FULL_PERCENT).scrollable(ScrollDirection.Horizontal).align(Alignment.Start)}.borderRadius($r('app.float.edit_view_radius')).backgroundColor(Color.White).width(Constants.FULL_PERCENT)Button($r('app.string.release_btn')).fontSize($r('app.float.title_font')).height($r('app.float.release_btn_height')).width($r('app.float.release_btn_width')).margin({ bottom: $r('app.float.common_padding') }).onClick(() => this.uploadNewsData())}.padding({left: $r('app.float.common_padding'),right: $r('app.float.common_padding'),bottom: $r('app.float.common_padding')}).height(Constants.FULL_PERCENT).justifyContent(FlexAlign.SpaceBetween)}.height(Constants.FULL_PERCENT).title(Constants.RELEASE_TITLE).titleMode(NavigationTitleMode.Mini).backgroundColor($r('app.color.listColor'))if (this.isUploading) {UploadingLayout()}}}
uploadNewsData() {if (this.title === '') {showToast($r('app.string.prompt_no_title'));return;}if (this.content === '') {showToast($r('app.string.prompt_no_content'));return;}if (this.imageUri === '') {showToast($r('app.string.prompt_no_file'));return;}this.isUploading = true;let serverData = fileUpload(getContext(this), this.imageUri);serverData.then((data: ResponseResult) => {let imageUrl = data.data;let newsFile = new NewsFile();newsFile.id = 0;newsFile.url = imageUrl;newsFile.type = 0;newsFile.newsId = 0;let newsData: NewsData = new NewsData();newsData.title = this.title;newsData.content = this.content;newsData.imagesUrl = [newsFile];NewsViewModel.uploadNews(newsData).then(() => {this.isUploading = false;GlobalContext.getContext().setObject('isBackRouter', true);router.back();}).catch(() => {this.isUploading = false;showToast($r('app.string.upload_error_message'));});}).catch(() => {this.isUploading = false;showToast($r('app.string.upload_error_message'));});}
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { fileIo } from '@kit.CoreFileKit';
import { request } from '@kit.BasicServicesKit';
import { picker } from '@kit.CoreFileKit';
import Constants, { ContentType, RequestMethod, UploadingState } from '../constants/Constants';
import ResponseResult from '../../viewmodel/ResponseResult';
import Logger from './Logger';
import { showToast } from './ToastUtil';/*** PhotoViewPicker** @returns uri The uri for the selected file.*/
export async function fileSelect(): Promise<string> {let photoSelectOptions = new picker.PhotoSelectOptions();photoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE;photoSelectOptions.maxSelectNumber = 1;let photoPicker = new picker.PhotoViewPicker();try {let photoSelectResult = await photoPicker.select(photoSelectOptions);if (photoSelectResult && photoSelectResult.photoUris && photoSelectResult.photoUris.length > 0) {let imgUri = photoSelectResult.photoUris[0];if (imgUri.indexOf('media/Photo')<0) {showToast($r('app.string.prompt_select_img'));return '';}return photoSelectResult.photoUris[0];} else {return '';}} catch (err) {Logger.error('SelectedImage failed', JSON.stringify(err));return '';}
}/*** Upload file.** @param context Indicates the application BaseContext.* @param fileUri The local storage path of the file.* @returns the promise returned by the function.*/
export function fileUpload(context: Context, fileUri: string): Promise<ResponseResult> {// Obtaining the Application File Path.let cacheDir = context.cacheDir;let imgName = fileUri.split('/').pop() + '.jpg';let dstPath = cacheDir + '/' + imgName;let url: string = Constants.SERVER + Constants.UPLOAD_FILE;let uploadRequestOptions: request.UploadConfig = {url: url,header: {'Content-Type': ContentType.FORM},method: RequestMethod.POST,files: [{filename: imgName,name: 'file',uri: 'internal://cache/' + imgName,type: 'jpg'}],data: []};let serverData = new ResponseResult();return new Promise((resolve: Function, reject: Function) => {try {// Copy the URI to the cacheDir directory and upload the file.let srcFile = fileIo.openSync(fileUri);let dstFile = fileIo.openSync(dstPath, fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE);fileIo.copyFileSync(srcFile.fd, dstFile.fd);fileIo.closeSync(srcFile);fileIo.closeSync(dstFile);// Upload the file.request.uploadFile(context, uploadRequestOptions).then((data: request.UploadTask) => {data.on(UploadingState.COMPLETE, (result: Array<request.TaskState>) => {Logger.info('uploadFile success', JSON.stringify(result));if (result && result.length >= 1) {serverData.code = Constants.SERVER_CODE_SUCCESS;serverData.msg = result[0].message;serverData.data = Constants.IMAGE_PREFIX + result[0].path.split('/').pop();resolve(serverData);}});data.on(UploadingState.FAIL, (result: Array<request.TaskState>) => {Logger.info('uploadFile failed', JSON.stringify(result));if (result && result.length >= 1) {serverData.msg = $r('app.string.upload_error_message');reject(serverData);}})}).catch((err: Error) => {Logger.error('uploadFile failed', JSON.stringify(err));reject(serverData);});} catch (err) {Logger.error('uploadFile failed', JSON.stringify(err));reject(serverData);}})
}
/** Copyright (c) 2023 Huawei Device Co., Ltd.* Licensed under the Apache License, Version 2.0 (the "License");* you may not use this file except in compliance with the License.* You may obtain a copy of the License at* http://www.apache.org/licenses/LICENSE-2.0* Unless required by applicable law or agreed to in writing, software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/import { NewsData } from './NewsData';
import ResponseResult from './ResponseResult';
import Constants from '../common/constants/Constants';
import { httpRequestGet, httpRequestPost } from '../common/utils/HttpUtil';
import Logger from '../common/utils/Logger';class NewsViewModel {/*** Get news type list from server.** @return NewsData[] newsDataList*/getNewsList(currentPage: number, pageSize: number): Promise<NewsData[]> {return new Promise(async (resolve: Function, reject: Function) => {let url = `${Constants.SERVER}/${Constants.GET_NEWS_LIST}`;url += '?currentPage=' + currentPage + '&pageSize=' + pageSize;httpRequestGet(url).then((data: ResponseResult) => {if (data.code === Constants.SERVER_CODE_SUCCESS) {resolve(data.data);} else {Logger.error('getNewsList failed', JSON.stringify(data));reject($r('app.string.page_none_msg'));}}).catch((err: Error) => {Logger.error('getNewsList failed', JSON.stringify(err));reject($r('app.string.http_error_message'));});});}/*** Upload news data.** @param newsData* @returns NewsData[] newsDataList*/uploadNews(newsData: NewsData): Promise<NewsData[]> {return new Promise((resolve: Function, reject: Function) => {let url = `${Constants.SERVER}/${Constants.UPLOAD_NEWS}`;httpRequestPost(url, newsData).then((result: ResponseResult) => {if (result && result.code === Constants.SERVER_CODE_SUCCESS) {resolve(result.data);} else {reject($r('app.string.upload_error_message'));}}).catch((err: Error) => {Logger.error('uploadNews failed', JSON.stringify(err));reject($r('app.string.upload_error_message'));});});}
}let newsViewModel = new NewsViewModel();export default newsViewModel as NewsViewModel;
![BaseCTF [第一周]UPX 迷你](https://i-blog.csdnimg.cn/direct/97ef3dd68fe34c339b231e7d9def5544.png)
