第三方自定义组件

第三方自定义组件包的开发与自定义组件开发基本相同，差异就是需要使用 npm 来管理自定义组件包。要求开发者具有基础的 node.js 和 npm 相关的知识，如若之前未接触过 npm，可参考官方 npm第三方自定义组件 - 图1 文档，同时需要百度开发者工具辅助开发。

开发前准备

使用 npm 包

在小程序根目录中执行命令安装 npm 包。下载后的文件在文件夹 node_modules 中。

  1. npm install

在引用的时候，直接使用包中package.json的 name 名字即可。

  1. "usingComponents": {
  2.     "swan-custom-component": "swan-custom-component"
  3. }

开发 npm 包

下载模板

为了方便开发者能够快速开发第三方自定义组件，为此提供了一个可用于开发、调试、测试用的项目模板第三方自定义组件 - 图4，可以通过以下几种方式进行下载:

  • 直接从 github 上下载 zip 文件并解压，文件夹 swan-custom-component 下即为自定义组件模板;
  • 直接从 github 上的仓库 clone 下载，cd swan-custom-component 进入即为自定义组件模板;
  • 使用命令行工具初始化项目，用法见下面说明。

命令行工具

快速安装

  1. npm install -g smartprogram-cli

初始化自定义模板

  1. smartprogram init --type custom-component test

执行完上述命令后会生成以 test 为文件名的自定义组件模板，开发者可以在此项目中进行开发修改。命令行工具的更多用法可以查看 github 仓库上的 README.md第三方自定义组件 - 图5 文件。

发布 npm 包

发布 npm 包的流程简述如下：

  • 如果还没有 npm 帐号，可以到 npm 官网注册一个 npm 帐号。
  • 在本地登录 npm 帐号，在本地执行：
  1. npm adduser

或者

  1. npm login
  • 在已完成编写的 npm 包根目录下执行：
  1. npm publish

至此，npm 包就成功发布到 npm 平台了。

一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。