>

概述及资源

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

原生插件混合开发

适用于微信、支付宝插件

引入插件包

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

代码示例

// 微信小程序
"mp-weixin": {
"plugins": {
"captcha4": {
"version": "2.6.1",
"provider": "wx1629d117cf9be937",
"export": "index.js"
}
}
}

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

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


// pages.json
"pages":[
{
"path": "pages/index/index",
"style": {
"mp-weixin": {
"usingComponents": {
"captcha4": "plugin://captcha4/captcha4"
}
},
"mp-alipay": {
"usingComponents": {
"captcha4": "plugin://captcha4/captcha4"
}
}
}
}
]

参考文档

原生自定义组件混合开发

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

引入插件包

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

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

├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
// 需要使用条件编译
{
"pages": [{
"path": "index/index",
"style": {
// #ifdef MP-BAIDU
"usingComponents": {
"captcha4": "/swancomponents/captcha4/captcha4"
},
// #endif
"navigationBarTitleText": "uni-app"
}
}]
}

参考文档

页面中引入

// .vue // 支付宝需要使用条件编译,绑定函数特殊处理

<!-- #ifdef MP-ALIPAY -->
<captcha4
id="captcha"
v-if="loadCaptcha"
:captchaId="captchaId"
onSuccess="captchaSuccess"
/>
<!-- #endif -->

<!-- #ifndef MP-ALIPAY -->
<captcha4
id="captcha"
v-if="loadCaptcha"
:captchaId="captchaId"
@Success="captchaSuccess"
/>
<!-- #endif -->
// 支付宝特殊处理,其他端不需要
this.$scope.captchaSuccess = this.captchaSuccess.bind(this);

注意事项

注意数据和事件绑定的差异,组件使用时应按照 vue 的数据和事件绑定方式

属性绑定从 captchaId="{{captchaId}}" ,改为 :captchaId="captchaId" , wx:if 改为 v-if
  • 事件绑定从 bindSuccess="captchaSuccess" 改为 @Success="captchaSuccess",目前支付宝小程序不支持 vue 的事件绑定方式,需要手动绑定,且自定义事件需改为onSuccess="captchaSuccess
this.$scope.captchaSuccess = this.captchaSuccess.bind(this);
<captcha4
id="captcha"
v-if="loadCaptcha"
:captchaId="captchaId"
onSuccess="captchaSuccess"
/>

具体参考:支付宝小程序组件事件监听示例