小程序插件开发

骑猪看日落 2022-09-05 01:54 153阅读 0赞

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

#### 创建项目 ####

##### 目录结构 #####

├── 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循环 中嵌套的问题 [参考地址][Link 1]
 *  iconfont 使用方法：
 *  将iconfont项目下载到本地，将下载的 iconfont.css 文件内容全替换 plugin 根目录下的 inconfont.wxss 文件
 *  插件中的 wxs 语法页面，不支持 es6 ！！！【暂时】
 *  在需要的插件样式文件中引入：@import ‘…/…/iconfont.wxss’; 即可在插件中使用 iconfont

#### 发布流程，注意事项 ####

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

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

#### 知识补充 ####

[Link 1]: https://developers.weixin.qq.com/community/develop/doc/0002ca0bebc33813a607147b65b000