codecamp

微信小程序 开发第三方自定义组件

开发第三方自定义组件

小程序从基础库版本 2.2.1 开始支持使用 npm 安装第三方包,因此也支持开发和使用第三方自定义组件包。关于 npm 功能的详情可先阅读[相关文档]((npm 支持))。

准备

开发一个开源的自定义组件包给他人使用,首先需要明确他人是要如何使用这个包的,如果只是拷贝小程序目录下直接使用的话,可以跳过此文档。此文档中后续内容是以 npm 管理自定义组件包的前提下进行说明的。

在开发之前,要求开发者具有基础的 node.js 和 npm 相关的知识,同时需要准备好支持 npm 功能的开发者工具,点此下载。

下载模板

为了方便开发者能够快速搭建好一个可用于开发、调试、测试的自定义组件包项目,官方提供了一个项目模板,下载使用模板的方式有三种:

  • 直接从 github 上下载 zip 文件并解压。
  • 直接将 github 上的仓库 clone 下来。
  • 使用官方提供的命令行工具初始化项目,下面会进行介绍。

项目模板中的构建是基于 gulp + webpack 来执行的,支持开发、构建、测试等命令,详情可参阅项目模板的 README.md 文件。

命令行工具

官方提供了命令行工具,用于快速初始化一个项目。执行如下命令安装命令行工具:

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

然后新建一个空目录作为项目根目录,在此根目录下执行:

miniprogram init --type custom-component

命令执行完毕后会发现项目根目录下生成了许多文件,这是根据官方的项目模板生成的完整项目,之后开发者可直接在此之上进行开发修改。

命令行工具的更多用法可以查看 github 仓库上的 README.md 文件。

PS:第一次使用 miniprogram init 初始化项目会去 github 上拉取模板,因此需要保证网络畅通。

测试工具

针对自定义组件的单元测试,可参阅文档单元测试

自定义组件示例

以下为官方提供的自定义组件,可以参考并使用:

自定义组件扩展示例

以下为官方提供的自定义组件扩展,可以参考并使用:


微信小程序 自定义组件扩展
微信小程序 单元测试
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

微信小程序 指南

目录结构

开放能力

微信小程序 调试

微信小程序 实时日志

微信小程序 小程序测速

微信小程序 基础组件

微信小程序 API

媒体

界面

微信小程序API 绘图

微信小程序 服务端

接口调用凭证

统一服务消息

微信小程序 服务市场

微信小程序 生物认证

微信小程序 云开发

服务端

微信小程序云开发服务端API 数据库

SDK文档

微信小程序 扩展能力

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }