@anyxml/meta-data

本仓库主要用于收集小程序模板的元数据，以供编辑器插件使用辅助编码。

所有数据来源都是基于公开渠道获取的：

• 支付宝： https://github.com/AlipayDocs/open-docs
• 微信：https://developers.weixin.qq.com/miniprogram/dev/component/
• 组件库：
  • Ant Design Mini: https://mini.ant.design/

实现方式：本项目会先基于上面公开信息做一个简单的拆分，将单个组件拆分成【组件属性列表】和【组件剩余文档】两个部分，

• 将【属性列表】喂给大模型，推导出一个属性相关的 JSON 数据；
• 将【组件剩余文档】直接生成一个字符串塞到组件的 description 属性上；

然后将这些数据整合成一个组件元数据，最后将所有组件合并生成一个大 JSON，JSON 文件的类型定义如下：

这只是大概（不全）的结构，完整详情可以查看定义文件

interface AnyXML {
  /** 通用的配置项，包括基础属性、控制属性 和 事件相关属性 */
  common: {
    [key: 'base' | 'control' | 'event']: {
      /** 输入此关键字时，会出现下文指定的 attrs 属性 */
      trigger?: { key: string, description: string }[]
      /** 指定的元素上不会出现这里列出的属性 */
      exclude?: string[]
      /** 属性集合 */
      attrs: Attr[]
    }
  },
  /** 支持的所有元素集合 */
  elements: {
    /** 组件名称 */
    name: string
    /** 组件描述，支持 markdown 语法 */
    description?: string
    /** 组件支持配置的属性 */
    attrs: Attr[]
  }
}

interface Attr {
  /** 属性名称 */
  name: string
  /** 属性类型 */
  type?: string
  /** 是否必填 */
  required?: boolean
  /** 属性默认值 */
  defaultValue?: any
  /** 支持此属性的最底基础库版本号 */
  versionRequirement?: string
  /** 属性描述，支持 markdown 语法 */
  description?: string
  /** 属性对应的枚举值列表 */
  enumValues?: { value: string, description?: string }[]
}

安装

npm install @anyxml/meta-data

使用

使用内置类型：

import type { AnyXML } from '@anyxml/meta-data'

在脚本中使用JSON数据：

import meta4axml from '@anyxml/meta-data/dist/axml.json'
import meta4wxml from '@anyxml/meta-data/dist/wxml.json'
import antdmini from '@anyxml/meta-data/dist/antd-mini/latest.json'

使用CDN上的JSON数据：

• unpkg

  • axml: https://unpkg.com/@anyxml/meta-data/dist/axml.json
  • wxml: https://unpkg.com/@anyxml/meta-data/dist/wxml.json
  • antdmini@latest: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/latest.json
  • [email protected]: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/latest.2.json 指定最新的大版本
  • antdmini@version: https://unpkg.com/@anyxml/meta-data/dist/antd-mini/[version].json 注意填入你需要的版本

• jsdelivr

  • axml: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/axml.json
  • wxml: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/wxml.json
  • antdmini@latest: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/latest.json
  • [email protected]: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/latest.2.json 指定最新的大版本
  • antdmini@version: https://cdn.jsdelivr.net/npm/@anyxml/meta-data/dist/antd-mini/[version].json 注意填入你需要的版本

原生模板开发工作流

首次下载此仓库

• 安装子模块： git submodule update --init --recursive
• 更新子模块： git submodule foreach git fetch
• 查看子模块： git submodule foreach git diff origin/master

wechat

1. 先下载源文件

将源 html 代码原封不动下载到 data/wechat/html

node src/wechat/generate.mjs 1

2. 将 html 中的嵌套 table 打平生成新的 html

因为要交给大模型来生成 json 元数据，大模型对 markdown 识别更准点，但 markdown 对嵌套的 table 支持不友好，所以需要先将 html 中的嵌套 table 给打平了。

最终生成的代码保存在 data/wechat/html2 中。

另外，此步也会将文档中 a 标签的相对链接替换成绝对链接。

node src/wechat/generate.mjs 2

注意检查控制台输出的参数是否符合预期，一会会输出下面两种结构（如果不是，则要注意下了）：

$ { zone: '# 通用属性', name: 'worklet:ongesture', label: 'eventhandler 回调参数' }

$ { zone: '# 通用属性', name: 'referrer-policy', label: '合法值' }

3. 生成 rest.md 和 attrs.md

node src/wechat/generate.mjs 3

运行命令会将【属性】相关的标题及其子标题输出在控制台上，注意查看是否符合预期，一般应该会出现下面内容：

$     # 通用属性
$     # Skyline 特有属性
$     # WebView 特有属性

$     # 通用属性
$         # 错误码信息与解决方案表

4. 使用 src/wechat/prompts.md 塞给大模型，然后用 gen/wechat/*/attrs.md 提问

获取答案后可以再执行 node src/wechat/check.mjs 脚本去校验结果

数据量比较大，可以写脚本自动去大模型上问答

5. 合并生成最终产物

node src/wechat/merge.mjs

alipay

1. 先更新子模块内容

cd data/alipay
git log # 记录本地最新一次提交（方便后续拉下代码来了之后比对有哪些变更）
git checkout main && git fetch
git diff origin/main  # 和远程分支比较，看主要更新了哪些内容（方便后续看是否要手动处理）
git pull origin main  # 更新本地代码
cd -

2. 执行 markdown 拆分

node src/alipay/generate.mjs

git diff # 查看通用组件的更新，如果有更新 attrs，可以按以下流程继续，否则可以结束

打开一个大模型聊天界面，将 src/alipay/prompts.md 中的内容喂给它，然后读取出它返回的 json 塞到 attrs.json 中。

注意，当有 attrs.md 中多个 table 时，大模型填充的数据不一定准确，有时需要手动处理。

最后，可以运行下面脚本检查下生成的结果是不是都符合预期：

node src/alipay/check.mjs

3. 检查自定义组件的更新

没有灵活的方案，需要用第一步查到的上一次处理时的 commit id 和最新的比，判断下是否有相关文件更新了，然后人肉处理

4. 合并生成最终文件

node src/alipay/merge.mjs

组件库开发工作流

antd-mini

1. 更新模块

用于获取最新版本号

git submodule foreach git fetch

2. 运行脚本自动生成

注意更新脚本中的版本号

node src/antd-mini/make.mjs

eof