微信小程序自定义插件

命令行工具

全局安装工具脚手架

npm install -g @wechat-miniprogram/miniprogram-cli

新建空目录, 根目录下执行以下命令来初始化项目工程

miniprogram init --type custom-component

可以看到以下工程目录结构:

项目开发

通过初始化工程模版, 我们可以看到完整的项目结构, 对于具体项目的开发, 推荐使用以下目录结构,开发者如有必要,可以自行调整

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

需要注意的点:

在src根目录下,index.js文件不可删除

//需要暴露给外界的组件, 需要在index.json中声明,如下
{
  "component": true,
  "usingComponents": {
    "wxc-empty-view": "/components/wxc-empty-view/index"
  }
}

//需要暴露给外界的样式文件, 需要在index.wxss中引入,如下:

@import "./styles/index.wxss";

对于工具类库, 样式类库需要完整复制打包输出文件, 需要修改 tools/config下的配置:

发布

在发布之前, 需要构建一次项目的生产环境, 只有构建后的文件才是被真正使用的:

npm run build 或者 npm run dist 

NPM

如果没有npm账号,可以到npm官网注册一个账号

在本地登录npm账号:

npm adduser / npm login

执行以上命令后,输入对应的账号密码, 在已完成编写的 npm 包根目录下执行:

npm publish

在该过程中,需要注意的是,如果修改过npm的镜像源, 比如淘宝,需要切换回去, 不然可能出现以下错误:

查看当前镜像源:

npm config get registry

切换镜像源:

npm config set registry =http://registry.npmjs.org

到此，重新登录对应的账号, 并执行npm publish发布, npm 包就成功发布到 npm 平台了

使用

在所需要的项目, 根路径下执行以下命令:

npm install wx-base-lib -save  // wx-base-lib 为刚自定义的项目名称

项目地址:wx-base-lib