小程序插件配置文档

配置主包插件

主包插件在根目录中的 pages.config.ts 中配置，源码如下

// pages.config.ts
import { defineUniPages } from '@uni-helper/vite-plugin-uni-pages'
import { tabBar } from './src/tabbar/config'

export default defineUniPages({
  globalStyle: {
    navigationStyle: 'default',
    navigationBarTitleText: 'unibest',
    navigationBarBackgroundColor: '#f8f8f8',
    navigationBarTextStyle: 'black',
    backgroundColor: '#FFFFFF',
  },
  easycom: {
    autoscan: true,
    custom: {
      '^fg-(.*)': '@/components/fg-$1/fg-$1.vue',
      '^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)':
        'z-paging/components/z-paging$1/z-paging$1.vue',
      '^wd-(.*)': 'wot-design-uni/components/wd-$1/wd-$1.vue',
    },
  },
  // tabbar 的配置统一在 “./src/tabbar/config.ts” 文件中
  tabBar: tabBar as any,

  // 主包插件
  plugins: {
    'listening-eval': {
      version: '0.0.6',
      provider: 'wx63d6102e26f0a3f8',
    },
  },

  // 预加载规则，需要时自行配置，不需要的可以删除或者注释掉
  preloadRule: {
    'pagesA/list/list': {
      network: 'all',
      packages: ['__APP__'],
    },
    'pagesB/detail/detail': {
      network: 'all',
      packages: ['pagesA'],
    },
  },
})

配置分包插件

分包插件在根目录中的 sctipt/create-base-files.js 中配置，源码如下

// create-base-files.js

// .... 上边代码
// ......

// 最简可运行配置
const manifest = {}
const pages = {
  pages: [
    // 必须要存在内容，否则无法正确编译 pages.json
    {
      path: 'pages/index/index',
    },
  ],
  // 可以在此处配置分包插件，如果不需要配置，subPackages 设置为空数组即可，不可不写
  subPackages: [
    // 参考示例，有需要关闭注释，自行修改内容
    {
      // 必须，且路径必须存在 vite.config.ts 文件中 UniPages 配置 subPackages 对应的分包路径
      root: 'subpackages/auth',
      // 空数组即可，不可不写
      pages: [],
      // 插件配置，参考 https://uniapp.dcloud.net.cn/collocation/pages.html#subpackages
      plugins: {
        'zhi-ling': {
          version: '2.0.6',
          provider: 'wxe5a00a1780c8eb95',
        },
      },
    },
    {
      // ... 其他分包，参考如上
    },
  ],
}

// 下边代码
// ......

在页面中使用插件

在页面内使用插件内包含的组件需要在pages.json内对应页面的style节点下配置对应平台的usingComponents或usingSwanComponents，示例如下：

以"hello-component": "plugin://myPlugin/hello-component"为例，key（冒号前的hello-component）为在页面内使用的组件名称。

value分为三段，plugin为协议（在百度小程序内为dynamicLib），myPlugin为插件名称即引入插件时的名称，hello-component为插件暴露的组件名称。

如果是多平台使用条件编译的方式，反之不需要配置，下边只是示例

vue

<script lang="ts" setup>
definePage({
  style: {
    navigationBarTitleText: '首页',
    // #ifdef MP-WEIXIN
    usingComponents: {
      'hello-component': 'plugin://myPlugin/hello-component',
    },
    // #endif

    // #ifdef MP-ALIPAY
    usingComponents: {
      'hello-component': 'plugin://myPlugin/hello-component',
    },
    // #endif

    // #ifdef MP-BAIDU
    // 百度小程序 注意 HBuilder 3.1.0 以下部分插件需使用 usingSwanComponents
    usingComponents: {
      'my-special-list': 'dynamicLib://myDynamicLib/special-list',
    },
    // #endif
  },
})
</script>

页面上使用。代码示例：

vue

<template>
  <!-- 微信小程序和支付宝小程序 -->
  <navigator url="plugin://myPlugin/hello-component">
    Go to pages/hello-page!
  </navigator>

  <!-- 百度小程序 -->
  <view class="container">
    <view>下面这个自定义组件来自于动态库</view>
    <!-- 这里的 'my-special-list' 就是本页面中对于此自定义组件的别名 -->
    <my-special-list />
  </view>
</template>

在分包内使用插件的限制

仅能在这个分包内使用该插件；
同一个插件不能被多个分包同时引用；
不能从分包外的页面直接跳入分包内的插件页面，需要先跳入分包内的非插件页面、再跳入同一分包内的插件页面。

暂未测试到的说明

在引入插件的时候，可以通过export给插件传参，目前没有合适的插件进行测试，暂不确定文件放在哪个位置。

// pages.config.ts

// ...忽略引入

export default defineUniPages({
  // ... 上边配置

  // 主包插件
  plugins: {
    'listening-eval': {
      version: '0.0.6',
      provider: 'wx63d6102e26f0a3f8',
      export: 'api.js', // 主包和分包位置好像是不同的，不确定是否都放到 `static` 目录下，有用到的同学可以测试并告知
    },
  },
})

小程序插件配置文档 ​

配置主包插件 ​

配置分包插件 ​

在页面中使用插件 ​

在分包内使用插件的限制 ​