企业官网建设流程全解析

定制做网站开发,crm在线观看,wordpress文章所属栏目,自己建设网站需要审核吗#x1f680; 前言#xff1a;当国产之光遇见国产之光 市面上全是 Web 版的套壳 AI#xff0c;体验极其卡顿。 作为鸿蒙开发者#xff0c;我们要做就做纯原生 (Native) 的。 本教程将带你从零开始#xff0c;使用 ArkTS 对接 DeepSeek 官方 API#xff0c;并攻克最大的技… 前言当国产之光遇见国产之光市面上全是 Web 版的套壳 AI体验极其卡顿。作为鸿蒙开发者我们要做就做纯原生 (Native)的。本教程将带你从零开始使用ArkTS对接 DeepSeek 官方 API并攻克最大的技术难点——在鸿蒙原生列表里完美渲染 Markdown 代码块。️ 一、 架构设计数据流转图我们要实现的 App 包含三个核心层级UI 层基于List的聊天气泡界面。渲染层封装Web组件通过loadData动态渲染 Markdown。数据层使用http模块发起 SSE (流式) 或普通 POST 请求。系统架构 (Mermaid):UI 渲染层网络层1. 点击发送2. HTTP POST3. 返回 JSON (Markdown)4. 更新 State 数组5. 渲染数据6. 注入 HTML用户输入ArkTS 业务逻辑DeepSeek APIList 组件聊天气泡Web 组件 (Markdown 渲染器)️ 二、 核心实战一步步手撸代码1. 配置网络权限首先别忘了在module.json5中申请网络权限否则 App 连网都连不上。requestPermissions:[{name:ohos.permission.INTERNET}]2. 封装 DeepSeek API 服务DeepSeek 兼容 OpenAI 的 API 格式。我们封装一个简单的请求方法。// DeepSeekService.etsimporthttpfromohos.net.http;exportclassDeepSeekService{privatestaticAPI_URLhttps://api.deepseek.com/chat/completions;privatestaticAPI_KEY你的_DEEPSEEK_API_KEY;// 记得替换staticasyncchat(message:string):Promisestring{lethttpRequesthttp.createHttp();try{letresponseawaithttpRequest.request(this.API_URL,{method:http.RequestMethod.POST,header:{Content-Type:application/json,Authorization:Bearer${this.API_KEY}},extraData:JSON.stringify({model:deepseek-chat,messages:[{role:system,content:你是 DeepSeek一个乐于助人的 AI 助手。},{role:user,content:message}],stream:false// 教程演示简单起见暂不使用流式})});if(response.responseCode200){// 解析返回结果constresultJSON.parse(response.resultasstring);returnresult.choices[0].message.content;}else{return网络请求失败: response.responseCode;}}catch(err){return发生错误: JSON.stringify(err);}finally{httpRequest.destroy();}}}3. 攻克难点Markdown 渲染组件 (MarkdownView)鸿蒙原生的RichText功能有限。为了支持代码高亮和表格最稳妥的方案是使用 Web 组件加载本地 HTML 模板并注入marked.js和highlight.js。// MarkdownView.etsimportweb_webviewfromohos.web.webview;Componentexportstruct MarkdownView{Propcontent:string;// 接收 Markdown 文本controller:web_webview.WebviewControllernewweb_webview.WebviewController();// 构建一个包含 Markdown 解析库的 HTML 模板// 在真实项目中建议将 marked.min.js 放进 rawfile 资源中读取privatehtmlTemplate(mdContent:string):string{return!DOCTYPE html html head meta nameviewport contentwidthdevice-width, initial-scale1.0 script srchttps://cdn.jsdelivr.net/npm/marked/marked.min.js/script link relstylesheet hrefhttps://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown-light.min.css style body { padding: 10px; background-color: transparent; } /style /head body div idcontent classmarkdown-body/div script document.getElementById(content).innerHTML marked.parse(\${mdContent.replace(//g,\\)}\); /script /body /html;}build(){// 关键使用 Web 组件渲染 HTMLWeb({src:,controller:this.controller}).onControllerAttached((){// 当 Web 组件加载完成后注入内容this.controller.loadData(this.htmlTemplate(this.content),text/html,UTF-8);}).width(100%)// 根据内容动态高度是个大坑这里简化处理固定高度或使用 JS 交互算高度.height(300).backgroundColor(Color.Transparent)}}4. 组装主界面 (Index.ets)最后把聊天列表、输入框和我们的MarkdownView组装起来。import{DeepSeekService}from./DeepSeekService;import{MarkdownView}from./MarkdownView;// 定义消息模型classChatMessage{id:number;role:user|ai;content:string;constructor(role:user|ai,content:string){this.idDate.now();this.rolerole;this.contentcontent;}}EntryComponentstruct Index{Statemessages:ChatMessage[][];StateinputText:string;StateisLoading:booleanfalse;scroller:ScrollernewScroller();asyncsendMessage(){if(this.inputText.trim())return;// 1. 添加用户消息constuserMsgthis.inputText;this.messages.push(newChatMessage(user,userMsg));this.inputText;this.isLoadingtrue;// 2. 调用 DeepSeek APIconstaiResponseawaitDeepSeekService.chat(userMsg);// 3. 添加 AI 消息this.messages.push(newChatMessage(ai,aiResponse));this.isLoadingfalse;// 滚动到底部this.scroller.scrollEdge(Edge.Bottom);}build(){Column(){// 标题Text(DeepSeek Harmony).fontSize(20).fontWeight(FontWeight.Bold).height(50)// 聊天列表区List({scroller:this.scroller}){ForEach(this.messages,(msg:ChatMessage){ListItem(){Row(){if(msg.roleuser){// 用户消息 (右侧)Text(msg.content).backgroundColor(#95EC69).padding(10).borderRadius(8).margin({left:50})}else{// AI 消息 (左侧支持 Markdown)Column(){MarkdownView({content:msg.content})}.backgroundColor(#FFFFFF).borderRadius(8).margin({right:20}).width(90%)}}.width(100%).justifyContent(msg.roleuser?FlexAlign.End:FlexAlign.Start).padding(10)}})}.layoutWeight(1)// 占据剩余空间.backgroundColor(#F5F5F5)// 底部输入区Row(){TextInput({text:this.inputText,placeholder:问点什么...}).onChange((value)this.inputTextvalue).layoutWeight(1).backgroundColor(Color.White).margin({right:10})Button(this.isLoading?思考中...:发送).onClick(()this.sendMessage()).enabled(!this.isLoading)}.padding(10).backgroundColor(#EEEEEE)}.height(100%)}} 三、 避坑指南与性能优化Web 组件高度自适应上面的代码为了演示给MarkdownView写死了高度。在生产环境中你需要使用Web组件的onConsole或 JSBridge在 HTML 渲染完成后将document.body.scrollHeight传回给 ArkTS然后动态设置组件高度否则长文会被截断。流式响应 (Stream)DeepSeek 支持 Stream 模式打字机效果。在鸿蒙中这需要使用http模块的on(headerReceive)和on(dataReceive)监听事件逐步拼接字符串并刷新 UI。这能极大提升用户体验。API Key 安全永远不要把 API Key 硬编码在客户端代码里上传到 Git建议通过自己的后端服务器中转请求。 总结通过不到 200 行代码我们就在 HarmonyOS Next 上跑通了一个“DeepSeek”客户端。这不仅验证了鸿蒙生态的开发效率也展示了ArkTS Web 组件混合开发的强大能力。Next Step:尝试给你的 App 加上“流式输出”功能让 AI 的回复像打字机一样一个个蹦出来体验瞬间提升 10 倍