开发指南

API 文档

小程序组件

最近更新时间:2022-03-18 11:04:14

概述

小程序源码组件是由模块开发者提供模板示例,源码组件导入后可参考模块的 README 文件进行配置。

开发者可基于前端代码进行二次开发以满足自己的小程序交互样式需求。

说明:

我们的小程序源码将托管在 Github 上,欢迎在 云开发单页模板 上提 PR 或贡献不同样式的源码组件。

小程序组件的导入

  1. 在 miniprogram 目录下右键,则弹出配置单页模板入口。
  2. 进入单页模板控制台模块主页,接入指引第一步即为导入小程序组件。
  3. 选中组件并单击,弹出组件预览弹窗。
  4. 单击“导入到 IDE”,导入成功并弹出提示弹窗。会统一导入到 page-module 目录下,如遇文件夹冲突则会自动递增。组件导入成功后将自动导入示例页面路径到 app.json 内的 pages 中。

最佳实践

  1. components 具有复用性,建议在 pages 目录下新建页面,并引用单页模板的 components。
  2. 导入的代码中会带一个示例页面 example/index,不建议直接使用该页面。
  3. 如果有配置不满足需求,并具有通用性,可前往 Github 提 issue,模板开发者将进行跟进处理。如需求较为定制化,可自行对组件进行二次开发。

小程序目录树

.
├── cloudfunctions
├── miniprogram
│ ├── app.json
│ ├── components
│ ├── page-module # 单页模板导入的组件统一在 page-module 目录下
│ │ └── sign-up # 签到打卡的前端源码组件
│ │ ├── README.md # 概述该模块,对外暴露组件简介
│ │ ├── components
│ │ │ ├── __base # 该目录下为组件依赖的内部组件,外部请勿依赖
│ │ │ └── sign-up
│ │ ├── example # 示例页面,简单对 components 下的组件进行引用,导入后该页面路径会自动导入到 app.json 的 pages 列表内
│ │ │ └── index
│ │ └── miniprogram_npm
│ ├── node_modules
│ └── pages
└── project.config.json

维护说明

单页模板的开发者,会配套提供小程序源码组件,开发者会更新示例与修复示例里存在的 BUG。但是因为源码是交由开发者导入并修改,开发者遇到组件中遇到 BUG,需要小程序开发者自行修复。

说明:

小程序插件 的前后端都由插件开发者维护,使用者无法看到插件的代码。只能指定依赖的插件版本,通过插件暴露的接口能力。

升级说明

场景1:未二次开发组件

小程序组件导入后,如果未进行变更,则可以直接导入新版本的组件升级使用。

场景2:二次开发

  1. 前往 github 的 单页模板仓库 找到对应的组件仓库。
  2. 对代码仓库进行 Fork
  3. 将本地二次开发的组件,同步到 Fork 后的仓库中(仓库可设置为私有)。
  4. 组件有更新将可以进行 compare 后进行 merge,将 merge 后的代码导入小程序即可。

场景3:完全自行开发

该场景无需同步组件更新,按照自己的产品节奏迭代接口。

目录