npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

ai-generate-template-mobile-shell

v0.1.0

Published

移动端原生壳模板(H5 + 原生套壳,iOS / Android / HarmonyOS 三端,统一 JSBridge / HeBridge)

Readme

ai-generate-template-mobile-shell

移动端原生壳模板脚手架:H5 + 原生套壳(WebView),一次拉起 iOS / Android / HarmonyOS 三端壳工程,内置统一 JSBridge(HeBridge,IDL 驱动、三端协议一致)。

快速开始

npx ai-generate-template-mobile-shell my-app \
  --platforms ios,android,harmony \
  --appId com.your.app \
  --appName 我的应用

不带参数会交互式询问:项目名 / 平台 / appId / 显示名。

生成后:

my-app/
├── ios/         # WKWebView 壳(Xcode,含 .xcodeproj)
├── android/     # 系统 WebView 壳(Android Studio / Gradle)
├── harmony/     # ArkWeb 壳(DevEco Studio)
├── bridge-protocol/   # IDL + codegen(改协议/能力后重生成三端桥)
└── shell.config.json  # 本应用配置(appId/能力/加载方式…)

各端打开运行

  • iOScd my-app/ios && open HeShell.xcodeproj → Run。新增源码文件后重跑 xcodegen generate --spec project.yml(需 brew install xcodegen)。
  • Android:Android Studio 打开 my-app/android → Sync → Run。
  • HarmonyOS:DevEco Studio 打开 my-app/harmony → Sync → Run。⚠️ 套壳页只能 Run,不能 Preview(Previewer 不支持 Web 组件/@ohos 原生能力,报 00402015 属正常)。

壳里已内置(三端一致)

  • 统一 JSBridgewindow.__heBridge + 生成的 Router(信封/版本/origin 白名单/权限/派发/回发)。
  • 能力模块:core / app / device / ui / navigation / storage / session(必内置)+ media(scanCode、chooseImage 已实现)等可选。
  • 配置驱动shell.config.jsonGeneratedShell(appId、能力、origin 白名单、按能力推导的最小权限)。
  • H5 demo 页(www/index.html)自检 handshake + device.getInfo,并有各能力按钮。

改协议 / 加能力

编辑 shell.config.json(选装能力 → 自动推导权限)或 bridge-protocol/idl(改 JSBridge 协议),然后:

cd my-app/bridge-protocol/codegen && npm i
npm run gen        # IDL → 三端桥 + H5 SDK
npm run scaffold   # shell.config.json → 三端配置 + 最小权限清单
# 再把 generated/ 下的桥与配置同步回各端壳(见 bridge-protocol/codegen/README.md)

说明(诚实边界)

  • 三端壳源码均已对各自真实 SDK 编译验证;iOS/Android 已在模拟器实跑(handshake / device.getInfo / storage / chooseImage 截图为证),Harmony 已用 DevEco hvigor 构建出 HAP
  • mediascanCode/chooseImage 为完整实现,takePhoto/chooseFile/saveImage/previewImage 为扩展点(返回 UNAVAILABLE,按需补充)。
  • 交互式能力(扫码/选图等)在 H5 侧需用长超时调用(默认 15s 太短);demo 已用 { timeout: 120000 }
  • 内部工程名保持 HeShell / 包名 com.hehe.hebridge.shell(不影响 App 身份,App 身份由 appId + 显示名决定);如需改内部包名请自行全局替换。