生服插件加载失败解决方案

我的收藏

1.背景

商家接入插件后，线上有部分用户会出现插件组件不生效，进而导致组件白屏/页面白屏，如下

2.问题原因

出现上述问题的原因可以分为两类：

插件接入问题：小程序插件接入前需在app.json中声明插件的使用（参考使用行业插件），否则抖音不会下发插件能力

插件兼容问题：小程序插件能力目前仅在抖音版本32.9.0（基础库版本3.56.0.2）及以上支持。低于该版本时

如果小程序申请过行业SDK权限，那么会走到行业SDK的同名能力上（比如pay-button行业插件版 -> pay-button行业SDK版），注意如果行业SDK不存在同名能力，则会触发报错

如果小程序未申请过行业SDK权限，那么会直接报错

3.解决方案

开发者可自查下述两个问题

问题

解决方案

插件接入问题

使用行业插件

{
  "plugins": {
    "myPlugin": { // plugin别名，随便叫什么都行
      "version": "*",  // 订阅最新版本
      "provider": "tta5a3d31e3aecfb9b11" //生服交易pluginID
    }
  }
}

插件兼容问题

如果插件能力在行业SDK上存在同名能力，则项目申请行业SDK权限即可

哪些能力在行业SDK上不存在同名能力？（其余组件/JSAPI均有同名能力）
安心洗护标签组件（serving-privilege-tag）
服务标准标签组件（serving-privilege-standards）
特色服务理赔入口组件（serving-privilege-apply）

如果插件能力在行业SDK上不存在同名能力，则需按下述操作手动处理兼容逻辑

/**
 * 比较两个版本号大小
 * 返回值：
 *   1  表示 v1 > v2
 *   -1 表示 v1 < v2
 *   0  表示 v1 == v2
 * 
 * @param {string} v1 版本号字符串，如 "3.56.0.2"
 * @param {string} v2 版本号字符串
 * @returns {number}
 */
function compareVersion(v1, v2) {
  const arr1 = v1.split('.').map(Number);
  const arr2 = v2.split('.').map(Number);
  const len = Math.max(arr1.length, arr2.length);

  for (let i = 0; i < len; i++) {
    const num1 = i < arr1.length ? arr1[i] : 0;
    const num2 = i < arr2.length ? arr2[i] : 0;

    if (num1 > num2) return 1;
    if (num1 < num2) return -1;
  }

  return 0;
}

const { SDKVersion } = tt.getSystemInfoSync()
const showComponent = [1, 0].includes(compareVersion(SDKVersion, '3.56.0.2'))

<view v-if="{{showComponent}}">
    <serving-privilege-apply></serving-privilege-apply>
</view>