>

概述及资源

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

原生插件混合开发

适用于微信、支付宝插件

引入插件包

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

代码示例

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

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

在页面内使用插件内包含的组件需要在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" />

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