> >

概述及资源

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

uniapp-hbuilder工程 demo 地址

uniapp-cli工程 demo 地址

原生插件混合开发

适用于微信、支付宝插件

引入插件包

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

代码示例

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

// 支付宝小程序
"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"
/>

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