如何开发一个小程序自定义组件库

一、官方脚手架

• miniprogram-custom-component

二、特性

• 支持使用 less 语法编写 wxss 文件
• 使用 webpack 构建 js
• 支持自定义组件单元测试
• 支持 eslint
• 支持多入口构建
  三、项目结构

|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--components // 通用自定义组件
|   |--images // 图片资源
|   |
|   |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js

四、配置文件config配置

module.exports = {
  //入口 如果组件都在src/components下，则配置为components,否则配置为对应路径
  entry: ['components'],
  isDev,
  isWatch,
  srcPath: src, // 源目录
  distPath: isDev ? dev : dist, // 目标目录

  demoSrc, // demo 源目录
  demoDist, // demo 目标目录

  wxss: {
    less: true, // 使用 less 来编写 wxss
    sourcemap: false, // 生成 less sourcemap
  },
  js: {
    webpack: true, // 使用 webpack 来构建 js
  },
  copy: {
    src: ['./static/**/*', './**/*.wxss', './**/*.wxs']
  }, // 不需要编译的静态文件直接copy
  

五、开发预览

npm run watch

执行后将会编译tools/demo下的文件，到目录miniprogram_dev

打开微信开发者工具，将此文件夹导入，即可预览

此后每次更改demo中的文件即可实时预览

六、发布组件库到npm

npm run build

执行后将会编译src下的文件，到目录miniprogram_dist

切换到此目录，执行

npm init

生成好package.json后，添加以下代码，作用是声明此仓库是小程序自定义组件包，否则小程序将以常规npm包去编译找入口文件，造成编译错误

"miniprogram": "weapp"

七、使用npm包

npm install xxx

更改小程序项目配置project.config.json

packNpmManually: true,
"packNpmRelationList": [
  {
      "packageJsonPath": "./package.json",
      "miniprogramNpmDistDir": "./"
  }
],

点击开发者工具顶部工具>构建npm
将会在项目顶层生成miniprogram_npm文件夹,此处以vant为例

|--miniprogram_npm
|   |--@vant
|   |--  |--weapp
|   |--  |--  |--button

页面中使用

{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "van-button": "@vant/weapp/button/index"
  }
}

参考：
微信小程序使用npm包