{"id":18938188,"url":"https://github.com/wechat-miniprogram/j-component","last_synced_at":"2025-04-15T03:54:02.865Z","repository":{"id":42349579,"uuid":"143121710","full_name":"wechat-miniprogram/j-component","owner":"wechat-miniprogram","description":"a mock minprogram component framework","archived":false,"fork":false,"pushed_at":"2023-03-01T09:05:28.000Z","size":357,"stargazers_count":43,"open_issues_count":0,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-04-01T23:42:36.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wechat-miniprogram.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-08-01T07:43:56.000Z","updated_at":"2023-09-01T11:24:55.000Z","dependencies_parsed_at":"2024-06-18T15:22:59.555Z","dependency_job_id":"87d1702e-1c92-40a1-b554-f2d029cde49b","html_url":"https://github.com/wechat-miniprogram/j-component","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fj-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fj-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fj-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wechat-miniprogram%2Fj-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wechat-miniprogram","download_url":"https://codeload.github.com/wechat-miniprogram/j-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248618276,"owners_count":21134200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-08T12:13:40.418Z","updated_at":"2025-04-15T03:54:02.848Z","avatar_url":"https://github.com/wechat-miniprogram.png","language":"JavaScript","readme":"# j-component\n\n[![](https://img.shields.io/npm/v/j-component.svg?style=flat)](https://www.npmjs.org/package/wechat-miniprogram)\n[![](https://img.shields.io/travis/wechat-miniprogram/j-component.svg)](https://github.com/wechat-miniprogram/j-component)\n[![](https://img.shields.io/github/license/wechat-miniprogram/j-component.svg)](https://github.com/wechat-miniprogram/j-component)\n[![](https://img.shields.io/codecov/c/github/wechat-miniprogram/j-component.svg)](https://github.com/wechat-miniprogram/j-component)\n\n## 简介\n\n仿小程序组件系统，可以让小程序自定义组件跑在 web 端。\n\n## 注意\n\n* 此框架的性能比不上小程序的实现。\n* 此框架的功能会比小程序略微弱一点。\n* 此框架不是小程序的子集，是完全独立的实现，请勿将此等价于小程序内的实现。\n\n## 安装\n\n```\nnpm install --save j-component\n```\n\n## 使用\n\n```js\nconst jComponent = require('j-component')\n```\n\n### behavior(definition)\n\n注册 behavior。\n\n```js\nlet behavior = jComponent.behavior({\n    /* 小程序 behavior 支持的定义段 */\n})\n```\n\n### register(definition)\n\n注册自定义组件，返回自定组件 id。\n\n#### definition\n\n| 属性名 | 类型 | 描述 |\n|---|---|---|\n| id | String | 可选字段，如果传了此字段，则表明注册为全局组件，其他组件可直接在 template 中使用而无需在 usingComponents 里引入 |\n| tagName | String | 可选字段，指定组件对应的 dom 节点的 tagName，默认取 usingComponents 里的定义或组件自身的 id |\n| path | String | 可选字段，该组件在文件系统中的绝对路径，用于需要涉及到组件路径的方法中，如 getRelationNodes 方法 |\n| template | String | 组件模板，即组件对应的 wxml 内容 |\n| usingComponents | Object | 使用到的自定义组件映射表 |\n| behaviors | Array\u003cBehavior\u003e | behavior 的用法和小程序类似 |\n| options | Object | 配置对象，支持小程序自定义组件 options 定义段支持的所有字段 |\n| options.classPrefix | String | 组件样式的私有化前缀，默认是空串，即没有前缀 |\n\n``` js\njComponent.register({\n    id: 'view',\n    tagName: 'wx-view',\n    template: '\u003cdiv\u003e\u003cslot/\u003e\u003c/div\u003e'\n})\n\nlet childId = jComponent.register({\n    tagName: 'xxx',\n    template: '\u003cview\u003e\u003cslot/\u003e\u003c/view\u003e', // 直接使用全局组件\n})\n\nlet id = jComponent.register({\n    template: '\u003cchild\u003e123\u003c/child\u003e',\n    usingComponents: {\n        'child': childId, // 声明要使用的组件，传入组件 id\n    },\n    behaviors: [behavior],\n    options: {\n        classPrefix: 'xxx',\n\n        /* 其他小程序自定义组件支持的 option，比如 addGlobalClass 等 */\n    },\n\n    /* 其他小程序自定义组件支持的定义段，比如 methods 定义段等 */\n})\n```\n\n### create(componentId, properties)\n\n创建自定义组件实例，返回 [RootComponent](#class-rootcomponent)。\n\n#### componentId\n\n调用 [register](#registerdefinition) 接口返回的 id。\n\n#### properties\n\n创建组件实例时，由组件接收的初始 properties 对象。\n\n```js\nlet rootComp = jComponent.create(id)\n```\n\n### Class: Component\n\n组件。\n\n#### 属性\n\n| 属性名 | 类型 | 描述 |\n|---|---|---|\n| dom | Object | 组件实例对应的 dom 节点 |\n| data | Object | 组件实例对应的 data 对象 |\n| instance | Object | 组件实例中的 this，通过此字段可以访问组件实例的 methods 等定义段 |\n\n#### 方法\n\n##### querySelector(selector)\n\n获取符合给定匹配串的第一个节点，返回 [Component](#class-component) 实例。\n\n\u003e PS：支持 selector 同小程序自定义组件的 selectComponent 接口\n\n```js\nlet childComp = comp.querySelector('#a')\n```\n\n##### querySelectorAll(selector)\n\n获取符合给定匹配串的所有节点，返回 [Component](#class-component) 实例列表\n\n\u003e PS：支持 selector 同小程序自定义组件的 selectAllComponents 接口\n\n```js\nlet childComps = comp.querySelectorAll('.a')\n```\n\n##### setData(data, callback)\n\n调用组件实例的 setData 方法.\n\n```js\ncomp.setData({ text: 'a' }, () =\u003e {})\n```\n\n##### dispatchEvent(eventName, options)\n\n用于模拟触发该组件实例节点上的事件。\n\n```js\n// 触发组件树中的节点事件\ncomp.dispatchEvent('touchstart', {\n  touches: [{ x: 0, y: 0 }],\n  changedTouches: [{ x: 0, y: 0 }],\n})\n\n// 触发组件树中的节点自定义事件\ncomp.dispatchEvent('customevent', {\n  touches: [{ x: 0, y: 0 }],\n  changedTouches: [{ x: 0, y: 0 }],\n  /* 其他 CustomEvent 构造器支持的 option */\n})\n```\n\n##### addEventListener(eventName, handler, useCapture)\n\n用于外部监听组件触发的事件。\n\n```js\ncomp.addEventListener('customevent', evt =\u003e {\n    console.log(evt)\n})\n```\n\n##### removeEventListener(eventName, handler, useCapture)\n\n用于外部取消监听组件触发的事件。\n\n```js\nconst handler = evt =\u003e {\n    console.log(evt)\n    comp.removeEventListener('customevent', handler)\n}\ncomp.addEventListener('customevent', handler)\n```\n\n##### triggerLifeTime(lifeTime, args)\n\n触发组件实例的生命周期钩子。\n\n```js\ncomp.triggerLifeTime('moved', {test: 'xxx'})\n```\n\n##### triggerPageLifeTime(lifeTime, args)\n\n触发组件实例中配置的页面的生命周期钩子。\n\n```js\ncomp.triggerPageLifeTime('show', {test: 'xxx'})\n```\n\n##### toJSON()\n\n将节点组件下的节点树生成一个 JSON 树\n\n```js\ncomp.toJSON()\n```\n\n### Class: RootComponent\n\n根组件，继承自 [Component](#class-component)。亦即是说，所有 Component 支持的属性/接口，RootComponent 都支持。\n\n#### 方法\n\n##### attach\n\n将根组件实例挂载在传入的 dom 节点上。\n\n```js\nconst parent = document.createElement('div')\nrootComp.attach(parent)\n```\n\n##### detach\n\n将根组件实例从父亲 dom 节点上移除。\n\n```js\nrootComp.detach()\n```\n\n## TODO\n\n* 内置 wxml 解析器的 template 支持\n* 内置 wxml 解析器的 include 支持\n* 内置 wxml 解析器的 import 支持\n* 内置 wxml 解析器的 外部 wxs\n* generics 支持\n* moved 生命周期\n* ......\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fj-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwechat-miniprogram%2Fj-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwechat-miniprogram%2Fj-component/lists"}