支付宝小程序使用动态加载插件

支付宝小程序插件支持动态加载，下面以淘宝联盟支付宝小程序营销套件为例说明一下在 uni-app 中的使用方式。

安装插件

在 npm 下载 miniapp-bc-user 模块后，将 miniapp-bc-user 模块及其依赖的 tslib 模块移动到 mycomponents 目录下

manifest 配置

在 manifest.json 中 mp-alipay 节点下配置 "useDynamicPlugins" : true

page 使用

<template>  
    <view>  
        <bc-module v-if="showComponent" code="suite://bc.suite.union618/bc.template.nav" name="block-nav" />  
    </view>  
</template>  

<script>  
    const {  
        loadBC  
    } = __non_webpack_require__('/mycomponents/miniapp-bc-user')  
    export default {  
        data() {  
            return {  
                showComponent: false,  
            }  
        },  
        async onReady() {  
            await loadBC().then(() => {  
                this.showComponent = true  
            })  
        }  
    }  
</script>  

<style>  

</style>

注意事项

• 在 HBuilderX 3.1.19 版本之前，还需要在每次编译到小程序平台后，手动在生成的支付宝小程序 app.json 中增加 "useDynamicPlugins" : true
• 需要使用 non_webpack_require 替代 require 来加载 miniapp-bc-user 模块，因为在此原生组件内也加载了相关模块，并依赖的模块内共享的状态，如果直接使用 require 会被 webpack 编译，和原生组件内引用的并非同一个模块，导致状态无法共享。
• 需要开启压缩编译，因为在支付宝小程序内也使用了 webpack 编译，require 会被编译为 webpack_require 且由于编译时未进行安全重命名导致和 uni-app 框架的 webpack_require 冲突，启用 uni-app 的压缩编译后，uni-app 框架的 __webpack_require__ 会被压缩命名，避免和小程序框架冲突。