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 🙏

© 2024 – Pkg Stats / Ryan Hefner

aisuda-wfc-uni-bjjj-custom-components-2

v1.0.27

Published

uniapp版自定义组件包(vue3技术栈),用于开发小程序自定义组件,所有组件都放在这一个包里面。

Downloads

1,892

Readme

uni-custom-widget-template

aipage-editor自定义组件模板,uniapp版自定义组件,用于开发APP和各类小程序自定义组件。

目录说明

  • src: 自定义组件源码;
  • dist: uniapp构建后文件存放目录;
  • web: 自定义组件web预览模块(发布NPM自定义组件需要);
  • src/components: 存放自定义组件源码(vue3技术栈);
  • src/components/uni-info-card/uni-info-card.vue: 自定义组件内容文件,使用uniapp开发自定义组件请遵循easycom组件规范
  • src/components/xxx/assets: 存放自定义组件组件静态资源,比如 css、img等,此处存放的静态资源会经过webpack构建;
  • src/pages: uniapp 应用页面,开发uniapp自定义组件时仅用于充当预览展示页;
  • src/main.ts: uniapp 应用入口文件;
  • src/manifest.ts: uniapp 配置文件(配置应用名称、appid、logo、版本等打包信息);
  • src/pages.json: uniapp 页面配置(配置页面路由、导航条、选项卡等页面类信息);
  • src/uni.css: uniapp 全局样式文件(这里是uni-app内置的常用样式变量);
  • amis.config.js: amis-widget-cli配置文件;
  • index.html: uniapp 页面模板(本地预览需要);
  • vite.config.ts: uniapp 构建配置文件(vite 构建模式);
  • build: 存放打包&构建入口文件;
  • build/linkDebug.js: 用于本地「linkDebug」调试自定义组件,可在爱速搭编辑器中预览本地自定义组件;
  • build/plugin.ts: 自定义组件插件构建入口,用于注册一个amis-editor插件,注册成功后编辑器左侧组件面板中会展示;
  • build/renderer.ts: 自定义组件渲染器构建入口;

相关开发文档

开发 aipage-editor 自定义组件 注意事项

  • 开发跨端自定义组件(非H5自定义组件)时,请遵循easycom组件规范存放和组件命名(应用导出源码时需要);
  • 静态资源(img、css等)请和自定义组件渲染器放同一个目录,比如:components/info-card/assets 存放 info-card 自定义组件的静态资源。方便后续动态注入自定义组件源码。

开发说明

  1. 安装依赖
$ npm i 或者 yarn
  1. preview: 小程序自定义组件预览模式(带热更新)

H5预览模式:用于本地预览小程序自定义组件内容。

$ npm run preview
  1. linkDebug: 外链调试(爱速搭平台预览小程序自定义组件)

linkDebug模式:用于在爱速搭平台中预览和调试小程序自定义组件。

$ npm run linkDebug
  1. build2lib: 构建自定义组件web预览模块

build2lib模式:用于构建发布到 npm 中的文件,默认存放到当前 web 目录中。

$ npm run build2lib
  1. package.json添加自定义组件信息,导入组件扩展包时需要

package.json 中添加 aipage-widgets 字段,用于放置当前自定义组件信息,有这个 aipage-widgets 字段才能被识别为自定义组件扩展包。

  ...
    "aipage-widgets": [
    {
      "type": "uni-info-card", // 自定义组件类型,必填项,同一应用下不允许有重复的自定义组件类型
      "framework": "vue3", // 技术栈类型,必填项
      "description": "信息展示卡片", // 自定义组件描述,在编辑器左侧组件面板作为描述信息展示,必填项
      "entry": "/web/renderer.umd", // 自定义组件入口文件路径,必填项
      "files": [  // 自定义组件依赖资源文件路径,非必填项
        "/web/style.css"
      ],
      "editorPlugin": {  // amis-editor自定义插件信息
        "pluginEntry": "/web/plugin.umd", // 自定义插件的入口文件,必填项
        "tag": [  // 自定义插件的分类,必填项
          "uni小程序组件"
        ],
        "sort": 100, // 自定义插件的排序,非必填项
        "device": [ // 自定义组件支持的设备类型,必填项
          "mobile",
          "quickapp"
        ]
      }
    },
    {
      "framework": "uniapp", // 快应用技术栈类型,必填项
      "type": "uni-info-card", // 自定义组件类型,必填项,同一应用下不允许有重复的自定义组件类型
      "entry": "/src/components/info-card", // 快应用自定义组件根目录
    },
    ... // 其他自定义组件
  ],
  ...
}
  1. 发布一个NPM组件扩展包

需要确保package.json中的name值唯一,version值不重复。

$ npm publish
  1. 发布到指定的NPM仓库

打开NPM配置文件(src/.npmrc),配置为指定仓库地址即可。

配置项说明(amis-widget-cli)

请查看amis-widget-cli