uni-app(Vue2)编译为抖音小程序时，自动生成package.json文件配置行业SDK权限

uni-app(Vue2)编译为抖音小程序时，自动生成package.json文件配置行业SDK权限

  1. 小说前端 🧩
  2. 2 months ago
  3. 7 min read

截至目前，抖音小程序一共提供了四套交易系统，根据行业类别不用需要接入对应的行业解决方案。其中工具/内容消费行业是使用新版本【通用交易系统】支付能力的tt.requestOrder代替了旧版本【担保交易】支付能力的tt.pay，表现形式上就是直接唤起聚合支付宝/微信/抖音支付的原生收银台。

但由于【通用交易系统】属于行业开放能力，除了正常的开发实现，接入的时候需要新增一个行业SDK权限配置。

如果没有配置行业SDK权限，或者配置不正确，会有什么样的表现呢？

行业权限异常的丑态

  • 如果你打开抖音后，直接进入你的小程序，不管是刷十分钟还是直接唤起收银台支付，大概率是支付失败，无法唤起的。
  • 如果你打开抖音后，刷10秒左右的视频或者先打开一个其他的小程序，之后再进入你的小程序，这时候大概率可以成功唤起收银台进行正常支付。

错误码示例

错误码示例格式如下：

{
    "errMsg": "pay:fail Fail to get order info, 支付失败，请稍后重试 2010",
    "errNo": 10401,
    "errorCode": 10003,
    "errorType": "D"
}

问题剖析

非官方说明：如果你的小程序正确配置行业SDK权限，在你的小程序加载时，抖音会默认预加载对应的行业SDK，这样你无论何时唤起收银台，SDK都是可以正常使用的。但是如果没有正确配置，就需要看缘分啦，这个时候能不能唤起收银台就是个概率问题。

那么应该如何正确配置行业SDK权限呢？

配置行业SDK权限

官方文档中描述，在package.json文件正确配置后，上传完成即可。实际测试中，上传完成后并提审当前版本，无需通过审核（可撤销审核）即可更新线上小程序的行业SDK加载权限。

详情可查看官方文档：配置行业 SDK 的权限

抖音小程序原生开发

1、只需要在package.json文件中新增"industrySDK": true。

2、第一次配置保存后，重启IDE。

3、编译代码并上传。无须通过审核，线上小程序即可更新行业SDK加载权限。

uniapp/taro等三方框架开发

1、在HbuilderX/Cli命令中进行发行编译。

2、在抖音开发者工具中打开混合编译后的产出代码（也就是我们日常要进行的上传操作的前置步骤）。

3、退出工具的Lite模式，打开编辑器面板，在根目录新建package.json文件。

4、在package.json文件中加入"industrySDK": true。

{
  "industrySDK": true
}

5、为了保险起见，我们遵循官方说明，保存并重启IDE。

6、上传代码，并去开发者中心控制台提交审核。顺利的话，几分钟后线上小程序的行业SDK权限就配置成功了。

7、这个代码提审版本审核要不要撤销，完全就取决于你自己的实际情况啦。

那么，我们是如何查看是否成功配置行业SDK权限了呢？我们可以根据官方文档自查。

查看行业SDK权限是否配置成功

1、在Android手机上打开你的抖音小程序，点击右上角的【…】按钮。

2、在打开的半屏弹窗中，点击你的小程序名称【爱情的纹理】，进入到【关于】界面。

3、在【关于】界面连续点击10次小程序icon图标下方的小程序名称。

4、不要管连续点了10次还是20次，知道在底部的空白区域出现了一些小程序相关信息。其中只要包含了industrySdkVersion字段，就代表配置成功了。

uniapp-generate-package-douyin-industry

uniapp发行编译自动生成package.json文件

我们在uni-app(Vue2)自定义条件编译平台，动态配置修改小程序appid的文章中为了动态修改发行的小程序appid，已经修改了vue.config.js文件。那么这次呢，我们继续是在这个配置文件里面添加自动生成package.json的逻辑。

module.export = {
    chainWebpack: config => {},
    configureWebpack: {
        plugins: [{
            apply: (compiler) => {
                compiler.hooks.done.tap('GeneratePackageJson', (stats) => {
                    if (process.env.UNI_PLATFORM === 'mp-toutiao') {
                        const outputPath = stats.compilation.outputOptions.path;
                        const packageJsonPath = path.join(outputPath, 'package.json');
                        const packageJsonContent = JSON.stringify({
                            industrySDK: true
                        }, null, 2);

                        fs.writeFileSync(packageJsonPath, packageJsonContent);
                        console.log('Generated package.json for Douyin Mini Program');
                    }
                });
            }
        }]
    }
}

补充说明：在非严谨的官方社区问答中，看到有"industrySDK": true只需要配置上传一次即可的说明。但是不确定是否如此，因此每次编译uniapp代码发行生成抖音小程序代码包后都自动生成了package.json文件。

uniapp项目环境

HBuilderX: 4.15

Vue版本: 2.x

已实现平台: 微信小程序/抖音小程序/快手小程序

写在最后

相关文章: uni-app(Vue2)自定义条件编译平台，动态配置修改小程序appid

参考文档: 通用交易系统接入问题汇总

参考文档: 配置行业 SDK 的权限

uniapp Vue2 小程序 前端