Webwidget使用说明

1. 开发者文档应用脚手架

1.1 项目描述

本仓库包含一个脚手架，帮助开发者构建新核云应用

1.2 快速开始

1.2.1 环境依赖

Node.js ≥ 18.12.1

1.2.2 安装配置

克隆本仓库

运行pnpm install

1.2.2.1 开发环境

打开新终端运行 pnpm run dev

注意： pnpm run dev命令启用了热模块替换(HMR)，您对代码的修改将立即生效而无需手动刷新页面，极大提升开发体验。

1.2.2.2 生产环境

打开新终端运行 pnpm run build

上传至新核云插件平台

开启应用状态（如已开启请忽略）
注意：不建议修改打包产物的配置文件！

1.3 为什么选择此脚手架？

本脚手架提供多种功能帮助您维护和扩展应用，以下为部分特性（无需预先掌握这些技术）：

ECMAScript(ES2022) - 支持最新JavaScript标准

Vite构建工具 - 基于Rollup的高效模块打包

PostCSS样式处理 - 支持CSS变量、混入等高级特性

优化构建 - 自动代码分割和tree shaking

Vitest测试框架 - 与Vite生态无缝集成的测试方案

1.4 目录结构

1.4.1 目录/文件

.github/： PR模板、ISSUE模板等存放位置

dist/：构建产物目录

src/：源代码目录(JS/CSS/模板/翻译文件)

rollup/：支持i18n的静态复制和翻译加载插件

vite.config.js：Vite配置文件

package.json：项目元数据和依赖配置

1.4.2 核心目录说明

dist：构建生成的目录，包含manifest.json和编译后的静态资源

src：源代码主目录，包含国际化文件zh-CN.json/en-US.json

vite.config.ts：配置Vite构建参数，集成@newcore/client SDK

1.5 国际化(I18n)

/src/lib/i18n.ts模块提供t方法进行翻译键值查找。语言文件应命名为：

中文：zh-CN.json

英文：en-US.json

1.6 SDK文档

参考新核云SDK技术文档。

1.7 问题反馈

通过联系管理员进行反馈。

1.8 版权声明

2. SDK使用文档

2.1 概述

本文档描述了如何使用 @newcore/client SDK 来初始化和获取应用上下文信息。

2.2 安装

npm install @newcore/client

2.3 导入

import { XHYClient } from '@newcore/client';

2.4 初始化

在使用SDK前，必须先进行异步初始化以获取client对象。

2.5 方法签名

XHYClient.init(): Promise<Client>

2.6 使用示例

2.7 获取上下文信息

2.7.1 获取位置信息

通过 client.context.location 可以访问应用的位置配置信息。

使用示例

const location = client.context.location;

console.log(location) // TopBar SideBar NavBar

2.7.2 获取语言信息

通过 client.context.language 可以获取当前应用的语言设置。

使用示例
const currentLanguage = client.context.language;

console.log('当前语言:', currentLanguage); // zh-CN en-US

2.8 manifest.json 配置说明

{
  "name": "应用名称",
  "author": {
    "name": "作者名称"
  },
  "location": {
    "topBar": {
      "flexible": true,
      "size": {
        "width": "220px",
        "height": "100px"
      }
    }
  },
  "version": "应用版本",
  "frameworkVersion": "框架版本要求"
}

字段说明

字段	类型	必填	说明
name	string	是	应用名称
author	object	是	应用作者信息
author.name	string	是	作者名称
location	object	是	应用显示位置配置
location.topBar	object	否	顶部栏位置配置
location.navBar	object	否	导航栏位置配置
location.sideBar	object	否	侧边栏位置配置
flexible	boolean	是	是否占据父容器
size	object	是	容器尺寸配置
size.width	string	是	容器宽度(如"220px")
size.height	string	是	容器高度(如"100px")
version	string	是	应用版本号
frameworkVersion	string	是	所需框架最低版本

2.9 注意事项

使用SDK前必须调用 XHYClient.init() 方法进行初始化

location配置中至少需要提供一个位置(topBar/navBar/sideBar)

1. 开发者文档应用脚手架#

1.1 项目描述#

1.2 快速开始#

1.2.1 环境依赖#

1.2.2 安装配置#

1.2.2.1 开发环境#

1.2.2.2 生产环境#

1.3 为什么选择此脚手架？#

1.4 目录结构#

1.4.1 目录/文件#

1.4.2 核心目录说明#

1.5 国际化(I18n)#

1.6 SDK文档#

1.7 问题反馈#

1.8 版权声明#

2. SDK使用文档#

2.1 概述#

2.2 安装#

2.3 导入#

2.4 初始化#

2.5 方法签名#

2.6 使用示例#

2.7 获取上下文信息#

2.7.1 获取位置信息#

2.7.2 获取语言信息#

2.8 manifest.json 配置说明#

2.9 注意事项#