微信小程序开发之—

一概述

插件是对js接口(export一些js接口方法)，自定义组件或页面的封装，用于嵌入到小程序中使用
插件的开发和上传发布和小程序一样，插件一旦发布，第三方使用时无法查看插件的代码
插件开发完成，未发布前，可以使用miniprogram目录中编写小程序代码来测试插件

二插件目录结构介绍

2.1 创建插件项目

2.2 默认插件项目

插件项目预览

插件项目目录介绍

plugin目录：插件代码目录
miniprogram目录：防止一个小程序，用于调试插件
doc目录：用于放置插件开发文档

插件(plugin)目录结构

个插件可以包含若干个自定义组件、页面，和一组 js 接口

plugin
├── components
│   ├── hello-component.js   // 插件提供的自定义组件（可以有多个）
│   ├── hello-component.json
│   ├── hello-component.wxml
│   └── hello-component.wxss
├── pages
│   ├── hello-page.js        // 插件提供的页面（可以有多个，自小程序基础库版本 2.1.0 开始支持）
│   ├── hello-page.json
│   ├── hello-page.wxml
│   └── hello-page.wxss
├── index.js                 // 插件的 js 接口
└── plugin.json              // 插件配置文件

三插件开发(将组件包装成插件)

3.1 自定义组件开发

my-component.json配置

{"component":true,"usingComponents": {}
}

my-component.wxml页面

<view class="list" wx:for="{{list}}" wx:key="*this"><text>我是第{{item}}项</text>
</view>
<button bindtap="addItem">add</button>
<button bindtap="delItem">del</button>

my-component.wxss样式

.list{text-align: center;background-color: #ccc;border-top: 1rpx solid #fff;
}

my-component.js—自定义组件

Component({data: {list: [1, 2, 3, 4, 5]},methods: {addItem: function () {var list = this.data.listlist.push(list.length + 1)this.setData({list: list})},delItem: function () {var list = this.data.listif (list.length > 0) {list.pop()}this.setData({list: list})}}
})

3.2 插件的js接口方法(index.js)

module.exports = {sayHello() {console.log('Hello plugin!')},answer: 42
}

3.3 插件配置文件(plugin.json)

{"publicComponents": {"my-component": "components/my-component"},"main": "index.js","pages": {"index": "pages/index"}
}

说明：

my-component：自定义组件
index：pages/index页面
index.js：所有js接口方法

四插件的测试(miniprogram)

4.1 miniprogram/pages/index/index.json配置

{"usingComponents": {"my-list": "plugin://my-plugin/my-component"}
}

4.2 使用

miniprogram/pages/index/index.wxml

<navigator id="nav" url="plugin://my-plugin/index">Go to Plugin page
</navigator>
<my-list/>

miniprogram/pages/index/index.wxss

#nav {text-align: center;background: #eeeeee;margin: 1em;padding: 1em;border-radius: 5px;
}#add {margin: 1em;
}

miniprogram/pages/index/index.js

const plugin = requirePlugin('my-plugin')
Page({data: {items: [],currentItem: 0},onLoad() {plugin.sayHello()const world = plugin.answerconsole.log(world)}
})

五参考

官方文档—开发插件
CSDN—参考代码

微信小程序开发之——插件相关推荐

微信小程序开发(十三)富文本插件wxParse的wxParseImgTap的bug修复
在上一篇微信小程序开发(十二)富文本插件wxParse的使用中,我已经使用了wxParse插件.下午有时间就仔细的把玩了一下,发现了一个bug. 问题描述仔细看报错,我们会发现是wxParse.js ...
可视化微信小程序开发小助手-Troll (VS Code插件）
目录 1.开场白 2.安装 3.主要用法 3.1启动/切换Troll编辑器 3.2编辑视图切换切换到Troll编辑切换到文本编辑 3.3图形操作 3.3.1基本图元 3.3.2基础操作 3.4 添 ...
微信小程序开发必备的八个插件
wechat-snippet 微信小程序代码辅助,代码片段自动完成 minapp 微信小程序标签.属性的智能补全(同时支持原生小程序.mpvue 和 wepy 框架,并提供 snippets) wxa ...
与张小龙同行：微信小程序开发
与张小龙同行:微信小程序开发概要基于微信小程序轻快的特点,我们拟定了小程序界面设计指南和建议. 设计指南建立在充分尊重用户知情权与操作权的基础之上.旨在微信生态体系内,建立友好.高效.一致的用户体 ...
五大微信小程序开发IDE深度评测
微信小程序已经内测有一段时间了,笔者本着好奇加学习的心态写了几个小demo,虽然在MINA框架上并没有遇到太多的坑,但官方开发工具实在不敢恭维. api提示不全,要一个个查api啊,写代码超级慢啊很 ...
微信小程序开发工具最新版本已更新下载(1.02.1804120)
下载地址: windows 64 . windows 32 . mac 本次更新修复信息如下: 1.修复 1.02.1804080 引入的编译条件为分包内页面时无法加载的问题 1. 更新到最新版本后 ...
uniapp手写_【转】uni-app框架纯手写微信小程序开发左侧滑动菜单
本帖最后由 fengrui99 于 2020-7-22 14:38 编辑原文来自:在学习的uni-app的微信小程序开发路上慢慢开始不一直依赖插件(但是使用插件是真的香,一直用一直香) 在大佬的指引 ...
详解微信小程序开发（项目从零开始）
关注公众号风色年代(itfantasycc) 280G前端&小程序资料随便拿! 详解微信小程序开发(项目从零开始) 一.序微信小程序,估计大家都不陌生,现在应用场景特别多.今天就系统的介绍 ...
微信小程序开发的基本用法
微信小程序开发的基本用法 1.数组或对象的遍历 1.1.数组遍历 wx:for="{{数组或对象}}" wx:for-item="循环项的名称" wx:for- ...

微信小程序开发之——插件

一概述

二插件目录结构介绍

2.1 创建插件项目

2.2 默认插件项目

插件项目预览

插件项目目录介绍

插件(plugin)目录结构

三插件开发(将组件包装成插件)

3.1 自定义组件开发

my-component.json配置

my-component.wxml页面

my-component.wxss样式

my-component.js—自定义组件

3.2 插件的js接口方法(index.js)

3.3 插件配置文件(plugin.json)

四插件的测试(miniprogram)

4.1 miniprogram/pages/index/index.json配置

4.2 使用

miniprogram/pages/index/index.wxml

miniprogram/pages/index/index.wxss

miniprogram/pages/index/index.js

五参考

微信小程序开发之——插件相关推荐

最新文章

热门文章

微信小程序开发之——插件

一 概述

二 插件目录结构介绍

2.1 创建插件项目

2.2 默认插件项目

插件项目预览

插件项目目录介绍

插件(plugin)目录结构

三 插件开发(将组件包装成插件)

3.1 自定义组件开发

my-component.json配置

my-component.wxml页面

my-component.wxss样式

my-component.js—自定义组件

3.2 插件的js接口方法(index.js)

3.3 插件配置文件(plugin.json)

四 插件的测试(miniprogram)

4.1 miniprogram/pages/index/index.json配置

4.2 使用

miniprogram/pages/index/index.wxml

miniprogram/pages/index/index.wxss

miniprogram/pages/index/index.js

五 参考

微信小程序开发之——插件相关推荐

最新文章

热门文章

一概述

二插件目录结构介绍

三插件开发(将组件包装成插件)

四插件的测试(miniprogram)

五参考