ReactNative for Harmony 项目鸿蒙化三方库集成实战：react-native-webview

优质文章学习记录

— 12 min read
ReactNative for Harmony 项目鸿蒙化三方库集成实战：react-native-webview
在这里插入图片描述

📋 前言

react-native-webview 是 React Native 社区最流行的 WebView 组件，提供了一套完整的网页加载和交互解决方案。它支持加载网络 URL、本地 HTML 文件、注入 JavaScript、处理网页事件等多种功能，并且完全兼容 Android、iOS 和 HarmonyOS 三端。

🎯 库简介

基本信息

  • 库名称: @react-native-ohos/react-native-webview
  • 版本信息:
    • 13.10.5: 支持 RN 0.72 版本
    • 13.15.1: 支持 RN 0.77 版本
  • 官方仓库: https://github.com/react-native-oh-library/react-native-webview
  • 主要功能:
    • 加载网络 URL 和本地 HTML
    • 注入 JavaScript 代码
    • 处理网页加载事件
    • 网页与原生通信
    • 支持多种配置选项
    • 兼容 Android、iOS 和 HarmonyOS
  • 兼容性验证:
    • 鸿蒙化版本 13.10.4-rc.4 及之后需要 DevEco Studio 6.0.0 (API20) 及以上版本

为什么需要这个库？

  • 功能完整: 提供完整的 WebView 功能
  • 跨平台: 在三端提供一致的体验
  • 易于使用: API 简单直观
  • 性能优异: 原生实现，高效稳定
  • 灵活配置: 支持多种配置选项

📦 安装步骤

1. 使用 npm 安装

根据您的 RN 版本选择对应的包名：

npminstall @react-native-ohos/[email protected]

2. 验证安装

安装完成后，检查 package.json 文件，应该能看到新增的依赖：

{"dependencies":{"@react-native-ohos/react-native-webview":"^13.10.5-rc.1",// ... 其他依赖}}

🔧 HarmonyOS 平台配置 ⭐

1. 在工程根目录的 oh-package.json5 添加 overrides 字段

首先需要使用 DevEco Studio 打开项目里的 HarmonyOS 工程 harmony

打开 harmony/oh-package.json5，添加以下配置：

{ ... "overrides": { "@rnoh/react-native-openharmony": "^0.72.90" } }

2. 引入原生端代码

方法一：通过 har 包引入（不推荐）
[!TIP] har 包位于三方库安装路径的 harmony 文件夹下。

打开 entry/oh-package.json5，添加以下依赖：

"dependencies": { "@rnoh/react-native-openharmony": "0.72.90", "@react-native-ohos/react-native-webview": "file:../../node_modules/@react-native-ohos/react-native-webview/harmony/rn_webview.har" }

点击右上角的 sync 按钮

或者在终端执行：

cd entry ohpm install
方法二：直接链接源码

步骤 1: 把 <RN工程>/node_modules/@react-native-ohos/react-native-webview/harmony 目录下的源码 rn_webview 复制到 harmony（鸿蒙壳工程）工程根目录下。

步骤 2: 在 harmony 工程根目录的 build-profile.template.json5（若存在）和 build-profile.json5 添加以下模块：

modules: [ ... { name: 'rn_webview', srcPath: './rn_webview', } ]

步骤 3: 打开 rn_webview/oh-package.json5，修改 react-native-openharmony 和项目的版本一致。

步骤 4: 打开 entry/oh-package.json5，添加以下依赖：

"dependencies": { "@rnoh/react-native-openharmony": "0.72.90", "@react-native-ohos/react-native-webview": "file:../rn_webview" }

步骤 5: 点击 DevEco Studio 右上角的 sync 按钮

3. 配置 CMakeLists 和引入 WebViewPackage

打开 entry/src/main/cpp/CMakeLists.txt，添加：

project(rnapp) cmake_minimum_required(VERSION 3.4.1) set(CMAKE_SKIP_BUILD_RPATH TRUE) set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules") set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") set(RNOH_CPP_DIR "${OH_MODULE_DIR}/@rnoh/react-native-openharmony/src/main/cpp") set(CMAKE_ASM_FLAGS "-Wno-error:unused-command-line-argument -Qunused-arguments") set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,noexecstack -s -fPIE -pie") add_compile_definitions(WITH_HITRACE_SYSTRACE) set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use add_subdirectory("${RNOH_CPP_DIR}" ./rn) add_library(rnoh_app SHARED "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" "./PackageProvider.cpp") target_link_libraries(rnoh_app PUBLIC rnoh) set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") + add_subdirectory("${OH_MODULES}/@react-native-ohos/react-native-webview/src/main/cpp" ./webview) + target_link_libraries(rnoh_app PUBLIC rnoh_webview)

