@ray-js/audit-rating-web-component v1.7.2

Audit Rating Web Component

基于 React 的审计评分 Web 组件，用于展示应用程序的审计评分和性能指标。该组件可以通过 npm 或 CDN 轻松集成到任何 Web 应用程序中。

English | 简体中文

功能特点

• 全面展示性能、体验和最佳实践指标
• 显示失败项目的详细资源信息
• 响应式设计，适配所有设备
• 支持国际化（中文和英文）
• 通过数据属性自定义配置
• 易于集成的 Web Component

安装

使用 npm/yarn/pnpm

npm install @ray-js/audit-rating-web-component
# 或
yarn add @ray-js/audit-rating-web-component
# 或
pnpm add @ray-js/audit-rating-web-component

使用 CDN

可以直接通过 CDN 引入组件：

<!-- 引入 React 和 ReactDOM（生产版本） -->
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

<!-- 引入审计评分组件 -->
<script src="https://unpkg.com/@ray-js/audit-rating-web-component/dist/audit-rating-component.umd.cjs"></script>
<link rel="stylesheet" href="https://unpkg.com/@ray-js/audit-rating-web-component/dist/audit-rating-component.css">

使用方法

基本用法

引入脚本后，可以在 HTML 中使用自定义元素：

<!-- 方法一：直接使用自定义元素 -->
<audit-rating-box data-language="zh"></audit-rating-box>

<!-- 方法二：使用 ID 为 audit-rating-box 的 div -->
<div id="audit-rating-box" data-language="zh"></div>

提供数据

有两种方式提供数据：

1. 使用 script 标签提供 JSON 数据

<!-- 在 HTML head 中添加 -->
<script type="application/json" id="miniprogram-audit-rating-data">
  {
    "basicInfo": {
      "brand": "iPhone",
      "model": "iPhone 7 Plus",
      "jssdkVersion": "2.27.0",
      "network": "wifi",
      "miniprogramId": "your-miniprogram-id",
      "miniprogramName": "你的应用名称",
      "versionCode": "1.0.0"
    },
    "source": [
      {
        "id": "performance",
        "score": 85,
        "level": "good",
        "tasks": [...]
      },
      // 更多数据项...
    ]
  }
</script>

<!-- 然后使用组件 -->
<audit-rating-box data-language="zh"></audit-rating-box>

2. 使用数据属性

<audit-rating-box 
  data-language="zh"
  data-source='[{"id":"performance","score":85,"level":"good","tasks":[...]}]'
  data-basic-info='{"brand":"iPhone","model":"iPhone 7 Plus","jssdkVersion":"2.27.0","network":"wifi","miniprogramId":"your-id","miniprogramName":"你的应用","versionCode":"1.0.0"}'>
</audit-rating-box>

3. 动态创建元素

<div id="container"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    const container = document.getElementById('container');
    if (container) {
      const customElement = document.createElement('audit-rating-box');
      customElement.setAttribute('data-language', 'zh');
      container.appendChild(customElement);
    }
  });
</script>

配置选项

组件接受以下数据属性：

• data-language：使用的语言（"en" 或 "zh"，默认为 "en"）
• data-source：包含审计源数据的 JSON 字符串
• data-basic-info：包含被审计应用基本信息的 JSON 字符串

数据格式

基本信息

basicInfo 对象应包含以下属性：

{
  "brand": "iPhone",
  "model": "iPhone 7 Plus",
  "jssdkVersion": "2.27.0",
  "network": "wifi",
  "miniprogramId": "your-miniprogram-id",
  "miniprogramName": "你的应用名称",
  "versionCode": "1.0.0"
}

源数据

source 数组包含性能指标和其他审计数据：

[
  {
    "id": "performance",
    "score": 85,
    "level": "good",
    "tasks": [...]
  },
  // 更多指标...
]

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

许可证

MIT