> >

概述及资源

使用 uniapp 开发的接入 demo 可在 GitHub 上获取,demo 演示了 uniapp 使用微信小程序插件、支付宝小程序插件、字节自定义组件混合开发方式

uniapp-hbuilder工程 demo 地址

uniapp-cli工程 demo 地址

原生插件混合开发

适用于微信、支付宝插件

引入插件包

使用插件之前开发者需要在 manifest.json 中的各平台对应的字段内声明使用的插件,具体配置参照所用插件的开发文档

代码示例

// 微信小程序
"mp-weixin": {
"plugins": {
"captcha": {
"version": "1.3.5",
"provider": "wxefa63d84fe9f64a2"
}
}
}

// 支付宝小程序
"mp-alipay": {
"plugins": {
"captcha": {
"version": "*",
"provider": "2021002124682563"
}
}
}

在页面内使用插件内包含的组件需要在 pages.json 内对应页面的 style 节点下配置对应平台的 usingComponents 或 usingSwanComponents,示例如下:


// pages.json
"pages":[
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
// #ifdef MP-WEIXIN
"usingComponents": {
"captcha": "plugin://captcha/captcha"
},
// #endif
// #ifdef MP-ALIPAY
"usingComponents": {
"captcha": "plugin://captcha/captcha"
},
// #endif
// #ifdef MP-TOUTIAO
"usingComponents": {
"captcha": "/ttcomponents/captcha/captcha"
}
// #endif
}
}
]

参考文档

原生自定义组件混合开发

适用于所有小程序,没有插件系统的小程序可选择此种接入方式

引入插件包

各端原生代码需要放在特定文件夹中

平台 小程序组件存放目录
百度小程序 swancomponents
字节跳动小程序 ttcomponents
QQ 小程序 wxcomponents
快手小程序 kscomponents
ttcomponents                百度小程序自定义组件存放目录
│ └──captcha 百度小程序自定义组件
│ ├─captcha.js
│ ├─captcha.swan
│ ├─captcha.json
│ └─captcha.css
├─pages
│ └─index
│ └─index.vue

├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json