小程序插件--从零开始

166 阅读2分钟

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

创建项目

目录结构
  • ├── doc // 插件文档说明
  • ├── miniprogram // 简单版小程序,用于内部测试插件
  • ├── constants // 放置全局常量
  • ├── node_modules
  • ├── plugin // 插件
    • ├── api // 接口api以及封装
    • ├── config // 项目配置文件
    • ├── components // 插件组件
    • ├── pages // 插件页面
    • ├── index.js // 插件入口文件
    • ├── plugin.json // 插件配置
    • ├── iconfont.wxss // 字体样式
    • ├── miniprogram_npm // developers.weixin.qq.com/miniprogram…
  • ├── 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 文件中写入开发文档,在小程序开发工具中,右键点击文件,可以进行开发文档的上传

知识补充