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

发布于 1周前 作者 gougou168 来自 Uni-App

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  
      }  
    }  
  }  
}
  1. 使用条件编译：
// #ifdef MP-WX-PLUGIN  
/**  
* CODE  
*/  
// #endif
  1. 编译时执行命令：yarn dev:custom mp-wx-plugin --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);
  1. 插件中所编写的页面需要在 pages.json 中填写。
  2. 如果有多个 uniapp 编译的 插件 需要运行在同一个小程序中，不要重名。
  3. 名称不要有特殊字符，比如 \。会用到这个名字来挂载一个方法。
  4. - 已经手动替换为 _ ，其他的特殊字符不要写。
  5. 各家小程序插件对各 api 的支持情况不同，具体请查看小程序官方文档的相关描述。

2021-11-04 更新

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

附件


Harmonyos Next教程
1 回复

在将uni-app编译为微信和支付宝小程序插件时，主要步骤涉及配置项目、编写插件代码以及使用HBuilderX或命令行工具进行打包。以下是如何实现这一目标的代码案例和步骤说明：

1. 配置uni-app项目

首先，确保你的uni-app项目已经创建。接下来，在manifest.json文件中进行相应配置，以支持小程序插件的开发。

{
  "mp-weixin": { // 微信小程序配置
    "setting": {
      "es6": true
    },
    "usingComponents": true, // 启用组件模式（如果需要）
    "plugins": {
      "myPlugin": { // 插件配置示例
        "version": "1.0.0",
        "provider": "wxxxxxxxxxx" // 插件提供者的AppID
      }
    }
  },
  "mp-alipay": { // 支付宝小程序配置
    "usingComponents": true, // 启用组件模式（如果需要）
    "plugins": {
      "myPlugin": { // 插件配置示例
        "version": "1.0.0",
        "appId": "2021000000000000" // 插件提供者的AppID
      }
    }
  }
}

注意：这里的plugins配置主要用于引用插件，而不是定义插件。定义插件需要在插件自身的项目中完成。

2. 编写插件代码

在uni-app项目的/src/plugins目录下（或你选择的任何目录），编写插件的代码。插件通常包含一个app.json（或app.axml、app.js等，根据平台不同可能有所差异）来定义插件的结构和功能。

例如，一个简单的微信小程序插件结构可能如下：

/plugins/myPlugin
  ├── app.json
  ├── app.js
  ├── app.wxss
  └── pages/
      └── index/
          ├── index.json
          ├── index.wxml
          ├── index.wxss
          └── index.js

3. 使用HBuilderX或命令行工具打包

  • HBuilderX：打开你的uni-app项目，在顶部菜单中选择“发行”->“小程序-微信/支付宝”，按照向导完成打包流程。

  • 命令行工具：使用uni-app的CLI工具进行打包。例如，编译为微信小程序插件可以使用以下命令：

npm run dev:mp-weixin -- --watch

或者，使用uni-app提供的构建命令打包小程序：

npx cross-env NODE_ENV=production uni-app-cli build --platform mp-weixin --mode production

注意：实际打包时，需要确保你的项目配置正确，且已经按照平台要求准备好了插件的所有必要文件和配置。

通过上述步骤，你可以将uni-app项目编译为微信和支付宝小程序插件。每个平台的具体要求和细节可能有所不同，建议查阅官方文档以获取最新和最详细的信息。

回到顶部