DCloud_UNI_LXH
DCloud_UNI_LXH
  • 发布:2021-08-17 18:53
  • 更新:2021-12-20 20:15
  • 阅读:1686

如何编译uniapp到微信、支付宝小程序插件

分类:uni-app

小程序插件开发

平台差异说明

微信小程序 支付宝小程序 百度小程序 字节跳动小程序 QQ 小程序 快手小程序
x x x x

注意

  1. 开发 微信小程序插件 时,基础库版本 1.9.6 开始支持。(如果插件包含页面,则需要基础库版本 2.1.0 。)
  2. 开发 支付宝小程序插件 时,IDE 版本要求在 0.60 及以上

插件目录结构

plugin  
├── components               // 插件提供的自定义组件(可以有多个)  
│   ├── hello-component.js  
│   ├── hello-component.json  
│   ├── hello-component.wxml  
│   └── hello-component.wxss  
├── pages  
│   ├── hello-page.js        // 插件提供的页面(可以有多个)  
│   ├── hello-page.json  
│   ├── hello-page.wxml  
│   └── hello-page.wxss  
├── index.js                 // 插件的 js 接口  
└── plugin.json              // 插件配置文件

插件配置文件

向第三方小程序开放的所有组件、页面和 js 接口都必须在 plugin.json 中声明

  • mp-weixin

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

    每个配置的含义如下:

    • publicComponents:列出所有向小程序开放的自定义组件。
    • pages:列出所有向小程序开放的页面。
    • main:插件面向第三方小程序的 js 接口。
  • mp-alipay

    {  
     "publicComponents": {  
       "hello-component": "components/hello-component"  
     },  
     "publicPages": {  
       "hello-pages": "pages/hello-page"  
     },  
     "pages": [  
       "pages/hello-page"  
       "pages/index"  
     ],  
     "main": "index.js"  
    }  

    每个配置的含义如下:

    • publicComponents:列出所有向小程序开放的自定义组件。
    • publicPages:列出所有向小程序开放的页面。
    • pages:列出插件所有页面(包含向小程序开放的以及不向小程序开放的页面)。
    • main:插件面向第三方小程序的 js 接口。

注意

  1. mp-weixin 中的 pages 项与 mp-alipay 中的 publicPages 项作用一致
  2. mp-alipay 中供外部使用的页面,需要在 pages 中声明,数组类型
  3. 由于两端的格式不一致,可以在 plugin.json 中使用条件编译处理

编译步骤

  • 安装 cli 最新的 alpha 版或最新的稳定版。截止文章发布时最新版本为:2.0.0-alpha-32120210809004
  • 执行命令行:yarn dev:mp-weixin -- --plugin test-plugin
  • 其中 test-plugin 为打出插件包的名字。 项目根目录\dist\dev\mp-weixin\test-plugin 中既是可执行小程序插件代码。
  • mp-alipay 平台插件编译后续发布,请留意更新日志。

如何在项目中使用插件

  1. 宿主小程序是 uniapp项目,在 manifest.json 中配置相关信息即可,详情
  2. 宿主为原生小程序,在项目的 app.json 中配置即可:

在插件中使用条件编译

有时候项目不仅要编译到插件,也需要作为一个正常的小程序运行,但有些 api 并不适用于两端,此时可以使用自定义条件编译区分开来。

  1. 自定义条件编译(详情),在package.json中添加如以下配置:

    "uni-app": {  
     "scripts": {  
       "mp-wx-plugin": {  
         "title": "微信小程序插件",  
         "env": {  
           "UNI_PLATFORM": "mp-weixin"  
         },  
         "define": {  
           "MP-WX-PLUGIN": true  
         }  
       },  
       "mp-ali-plugin": {  
         "title": "阿里小程序插件",  
         "env": {  
           "UNI_PLATFORM": "mp-alipay"  
         },  
         "define": {  
           "MP-ALI-PLUGIN": true  
         }  
       },  
     }  
    }  
  2. 使用条件编译:

    // #ifdef MP-WX-PLUGIN  
    /**  
    * CODE  
    */  
    // #endif  
  3. 编译时执行命令:yarn dev:custom mp-wx-plugin --plugin test-plugin 即可,可将脚本写入script中,每次执行更加简化。

    {  
    "dev:mp-wx-plugin": "yarn dev:custom mp-wx-plugin --plugin",  
    "dev:mp-ali-plugin": "yarn dev:custom mp-ali-plugin --plugin"  
    }  

注意

  1. 组件在插件内部未使用,需要在宿主小程序中使用时,要在 main.js 中引入使用一下,否则编译后会丢失未使用插件。例如:
    import helloList from '.../helloList';  
    Vue.component('hello-list', helloList);  
  2. 插件中所编写的页面需要在 pages.json 中填写。
  3. 如果有多个 uniapp 编译的 插件 需要运行在同一个小程序中,不要重名
  4. 名称不要有特殊字符,比如 \。会用到这个名字来挂载一个方法。
  5. - 已经手动替换为 _ ,其他的特殊字符不要写。
  6. 各家小程序插件对各 api 的支持情况不同,具体请查看小程序官方文档的相关描述

2021-11-04 更新

  • 修复 mp-weixin 插件模式,不触发 $emit 。下载 附件 ,替换至 node_modules\@dcloudio\uni-mp-weixin\dist\index.js 后重新编译插件代码。

附件为添加小程序导出到插件功能:

1 关注 分享
4***@qq.com

要回复文章请先登录注册

1***@139.com

1***@139.com

回复 1***@qq.com :
你好 ,请问 你找到什么可以开发微信插件的
2021-12-20 20:15
西瓜小康子

西瓜小康子

回复 DCloud_UNI_LXH :
好的,目前我先使用my.loading了,感谢支撑,对多端开发很有帮助
2021-12-16 18:22
1***@qq.com

1***@qq.com

我找到开发微信插件的东西了
2021-12-15 16:30
DCloud_UNI_LXH

DCloud_UNI_LXH (作者)

回复 西瓜小康子 :
这个问题后续我会排查
2021-12-13 17:17
HelloZhong

HelloZhong

回复 z***@gmail.com :
你是不是开发者工具打开的目录不对?是直接打开项目根目录,或者修改/删掉 project.config.json 这时候打开根目录下 run 生成的 miniprogram。如果小程序编译有什么奇怪的 plugin_id ....报错,多点几次编译就好了,微信抽了
2021-12-13 16:07
HelloZhong

HelloZhong

回复 1***@qq.com :
已经上线了呀,你们说的没有 plugin 文件是什么意思,,如果是 run 完微信开发者工具打开的话 可以了解下根目录下 project.config.json 的作用,当然不要它也行。还有什么问题的话可以试试删除 miniprogram 重新 run
2021-12-13 16:01
西瓜小康子

西瓜小康子

回复 西瓜小康子 :
好像是因为支付宝插件里面my.hideLoading是在原型方法上,hasOwnProperty.call(my, 'hideLoading')返回的是false,请指教
2021-12-11 20:19
西瓜小康子

西瓜小康子

支付宝小程序插件打包后,hideLoading没有代理注册进uni对象里面,导致uni.hideloading报错,插件应该是支持hideloading的,但是protocols转换的这里面没定义
2021-12-11 19:59
1***@qq.com

1***@qq.com

回复 HelloZhong :
那感觉没有plugin文件的话开发插件那是没戏了
2021-12-10 11:23
1***@qq.com

1***@qq.com

回复 HelloZhong :
大佬,请问你是用uniapp开发原生微信插件成功了吗?
2021-12-10 11:13