DCloud_UNI_LXH
DCloud_UNI_LXH
  • 发布:2021-08-17 18:53
  • 更新:2024-12-02 15:33
  • 阅读:16421

如何编译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 后重新编译插件代码。

附件为添加小程序导出到插件功能(另外两个为vue2、vue3示例):

5 关注 分享
4***@qq.com HelloZhong 4***@qq.com HRK_01 日渐肥胖的左

要回复文章请先登录注册

9***@qq.com

9***@qq.com

这个不还是在uniapp的目录结构下写原生wx吗
2024-12-02 15:33
DCloud_UNI_LXH

DCloud_UNI_LXH (作者)

回复 1***@qq.com :
出现什么问题了?
2024-11-15 10:35
1***@qq.com

1***@qq.com

回复 DCloud_UNI_LXH :
您好,我现在用最新的 uni cli编译微信小程序插件 uni 编译 wx 对象的时候用的宿主wx 不是小程序wx
2024-11-14 18:35
浅屿

浅屿

回复 DCloud_UNI_LXH :
已经可以了
2024-09-09 09:37
DCloud_UNI_LXH

DCloud_UNI_LXH (作者)

回复 浅屿 :
之前是不需要这个字段的,可以看看官方对 `pluginRoot` 的描述,然后手动添加一下看看正常了吗
2024-09-07 12:03
5***@qq.com

5***@qq.com

```
qweqwe
```
2024-09-07 11:04
浅屿

浅屿

回复 DCloud_UNI_LXH :
这个是为什么 用的uniapp-vue2-mp-plugin-webpack5-test.zip 执行dev:mp-wx-plugin 导入微信开发中工具报这个错 [ project.config.json 文件内容错误] project.config.json: ["pluginRoot"] 不能为空
2024-08-14 15:20
DCloud_UNI_LXH

DCloud_UNI_LXH (作者)

回复 1***@qq.com :
在哪个平台?用的 vue 几?hx 是什么版本?
2024-07-12 13:44
1***@qq.com

1***@qq.com

回复 9***@qq.com :
用globalThis.wx.__webpack_require_UNI_MP_PLUGIN
2024-07-11 17:56
2***@qq.com

2***@qq.com

回复 9***@qq.com :
你好,请问解决了吗?
2024-07-10 15:55