> >

概述及资源

使用 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