{"id":18496611,"url":"https://github.com/nicejade/micro-web-component","last_synced_at":"2026-04-21T22:35:16.752Z","repository":{"id":81310719,"uuid":"306636136","full_name":"nicejade/micro-web-component","owner":"nicejade","description":"🌌 Micro web component used to show miniprogram code. https://nicelinks.site/","archived":false,"fork":false,"pushed_at":"2020-10-27T14:16:50.000Z","size":39,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-04T01:37:00.496Z","etag":null,"topics":["miniprogram","rollup","web-components","webapp","website"],"latest_commit_sha":null,"homepage":"https://nicelinks.site","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/nicejade.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2020-10-23T12:52:08.000Z","updated_at":"2021-01-07T07:20:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"26063898-b5e9-40a7-849c-4ab1382bc61d","html_url":"https://github.com/nicejade/micro-web-component","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/nicejade/micro-web-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmicro-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmicro-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmicro-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmicro-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicejade","download_url":"https://codeload.github.com/nicejade/micro-web-component/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicejade%2Fmicro-web-component/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32113266,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T11:25:29.218Z","status":"ssl_error","status_checked_at":"2026-04-21T11:25:28.499Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["miniprogram","rollup","web-components","webapp","website"],"created_at":"2024-11-06T13:30:15.450Z","updated_at":"2026-04-21T22:35:16.710Z","avatar_url":"https://github.com/nicejade.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\u003ca href=\"https://nicelinks.site?utm_source=github-nicelinks\"\u003e\u003cimg src=\"https://image.nicelinks.site/nice-links-logo.png\" alt=\"倾城之链 | NICE LINKS\"\u003e\u003c/a\u003e\u003c/h1\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e\n    🌌 基于 Web Component 编写、Rollup 构建的微组件，用以方便在其他网页插入，从而推广个人产品：\u003ca href=\"https://nicelinks.site?utm_source=github-nicelinks\"\u003e倾城之链\u003c/a\u003e\n  \u003c/strong\u003e\n\u003c/div\u003e\n\n\u003cbr\u003e\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://github.com/nicejade/micro-web-component\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/nicejade/micro-web-component.svg\" alt=\"LICENSE\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://about.me/nicejade\"\u003e\u003cimg src=\"https://img.shields.io/badge/Author-nicejade-%23a696c8.svg\" alt=\"Author nicejade\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\n## 目标与哲学\n\nWeb Component 是一种创建**封装的**、**可复用的**、可扩展的、能组合的网页UI (user interface) 组件的标准化方式。Web 开发者们，通过插件或者模块的形式，在网上分享自己的代码，便于其他开发者们复用这些优秀的代码。相对于 [Vue](https://nicelinks.site/post/5b1a221c0526c920d6dfaada)、[React](https://nicelinks.site/post/5b1294b5e93ed2618cfac134)，具有更简单的 API，以及更小的构建尺寸。因此，有开发一个简单微组件（Web Component 编写、Rollup 构建、jsDelivr 承载），用以方便在其他网页中插入，从而推广个人产品：\u003ca href=\"https://nicelinks.site?utm_source=github.com\"\u003e倾城之链\u003c/a\u003e。\n\n## 如何使用\n\n引入 js 资源：\n```js\n\u003cscript src=\"https://cdn.jsdelivr.net/gh/nicejade/micro-web-component@2.0/dist/miniapp-code-entry-min.js\"\u003e\u003c/script\u003e\n```\n\n在合适的位置添加组件：\n```html\n\u003cminiapp-code-entry \n  alt=\"倾城之链\"\n  src=\"https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg\\?imageView2/1/w/250/h/250/interlace/1/ignore-error/1\"\u003e\n\u003c/miniapp-code-entry\u003e\n```\n\n在线示例效果，请参见[静轩之别苑](https://quickapp.lovejade.cn/)。\n\n## 参与开发\n\n```bash\ngit clone https://github.com/nicejade/micro-web-component.git\ncd micro-web-component\n# 安装依赖\nyarn\n\n# 运行代码\nyarn start \n\n# 查看效果(基于 http 静态 server)\nnpx arya-jarvis s\n```\n\n## 如何访问[「倾城之链」](https://nicelinks.site?utm_source=github.com)\n\n* **WEB 浏览器**：为便捷用户访问，有为[「倾城之链」](https://nicelinks.site?utm_source=github.com)注入 [Pwa](https://github.com/nicejade/nice-front-end-tutorial/blob/master/tutorial/pwa-tutorial.md) 部分功能，您可通过现代浏览器访问 [https://nicelinks.site](https://nicelinks.site?utm_source=github.com) （推荐使用 `Chrome`），可将其“**添加至主屏幕**”，它将为您创建与原生应用类似的桌面图标，以供您下次可便捷且快速打开。\n\n\u003e **备注**：当您在移动设备浏览器点击“**添加到主屏幕**”后，如未得到预期结果，需要您主动进行设置；可在设备`设置`项，找到`权限管理`，进而开启“**桌面快捷方式**”权限即可；这在不同供应商的手机设备间，步骤会有所差别。\n\n* **快应用**：目前[倾城之链(快应用版)](https://github.com/nicejade/nicelinks-quick-app)已在 `OPPO`、`vivo`、`小米`、`魅族`等平台上线；如果您使用 `Android` 手机，可以在*应用商店*、_负一屏_、*浏览器*等场景搜索`倾城之链`，便可**秒开**使用，亦可保存在桌面；也可以在手机[倾城之链(网页版)](https://nicelinks.site?utm_source=github.com)，点击**快应用中打开**即可(仅限于已上线平台)；未上线平台机型，可参见[倾城之链 - 快应用版](https://github.com/nicejade/nicelinks-quick-app#倾城之链快应用版)，下载[快应用调试器](https://github.com/nicejade/awesome-quickapp#调试器下载)扫码体验。\n\n* **小程序**：在初步完成 Web、「快应用」等版本蛮久以后，最近（2019.10）有基于 `mpvue` 构建了[微信「小程序」版本](https://github.com/nicejade/nicelinks-miniprogram)，通过微信扫码、或者在微信搜索「倾城之链」即可访问。\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://image.nicelinks.site/nicelinks-miniprogram-code.jpeg\" width=\"300px\" alt=\"倾城之链小程序码\"\u003e\u003c/img\u003e\n\u003c/div\u003e\n\n* **桌面应用**：如果您想在 `MacOS`, `Windows` 或 `Linux` 中，获得更快捷的访问体验，您可以通过 [Nativefier](https://github.com/jiahaog/nativefier)（使任何网页成为桌面应用程序的一个命令行工具），轻松创建桌面版[「倾城之链」](https://nicelinks.site?utm_source=github.com)应用，只需运行以下命令即可：\n\n```bash\nnpm install nativefier -g\nnativefier --name \"倾城之链\" \"https://nicelinks.site/\"\n```\n\n**备注**：如果您使用最新版本的 Chrome，用其访问 [https://nicelinks.site](https://nicelinks.site?utm_source=github.com) ，在地址栏的末尾，点击 `⊕` 符号，即可快速生成桌面版本「倾城之链」；而且，这这个独立应用中，浏览器插件扩展都在；除此外，浏览器上涉及的[倾城之链](https://nicelinks.site?utm_source=github.com)的外链，也可以右键选择在这个桌面应用中打开，NICE。\n\n## 加入[倾城之链](https://nicelinks.site/?utm_source=github.com)群聊\n\n经过近两年的设计，[倾城之链](https://nicelinks.site/?utm_source=github.com)目前已趋于稳定；后面将持续迭代，使其拥有[更丰富的功能](https://github.com/nicejade/nicelinks-vue-client/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3Afunction)、以及更棒的体验。现创建[倾城之链](https://nicelinks.site/?utm_source=github.com)微信、QQ 群（`984154031`），将会不定期分享最新收录的优质网站；如果您感兴趣，不妨考虑加入；另外，您对`倾城之链`有任何意见或建议，也可以通过该群向我反馈。加群具体方式，请参见[加入倾城之链群聊](https://nice.lovejade.cn/zh/application/#加入倾城之链群聊)。\n\n## 相关链接\n\n* [**倾城之链**](https://nicelinks.site?utm_source=github-nicelinks)\n* [About Me](https://about.me/nicejade?utm_source=github-nicelinks)\n* [个人博客](https://jeffjade.com/nicelinks?utm_source=github-nicelinks)\n* [静轩之别苑](https://quickapp.lovejade.cn/?utm_source=github-nicelinks)\n* [静晴轩别苑](https://nice.lovejade.cn/?utm_source=github-nicelinks)\n* [吾意静晴轩](https://docz.lovejade.cn/?utm_source=github-nicelinks)\n* [天意人间舫](https://blog.lovejade.cn/?utm_source=github-nicelinks)\n* [新浪微博](https://weibo.com/jeffjade?utm_source=github-nicelinks)\n* [知乎主页](https://www.zhihu.com/people/yang-qiong-pu/)\n* [简书主页](https://www.jianshu.com/u/9aae3d8f4c3d)\n* [SegmentFault](https://segmentfault.com/u/jeffjade)\n* [Twitter](https://twitter.com/nicejadeyang)\n* [Facebook](https://www.facebook.com/nice.jade.yang)\n\n| 微信公众号 | 前端微信群 | 推荐 Web 应用 | 推荐小程序 |\n| :---: | :---: | :---: | :---: |\n| 😉 静晴轩 | ✨ 大前端联盟 | 🎉 倾城之链 | 🌊 倾城之链 |\n| ![静晴轩](https://image.nicelinks.site/qrcode_jqx.jpg) | ![倾城之链](https://image.nicelinks.site/wqycx-weixin.png?ver=1) | \u003cimg src=\"https://image.nicelinks.site/nice-links.png\" width=\"300px\" alt=\"倾城之链\"\u003e\u003c/img\u003e | \u003cimg src=\"https://camo.githubusercontent.com/a4d1e07fce0639d0a43ebdb4074c5c1e67978934/68747470733a2f2f696d6167652e6e6963656c696e6b732e736974652f6e6963656c696e6b732d6d696e6970726f6772616d2d636f64652e6a706567\" width=\"300px\" alt=\"倾城之链\"\u003e\u003c/img\u003e |\n\n## 许可执照\n\n[MIT](http://opensource.org/licenses/MIT)\n\nCopyright (c) 2020-present, [nicejade](https://aboutme.lovejade.cn/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fmicro-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicejade%2Fmicro-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicejade%2Fmicro-web-component/lists"}