小程序插件开发

小程序插件从零开发全过程，涉及到很多踩过的坑和问题，看完即可上手开发 (^▽)

创建项目

目录结构

├── doc // 插件文档说明
├── miniprogram // 简单版小程序，用于内部测试插件
├── constants // 放置全局常量
├── node_modules
├── plugin // 插件
├── api // 接口api以及封装
├── config // 项目配置文件
├── components // 插件组件
├── pages // 插件页面
├── index.js // 插件入口文件
├── plugin.json // 插件配置
├── iconfont.wxss // 字体样式
├── miniprogram_npm // https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html
├── package.json
├── .gitignore
├── project.config.json // 项目配置文件
└── README.md

插件开发简介 && 注意事项

1. 插件开发在plugin目录下，components 放插件组件，pages 放插件页面
2. pages 插件，在项目中使用时需要手动触发，如果需要不触发就能使用的，请开发 components 插件
3. miniprofram 是小程序项目，用于即时测试插件内容，用法与小程序一样
4. 插件在使用时的名字，由使用者自由定义，例如 miniprogram – app.json 中的 “plugin”:{ “myPlugin”: { …}}
5. 组件生命周期用老版本的，暂时不要用 lifetimes，需要插件开发工具版本大于 2.2.3 以后才能使用

注意事项，划重点~

• 小程序对 navigatorTo 方法的限制，小程序插件中，不能使用 navigatorTo，页面跳转需要用 标签去跳转，存在不能在 for循环 中嵌套的问题 参考地址

• iconfont 使用方法：

• 将iconfont项目下载到本地，将下载的 iconfont.css 文件内容全替换 plugin 根目录下的 inconfont.wxss 文件

• 插件中的 wxs 语法页面，不支持 es6 ！！！【暂时】

• 在需要的插件样式文件中引入：@import ‘…/…/iconfont.wxss’; 即可在插件中使用 iconfont

发布流程，注意事项

**发布前置：**进入小程序后台 – 左侧菜单栏【功能 - 小程序插件】-- 基本设置中需要上传 图片，插件名称，插件文档【可参考官方文档】

插件文档上传：插件根目录下创建 doc 文件夹，文件夹下 README.md 文件中写入开发文档，在小程序开发工具中，右键点击文件，可以进行开发文档的上传

知识补充