打开 entry/src/main/cpp/PackageProvider.cpp，添加：

#include "RNOH/PackageProvider.h" #include "generated/RNOHGeneratedPackage.h" #include "SamplePackage.h" + #include "WebViewPackage.h" using namespace rnoh; std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) { return { std::make_shared<RNOHGeneratedPackage>(ctx), std::make_shared<SamplePackage>(ctx), + std::make_shared<WebViewPackage>(ctx) }; }

4. 在 ArkTs 侧引入 WebView 组件

找到 function buildCustomComponent()，一般位于 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets，添加：

+ import { WebView, WEB_VIEW } from "@react-native-ohos/react-native-webview" @Builder function buildCustomComponent(ctx: ComponentBuilderContext) { + if (ctx.componentName === WEB_VIEW) { + WebView({ + ctx: ctx.rnComponentContext, + tag: ctx.tag + }) + } ... }
[!TIP] 本库使用了混合方案，需要添加组件名。

在 entry/src/main/ets/pages/index.ets 或 entry/src/main/ets/rn/LoadBundle.ets 找到常量 arkTsComponentNames 在其数组里添加组件名：

const arkTsComponentNames: Array<string> = [ + WEB_VIEW ];

5. 在 ArkTs 侧引入 WebViewPackage

打开 entry/src/main/ets/RNPackagesFactory.ts，添加：

+ import { WebViewPackage } from '@react-native-ohos/react-native-webview/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), + new WebViewPackage(ctx) ]; }

6. 运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry ohpm install

然后编译、运行即可。

💻 完整代码示例

下面是一个完整的示例，展示了 react-native-webview 的各种使用场景：

