雅荷心语博客
雅荷心语
心之所向便是光
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 首页
  • 前端之旅
  • 后端之路
  • 软件工具
  • 心灵鸡汤
  • 心路历程
  • 视频资料
  • 关于我们
    • 关于我
    • 关于我
  • 微信平台
    • 业务合作
  • 关注本站
    • 微信
    • 微博
    • 腾讯微博
    • Twitter
    • Facebook
    • RSS订阅
Hi, 请登录     我要注册     找回密码

微信小程序插件入门教程

2021-12-16 分类:前端之旅 阅读(2130) 评论(0)

首先: 为什么我们要开发微信小程序插件?

微信小程序的主包大小只有 2M, 即使使用分包, 一些公共的插件也会占用主包的大小,  因此, 我们可以把一些公共组件或者页面, 以插件的形式作为一个独立的形式来加载, 既可以减少小程序包体积, 也可以用于多小程序页面复用, 下面简单做个小程序插件的开发入门教程!

首先, 我们需要在公众号的后台开通小程序插件!

iShot2021-12-16 18.24.26

开通之后, 打开开发者工具, 新建一个插件(这里需要注意, 小程序插件的 Appid 和 宿主小程序 Appid 是一样的)!

iShot2021-12-16 18.11.58

 

新建成功后, 直接生成了一个 DEMO 示例!

iShot2021-12-16 18.27.45

开发插件的话, 我们直接在 plugin 目录开发, 可以直接在 miniprogram 目录进行调试!

我们可以看到 miniprogram/app.json

1
2
3
4
5
6
7
8
9
10
11
12
{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "hello-plugin": {
      "version": "dev",
      "provider": "wx9f77d65eb4eff65b"
    }
  },
  "sitemapLocation": "sitemap.json"
}

直接在当前项目里调试插件, version 是 dev;

插件开发目录里面的文件, 我们打开 plugin/plugin.json

1
2
3
4
5
6
7
8
9
10
11
{
  "publicComponents": {
    "hello-component": "components/hello-component"
  },
  "pages": {
    "hello-page": "pages/hello-page",
    "test": "pages/test",
    "tianming": "pages/tianming"
  },
  "main": "index.js"
}

这个配置文件中,

publicComponents 是对外可使用的组件列表

pages 是可以跳转的页面

我们默认生成的项目, 预的是 miniprogram 目录里面的页面, 默认已经在 miniprogram/app.json 里面引入了插件!

因此若要打开 组件里面的 test 页面,

则直接:

1
2
3
<navigator id="nav" url="plugin://hello-plugin/test">
  打开插件页面
</navigator>

若要使用里面的 JS 方法, 则直接使用

1
2
const plugin = requirePlugin('hello-plugin')
plugin.sayHello()

若要在其他小程序里面使用正在开发的插件, 我们首先需要将插件上传!

iShot2021-12-16 18.41.31

上传成功后, 我们需要复制插件 ID: 46e9a7f122f768d606b170280d920a00

然后正常在自己小程序里面引入插件, 但是配置需要注意:

版本号是: dev-ID

provider: 插件的 appid

1
2
3
4
5
6
"plugins": {
    "vr29": {
      "version": "dev-74c62c62760b3521eedceb07a893ebc8",
      "provider": "wxefe655223916819e"
    }
  }

使用方式和前面讲到的没有区别!

若添加后遇到 插件未授权

iShot2021-12-16 19.28.11

先点击添加插件, 然后去后台审核即可!

若不想每次添加:

可以再小程序后台插件管理页面修改权限:

iShot2021-12-16 19.29.51

1
<navigator id="nav" url="plugin://vr29/test">天明测试</navigator>

 

打开结果如下:

iShot2021-12-16 19.34.39

这样, 我们发布的插件里面的页面在其他小程序里打开成功了!

小程序插件使用文档: https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html

小程序插件开发文档: https://developers.weixin.qq.com/miniprogram/dev/devtools/plugin.html

 

 

 

 

 

分享到:更多 ()

相关推荐

  • AI 编辑器 cursor 如何禁止自动更新
  • AI 编辑器 cursor 工具栏改成和 vscode 一样的左侧 竖向展示
  • nodejs 脚本打包为可执行文件
  • 初学 python 笔记
  • nodejs 同时运行多个脚本
  • 让你的照片动起来
  • vue工程项目动态加载umd.js实践
  • 使用 shell 检测目标服务器是否异常
关于我

小天明 北京·朝阳 前端搬砖工程师

碎碎念):(来自公众号)

热门文章

  • 踩坑记录——iphone上safari开启隐身模式时localStorage变为只读-雅荷心语博客踩坑记录——iphone上safari开启隐身模式时localStorage变为只读2017-02-21评论(4)
  • 程序员是怎样一群人-雅荷心语博客程序员是怎样一群人2015-12-08评论(3)
  • 百度你个大毒瘤 - 吐糟博客这几天打不开事情-雅荷心语博客百度你个大毒瘤 – 吐糟博客这几天打不开事情2015-12-28评论(2)
  • PHP 非对称加密 openssl 加密及解密方法-雅荷心语博客PHP 非对称加密 openssl 加密及解密方法2016-05-17评论(2)
  • PHPStorm10 下载安装破解汉化-雅荷心语博客PHPStorm10 下载安装破解汉化2015-12-15评论(2)
2025年7月
一 二 三 四 五 六 日
« 六    
 123456
78910111213
14151617181920
21222324252627
28293031  

最新评论

  • 前端小武 8年前 (2017-04-06)说:
    我看到了layer
  • 丁艳平 8年前 (2017-03-03)说:
  • Dawn 9年前 (2016-09-16)说:
    call_user_func_array最后的例子是错哦,你用bc方法去调用类里 另外一个方法就知道问题所在了。情况1.调用非静态方法 第一个参数应该传[类的实例,调用方法] (既然有类实例了直接-&
  • Dawn 9年前 (2016-06-21)说:
    tp框架设置了全局捕获异常的,这也没什么。坑的是 他捕获了异常。然后全部返回404。。。不知道的 还以为自己网站被删除了
  • Dawn 9年前 (2016-05-17)说:
    构造函数里的判断 用异常机制可能更好一些

其他类型

  • 芊云全景
  • 配音兔AI配音神器

博客类型

  • 芊云全景
  • 配音兔AI配音神器

左邻右舍

  • 易水寒
  • 楼教主
  • 芊云全景
  • 贤心
  • 配音兔AI配音神器

雅荷心语博客 -心之所向便是光

联系我们关于我们

© 2025 雅荷心语博客   网站地图