使用行业插件
收藏
我的收藏

使用限制

•

使用插件前请完成插件获取与申请。

•

支持已使用分包、独立分包的主体小程序应用插件。

•

小程序插件只支持在小程序中使用。

插件声明引用

使用插件前，使用者需要在 app.json 中静态声明需要使用的插件，根据插件不同类型，使用不同引用方式说明：

•

指定版本引用：小程序在代码中写入需要引用的指定插件版本号。当插件版本发生变更且需要引用新版本时，仅能通过修改小程序代码中的引用版本号并进行小程序发版来更新。

{
  "plugins": {
    "myPlugin": {  // plugin别名
      "version": "1.0.0", //指定版本
      "provider": "ttidxxxxxxxxxxxxxxxx" //pluginID
    }
  }
}

•

订阅插件最新版本：不需要小程序开发者主动感知具体插件版本号，默认引用小程序所拥有调用权限的最新插件版本。插件开发者有发布新的插件版本，小程序引用插件时会自动拉最新版本插件。

{
  "plugins": {
    "myPlugin": { // plugin别名
      "version": "*",  // 订阅最新版本
      "provider": "ttidxxxxxxxxxxxxxxxx"//pluginID
    }
  }
}

版本兼容

使用动态加载插件的小程序项目需要 4.3.3 或以上版本的 IDE 才能编译构建。

插件的运行要求小程序基础库为 3.49.0 及以上版本，小程序在动态加载插件的时候，需要按照以下方式兼容：

// app.js
if (tt.canIUse('requirePlugin')) {
  const myPlugin = requirePlugin(pluginID)
  myPlugin.hello && myPlugin.hello()
} else {
  
}

JS 接口

使用插件的 JS 接口时，可以使用 requirePlugin 方法。

该示例先通过 requirePlugin 或者importPlugin 引用插件 API，然后访问插件暴露的 xxx_api 函数以及 world 变量。

// 异步 Promise
const myPlugin = await importPlugin(pluginID)
console.log(myPlugin.world)


const pluginPromise = importPlugin(pluginID)
pluginPromise.then((plugin) => {
    console.log(plugin) // { add: fn, subtract: fn }
})


// 同步调用，阻塞执行
const myPlugin = tt.requirePlugin(pluginID)
myPlugin.xxx_api(); // 调用所引用插件的 api。此处 xxx_api 为 api 示例名称，请开发者自行替换为实际调用 api 名称
const world = myPlugin.world;

页面

跳转到插件页面时， URL 使用 myPlugin:// 或者 pluginID://为前缀，格式为 pluginID://pagepath，如下所示：

<navigator url="myPlugin://hello-page">Go to pages/hello page!</navigator>

也可以使用 API 进行跳转：

tt.navigateTo({
    url: `tt36b44009a99e9b3211://counter-page?num=${this.data.pluginNum}`,
    success(res) {
        console.log('navigateToPlugin success', res)
    },
    fail(err) {
        console.error('navigateToPlugin err', err)
    }
})

组件

在页面json 文件定义需要引入的自定义组件时，使用 pluginID:// 声明使用插件中的组件，例如：

代码示例：

//页面.json
{
    "usingComponents": {
        "hello-component": "pluginID://hello-component"
    }
}

//页面.ttml
<view class="hello-comp">
    <hello-component
        paramList="{{List}}"
        paramInt=4
    />
</view>

插件代码示例片段

使用行业插件收藏我的收藏

使用限制

插件声明引用

版本兼容

JS 接口

页面

组件

使用行业插件
收藏
我的收藏