import React,{ useRef, useState }from'react';import{ View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, SafeAreaView, ActivityIndicator,}from'react-native';import{ WebView, WebViewNavigation }from'react-native-webview';functionWebViewDemo(){const webViewRef =useRef<WebView>(null);const[url, setUrl]=useState('https://reactnative.dev/');const[canGoBack, setCanGoBack]=useState(false);const[canGoForward, setCanGoForward]=useState(false);const[loading, setLoading]=useState(false);const[currentUrl, setCurrentUrl]=useState('');const[error, setError]=useState<string|null>(null);const[progress, setProgress]=useState(0);consthandleGoBack=()=>{if(webViewRef.current &&typeof webViewRef.current.goBack ==='function'){ webViewRef.current.goBack();}};consthandleGoForward=()=>{if(webViewRef.current &&typeof webViewRef.current.goForward ==='function'){ webViewRef.current.goForward();}};consthandleReload=()=>{ webViewRef.current?.reload();};consthandleLoad=()=>{ webViewRef.current?.injectJavaScript(` (function() { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'pageInfo', title: document.title, url: window.location.href })); })(); true; `);};consthandleMessage=(event:any)=>{try{const data =JSON.parse(event.nativeEvent.data);console.log('收到网页消息:', data);}catch(e){console.log('收到网页消息:', event.nativeEvent.data);}};constloadUrl=()=>{if(url.trim()){setError(null);}};constuseDefaultUrl=()=>{setUrl('https://reactnative.dev/');setError(null);};return(<SafeAreaView style={styles.container}><View style={styles.container}>{/* 顶部工具栏 */}<View style={styles.toolbar}><TouchableOpacity style={[styles.navButton,!canGoBack && styles.disabledButton]} onPress={handleGoBack} disabled={!canGoBack}><Text style={styles.navButtonText}>←</Text></TouchableOpacity><TouchableOpacity style={[styles.navButton,!canGoForward && styles.disabledButton]} onPress={handleGoForward} disabled={!canGoForward}><Text style={styles.navButtonText}>→</Text></TouchableOpacity><TouchableOpacity style={styles.navButton} onPress={handleReload}><Text style={styles.navButtonText}>↻</Text></TouchableOpacity><TextInput style={styles.urlInput} value={url} onChangeText={setUrl} onSubmitEditing={loadUrl} placeholder="输入网址" autoCapitalize="none" autoCorrect={false}/><TouchableOpacity style={styles.goButton} onPress={loadUrl}><Text style={styles.goButtonText}>前往</Text></TouchableOpacity></View>{/* 进度条 */}{loading && progress >0&& progress <1&&(<View style={styles.progressBarContainer}><View style={[styles.progressBar,{ width:`${progress *100}%`}]}/></View>)}{/* 错误提示 */}{error &&(<View style={styles.errorContainer}><Text style={styles.errorText}>{error}</Text></View>)}{/* WebView */}<View style={styles.webviewContainer}>{loading &&(<View style={styles.loadingContainer}><ActivityIndicator size="large" color="#42a5f5"/><Text style={styles.loadingText}>加载中...</Text></View>)}<WebView ref={webViewRef} source={{ uri: url }} style={styles.webview} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} scalesPageToFit={true} showsHorizontalScrollIndicator={true} showsVerticalScrollIndicator={true} onNavigationStateChange={(navState: WebViewNavigation)=>{setCanGoBack(navState.canGoBack);setCanGoForward(navState.canGoForward);setCurrentUrl(navState.url);}} onLoadStart={()=>{setLoading(true);setError(null);}} onLoadEnd={()=>{setLoading(false);// 延迟执行 JavaScript 注入，确保 WebView 已完全加载setTimeout(()=>{handleLoad();},100);}} onLoadProgress={({ nativeEvent })=>{setProgress(nativeEvent.progress);}} onHttpError={(syntheticEvent)=>{const{ nativeEvent }= syntheticEvent;setError(`HTTP 错误: ${nativeEvent.statusCode}`);setLoading(false);}} onError={(syntheticEvent)=>{const{ nativeEvent }= syntheticEvent;setError(`加载错误: ${nativeEvent.description}`);setLoading(false);}} onMessage={handleMessage} injectedJavaScriptBeforeContentLoaded={` window.addEventListener('load', function() { window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'loaded', timestamp: new Date().toISOString() })); }); `} ignoreSilentHardwareSwitch={true}/></View>{/* 当前 URL 显示 */}{currentUrl &&(<View style={styles.urlDisplay}><Text style={styles.urlLabel}>当前页面:</Text><Text style={styles.urlText} numberOfLines={1}>{currentUrl}</Text></View>)}{/* 功能按钮 */}<View style={styles.buttonContainer}><TouchableOpacity style={styles.actionButton} onPress={useDefaultUrl}><Text style={styles.actionButtonText}>React Native 官网</Text></TouchableOpacity><TouchableOpacity style={styles.actionButton} onPress={()=>{ webViewRef.current?.injectJavaScript(` alert('这是一个来自 React Native 的注入消息！'); true; `);}}><Text style={styles.actionButtonText}>注入 JS</Text></TouchableOpacity><TouchableOpacity style={styles.actionButton} onPress={()=>{if(webViewRef.current &&typeof webViewRef.current.clearCache ==='function'){ webViewRef.current.clearCache(true);}}}><Text style={styles.actionButtonText}>清除缓存</Text></TouchableOpacity></View>{/* 说明 */}<View style={styles.infoSection}><Text style={styles.infoTitle}>功能说明：</Text><Text style={styles.infoText}> • 支持加载网络 URL 和本地 HTML 文件 </Text><Text style={styles.infoText}> • 支持注入 JavaScript 代码 </Text><Text style={styles.infoText}> • 支持网页与原生通信 </Text><Text style={styles.infoText}> • 支持前进、后退、刷新等导航功能 </Text><Text style={styles.infoText}> • 支持加载进度显示 </Text><Text style={styles.infoText}> • 支持错误处理 </Text></View>{/* 注意事项 */}<View style={styles.noteSection}><Text style={styles.noteTitle}>注意事项：</Text><Text style={styles.noteText}> • ignoreSilentHardwareSwitch 需要设置为 true，网页播放才有声音 </Text><Text style={styles.noteText}> • 需要配置网络权限才能访问网络 </Text><Text style={styles.noteText}> • 部分属性 HarmonyOS 暂不支持 </Text><Text style={styles.noteText}> • 编译需要 DevEco Studio 6.0.0(API20) 及以上版本 </Text></View></View></SafeAreaView>);}const styles = StyleSheet.create({ container:{ flex:1, backgroundColor:'#f5f5f5',}, toolbar:{ flexDirection:'row', alignItems:'center', padding:10, backgroundColor:'#fff', borderBottomWidth:1, borderBottomColor:'#e0e0e0', gap:5,}, navButton:{ width:40, height:40, justifyContent:'center', alignItems:'center', backgroundColor:'#f5f5f5', borderRadius:8,}, disabledButton:{ opacity:0.3,}, navButtonText:{ fontSize:20, fontWeight:'bold', color:'#333',}, urlInput:{ flex:1, height:40, borderWidth:1, borderColor:'#ddd', borderRadius:8, paddingHorizontal:10, backgroundColor:'#f9f9f9', fontSize:14,}, goButton:{ paddingHorizontal:15, paddingVertical:8, backgroundColor:'#42a5f5', borderRadius:8,}, goButtonText:{ color:'#fff', fontSize:14, fontWeight:'bold',}, progressBarContainer:{ height:2, backgroundColor:'#e0e0e0',}, progressBar:{ height:'100%', backgroundColor:'#42a5f5',}, errorContainer:{ padding:10, backgroundColor:'#ffebee', borderBottomWidth:1, borderBottomColor:'#ffcdd2',}, errorText:{ color:'#c62828', fontSize:14, textAlign:'center',}, webviewContainer:{ flex:1, backgroundColor:'#fff',}, webview:{ flex:1,}, loadingContainer:{ position:'absolute', top:0, left:0, right:0, bottom:0, justifyContent:'center', alignItems:'center', backgroundColor:'rgba(255, 255, 255, 0.8)',}, loadingText:{ marginTop:10, fontSize:16, color:'#666',}, urlDisplay:{ padding:10, backgroundColor:'#fff', borderBottomWidth:1, borderBottomColor:'#e0e0e0',}, urlLabel:{ fontSize:12, color:'#666', marginBottom:5,}, urlText:{ fontSize:14, color:'#333',}, buttonContainer:{ flexDirection:'row', flexWrap:'wrap', padding:10, gap:10, backgroundColor:'#fff', borderBottomWidth:1, borderBottomColor:'#e0e0e0',}, actionButton:{ paddingHorizontal:15, paddingVertical:10, backgroundColor:'#42a5f5', borderRadius:8, minWidth:100, alignItems:'center',}, actionButtonText:{ color:'#fff', fontSize:14, fontWeight:'500',}, infoSection:{ margin:10, padding:15, backgroundColor:'#e3f2fd', borderRadius:8, borderLeftWidth:4, borderLeftColor:'#42a5f5',}, infoTitle:{ fontSize:14, fontWeight:'bold', marginBottom:8, color:'#1565c0',}, infoText:{ fontSize:13, color:'#1976d2', marginBottom:4,}, noteSection:{ margin:10, padding:15, backgroundColor:'#fff3cd', borderRadius:8, borderLeftWidth:4, borderLeftColor:'#ffc107',}, noteTitle:{ fontSize:14, fontWeight:'bold', marginBottom:8, color:'#856404',}, noteText:{ fontSize:13, color:'#856404', marginBottom:4,},});exportdefault WebViewDemo;

🎨 实际应用场景

react-native-webview 可以应用于以下实际场景：

  1. 混合开发: 在原生应用中嵌入 H5 页面
  2. 在线文档: 查看 PDF、Word 等在线文档
  3. 第三方登录: 集成微信、支付宝等第三方登录
  4. 内容展示: 展示富文本、图表等复杂内容
  5. 广告展示: 加载第三方广告页面

⚠️ 注意事项与最佳实践

1. 网络权限配置

在使用 WebView 之前，需要在 HarmonyOS 的 module.json5 中配置网络权限：

{ "module": { "requestPermissions": [ { "name": "ohos.permission.INTERNET" } ] } }

2. 重要属性配置

// ✅ 推荐：启用声音播放<WebView ignoreSilentHardwareSwitch={true}// .../>// ✅ 推荐：启用 JavaScript<WebView javaScriptEnabled={true} domStorageEnabled={true}// .../>// ✅ 推荐：处理加载状态<WebView startInLoadingState={true} onLoadStart={()=>setLoading(true)} onLoadEnd={()=>setLoading(false)}// .../>

3. JavaScript 注入

// ✅ 推荐：页面加载完成后注入<WebView onLoad={()=>{ webViewRef.current?.injectJavaScript(` // 你的 JavaScript 代码 true; `);}}/>// ✅ 推荐：页面加载前注入<WebView injectedJavaScriptBeforeContentLoaded={` // 在页面加载前执行的 JavaScript 代码 `}/>

4. 网页与原生通信

// 在网页中发送消息 window.ReactNativeWebView.postMessage(JSON.stringify({ type:'message', data:'hello from web'}));// 在 React Native 中接收消息<WebView onMessage={(event)=>{const data =JSON.parse(event.nativeEvent.data);console.log('收到消息:', data);}}/>

5. 性能优化

// ✅ 推荐：启用缓存<WebView cacheEnabled={true}// .../>// ✅ 推荐：清除缓存 webViewRef.current?.clearCache(true);// ✅ 推荐：减少不必要的渲染

6. HarmonyOS 特殊处理

在 HarmonyOS 上，需要注意：

  • 声音播放: ignoreSilentHardwareSwitch 需要设置为 true，网页播放才有声音
  • 编译版本: 需要使用 DevEco Studio 6.0.0 (API20) 及以上版本
  • 部分属性: 部分属性 HarmonyOS 暂不支持
  • 混合方案: 需要在 ArkTs 侧添加组件名和 WebView 组件

🧪 测试验证

1. Android 平台测试

npm run android

测试要点:

  • 测试网页加载
  • 测试导航功能
  • 验证 JavaScript 注入
  • 检查音频播放

2. iOS 平台测试

npm run ios

测试要点:

  • 测试网页加载质量
  • 验证 JavaScript 执行
  • 测试通信功能
  • 检查缓存机制

3. HarmonyOS 平台测试

npm run harmony

测试要点:

  • 验证网页加载功能
  • 测试声音播放（需要设置 ignoreSilentHardwareSwitch）
  • 检查 JavaScript 注入
  • 验证网页与原生通信

4. 常见问题排查

问题 1: 网页无法加载

  • 检查网络权限配置
  • 确认 URL 是否正确
  • 验证网络连接

问题 2: 音频没有声音

  • 确认 ignoreSilentHardwareSwitch 设置为 true
  • 检查设备音量设置
  • 验证音频文件格式

问题 3: JavaScript 不执行

  • 确认 javaScriptEnabled 设置为 true
  • 检查 JavaScript 代码语法
  • 验证注入时机

📊 对比：原生 WebView vs react-native-webview

特性原生 WebViewreact-native-webview
跨平台一致性❌✅ 完全一致
API 简洁性⚠️ 复杂✅ 简洁
JavaScript 注入✅ 支持✅ 支持
网页通信⚠️ 复杂✅ 简单
导航控制✅ 完整✅ 完整
缓存管理✅ 完整✅ 完整

📝 总结

通过集成 react-native-webview，我们为项目添加了强大的 WebView 功能。这个库提供了完整的网页加载和交互解决方案，支持多种配置选项，并且完全跨平台兼容。

关键要点回顾

  • ✅ 安装依赖: npm install @react-native-ohos/react-native-webview
  • ✅ 配置平台: 通过 har 包或直接链接源码，配置 CMakeLists.txt、PackageProvider.cpp、RNPackagesFactory.ts 和 buildCustomComponent
  • ✅ 集成代码: 使用 WebView 组件
  • ✅ 支持功能: 加载 URL、注入 JS、网页通信、导航控制等
  • ✅ 重要: 本库使用了混合方案，需要在 ArkTs 侧添加组件名和 WebView 组件
  • ✅ 注意: ignoreSilentHardwareSwitch 需要设置为 true，网页播放才有声音

实际效果

  • Android: 原生 WebView 体验
  • iOS: 高质量的 WebView 体验
  • HarmonyOS: 一致的 WebView 体验

已知限制

  • ⚠️ 部分属性 HarmonyOS 暂不支持
  • ⚠️ 需要使用 DevEco Studio 6.0.0 (API20) 及以上版本
  • ⚠️ 中文乱码问题已修复
  • ⚠️ 部分属性未实现 HarmonyOS 化

遗留问题

  • webview 部分属性未实现 HarmonyOS 化
  • webview 部分属性未实现 HarmonyOS 化
  • 中文乱码（已修复）

希望这篇教程能帮助你顺利集成 react-native-webview，构建出色的 WebView 体验！

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.ZEEKLOG.net

Read more

Java Web 画师约稿平台系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

Java Web 画师约稿平台系统源码-SpringBoot2+Vue3+MyBatis-Plus+MySQL8.0【含文档】

摘要 随着互联网技术的快速发展，线上约稿平台逐渐成为画师与需求方之间高效沟通的桥梁。传统约稿模式存在信息不对称、交易流程繁琐、作品管理困难等问题，亟需一种数字化解决方案。画师约稿平台系统通过整合线上支付、作品展示、订单管理等功能，为画师和用户提供便捷的交互环境。该系统不仅提高了约稿效率，还通过智能推荐和信用评价机制优化用户体验。关键词：画师约稿平台、数字化解决方案、线上支付、智能推荐、信用评价。 本系统基于前后端分离架构，采用 SpringBoot2 作为后端框架，Vue3 作为前端框架，结合 MyBatis-Plus 实现高效数据操作，MySQL8.0 提供稳定数据存储。系统功能涵盖用户注册登录、画师作品展示、订单管理、支付结算、评价反馈等模块。后端采用 RESTful API 设计，确保接口规范性与可扩展性；前端利用 Vue3 的响应式特性提升用户体验。系统通过 JWT 实现安全认证，结合 Redis 缓存优化性能，

前端代码可读性优化：让你的代码不再像天书

前端代码可读性优化：让你的代码不再像天书 毒舌时刻 代码可读性？听起来就像是前端工程师为了显得自己很专业而特意搞的一套复杂流程。你以为随便加几个注释就能提高代码可读性？别做梦了！到时候你会发现，注释比代码还多，维护起来比代码还麻烦。 你以为变量名取长一点就能提高可读性？别天真了！过长的变量名会让代码变得臃肿，反而影响可读性。还有那些所谓的代码规范，看起来高大上，用起来却各种问题。 为什么你需要这个 1. 提高可维护性：良好的代码可读性可以提高代码的可维护性，减少维护成本。 2. 减少错误：可读性高的代码更容易理解，减少出错的概率。 3. 团队协作：良好的代码可读性可以便于团队成员之间的协作，减少沟通成本。 4. 代码复用：可读性高的代码更容易被复用，提高开发效率。 5. 降低学习成本：新团队成员可以更快地理解代码，降低学习成本。 反面教材 // 1. 变量名不清晰 function calc(a, b, c) { let x = a + b;

【前端高频面试题】 - TypeScript 篇，零基础入门到精通，收藏这篇就够了

【前端高频面试题】 - TypeScript 篇 1. 请解释 TypeScript 是什么？它与 JavaScript 的核心区别是什么？ 面试回答需突出 TS 的核心价值（类型安全）和与 JS 的关键差异，结构清晰： * TypeScript 定义：TS 是 JavaScript 的超集（Superset），在 JS 语法基础上增加了静态类型系统，最终会编译为纯 JS 运行（支持所有 JS 环境），核心目标是提升代码可维护性、减少运行时错误。 * 与 JavaScript 的核心区别（分点对比）： 1. 类型系统：TS 有静态类型（编译阶段检查类型，变量声明时需指定/推断类型）；JS 是动态类型（

OpenWebUI联网搜索实战：如何用SearXNG让本地大模型获取实时信息（附百度/360配置）

OpenWebUI联网搜索实战：如何用SearXNG让本地大模型获取实时信息（附百度/360配置） 如果你在本地运行大模型，比如用Ollama部署了Qwen、Llama或者DeepSeek，可能会发现一个尴尬的问题：模型的知识截止日期是固定的，它不知道今天股市涨跌，不清楚最新的科技新闻，甚至不知道明天是什么节日。这种“信息孤岛”的感觉，让本地大模型的实用性大打折扣。 我最初搭建OpenWebUI环境时，也遇到了这个痛点。看着模型一本正经地分析过时的数据，那种无力感让我开始寻找解决方案。市面上有不少联网搜索方案，但要么配置复杂，要么对国内网络环境不友好。经过几周的折腾和测试，我发现SearXNG这个开源元搜索引擎，配合OpenWebUI的联网搜索功能，是目前最稳定、最灵活的方案之一。 更重要的是，通过合理配置SearXNG，我们可以让本地大模型直接调用百度、360等国内搜索引擎，获取符合中文用户习惯的实时信息。这不仅仅是技术上的连接，更是让本地AI真正“接地气”的关键一步。下面我就把自己踩过的坑、验证过的配置，以及实际效果对比，毫无保留地分享给你。 1. 为什么需要SearXN