tody
tody
  • 发布:2024-04-07 10:41
  • 更新:2024-04-11 11:13
  • 阅读:168

【报Bug】抖音小程序-pay-button 交易按钮报错:The return value should be an object

分类:uni-app

产品分类: uniapp/小程序/字节跳动

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: MacBook Pro(13英寸,M2,2022年)12.4

HBuilderX类型: 正式

HBuilderX版本号: 4.08

第三方开发者工具版本号: 3.7.11.20230427

基础库版本号: 2.0.2-3071120230427001

项目创建方式: HBuilderX

示例代码:

源代码:

<pay-button v-if="orderDetail.orderButtonV3Res.viewRefundButton == 1" :order-status="1" :order-id="orderNo"  
                @refund="dy_pay_onRefund" @applyrefund="dy_pay_applyRefund" @error="dy_pay_error" />

js:

async dy_pay_applyRefund(event) {  
                console.log('dy_pay_applyRefund event=', event)  
                const {  
                    orderId  
                } = event.detail;  
                const extra = {  
                    orderId  
                }; // 开发者需要透传的参数,可自定义内容  
                return new Promise(resolve => {  
                    resolve(extra);  
                });  
            },

抖音开发工具编译后的代码:

<pay-button vue-id="4c8f244a-17" order-status="{{1}}" order-id="{{orderNo}}"  
                        data-event-opts="{{[['^refund',[['dy_pay_onRefund']]],['^applyrefund',[['dy_pay_applyRefund']]],['^error',[['dy_pay_error']]]]}}"  
                        bind:refund="__e" bind:applyrefund="__e" bind:error="__e" class="data-v-5dcad4cc"  
                        bind:__l="__l"></pay-button>

操作步骤:

按抖音文档对接支付

预期结果:

回调不返回以下错误:
The return value of bind:applyrefund should be an object

实际结果:

回调返回错误:
The return value of bind:applyrefund should be an object

bug描述:

对接抖音小程序的支付功能,前端模板使用抖音提供的入口组件pay-button进行支付与退款,在回调里面提示:

The return value of bind:applyrefund should be an object

抖音对接文档见:
https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/pay-button-sdk#2e204620

2024-04-07 10:41 负责人:无 分享
已邀请:
tody

tody (作者) - tody

//uni-app打包抖音小程序后的自动处理脚本 copyDist.js 可以参考如下:

/**  

 * 抖音小程序-交易组件-自动处理  
 * https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/guide  
"build:mp-toutiao-test": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --mode   
 test && node copyDist.js",  
 */  

const fs = require('fs-extra');  
const path = require('path');  

// 1、将package.json移动到dist/build/mp-toutiao下

// 源文件路径  
const srcFilePath = path.resolve(__dirname, 'src', 'package.json');  
console.log('源文件路径 srcFilePath=', srcFilePath);  

// 目标文件夹路径  
const distDirPath = path.resolve(__dirname, 'dist', 'build/mp-toutiao');  

// 目标文件路径  
const distFilePath = path.resolve(distDirPath, 'package.json');  
console.log('标文件路径 distFilePath=', distFilePath);  

// 如果目标文件夹不存在,先创建目标文件夹  
if (!fs.existsSync(distDirPath)) {  
    fs.mkdirSync(distDirPath, {  
        recursive: true  
    });  
}  

// 移动文件  
fs.copyFile(srcFilePath, distFilePath, (err) => {  
    if (err) {  
        console.error('Error copying file package.json:', err);  
    } else {  
        console.log('文件package.json复制到dist/build/mp-toutiao目录-成功');  
    }  
});

// 2、将打包好的dist/build/mp-toutiao/app.json 插入抖音插件组件页面

// 指定的页面路径  
// 提单页  
const orderConfirmPage = 'ext://microapp-trade-plugin/order-confirm';  
// 退款申请页配置  
const refundApplyPage = 'ext://microapp-trade-plugin/refund-apply';  
// 退款详情页  
const refundDetailPage = 'ext://microapp-trade-plugin/refund-detail';  

// 目标 app.json 文件路径  
const appJsonPath = path.resolve(__dirname, 'dist', 'build', 'mp-toutiao', 'app.json');  

// 读取 app.json 文件内容  
const appJsonContent = fs.readFileSync(appJsonPath, 'utf-8');  

// 将内容解析为 JSON 对象  
const appJson = JSON.parse(appJsonContent);  

// 插入页面路径到 pages 数组中  
appJson.pages.push(orderConfirmPage);  
appJson.pages.push(refundApplyPage);  
appJson.pages.push(refundDetailPage);  

// 将修改后的内容写回 app.json 文件  
fs.writeFileSync(appJsonPath, JSON.stringify(appJson, null, 2));  

console.log('dist/build/mp-toutiao/app.json插入抖音插件组件页面-成功');
DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

感谢反馈,现在汇总提供解决方案

pay-button 组件设计的比较特殊,事件要求不允许返回函数,要求返回一个值,按照下面的方案,

临时解决方案

利用 bind:xxx 不参与编译的特性,使用 bind:xxx 设置为属性,之后使用 this.$scope 进行设置。

即可完成。
如下图所示

编写脚本在编译后 copy package.json 文件,

package.json 支持条件编译,对 mp-toutiao 进行特殊编译处理 ext://xxx 特殊路由

问题原因

pay-button 设计比较特殊,需要后续额外处理
新增的 package.json 其他小程序不涉及,属于新增内容,需要进行适配

后续解决

后续进行开发升级,默认支持上述功能,避免开发者手动修改,再发布之前,请使用上述方案绕过

要回复问题请先登录注册