尘雨雾录
尘雨雾录
  • 发布:2024-01-19 14:05
  • 更新:2024-06-15 09:45
  • 阅读:454

【报Bug】uniapp编写抖音小程序的pay-button组件兼容问题

分类:uni-app

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

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows11

HBuilderX类型: 正式

HBuilderX版本号: 3.99

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

基础库版本号: 3.11.0.1

项目创建方式: HBuilderX

示例代码:

uniapp代码如下:

<pay-button style="width: 300px;" :mode="2" :goods-id="coupon.productId" :goods-type="1" :marketing-ready="true"   
                                    @placeorder="placeorder_func"  
                                    @getgoodsinfo="getgoodsinfo_func"  
                                    @pay="pay_func"   
                                    @error="error_func" />

最终编译出来的如下:

<pay-button style="width:300px;" vue-id="b6f70dca-7" mode="{{2}}" goods-id="{{coupon.productId}}"  
                goods-type="{{1}}" marketing-ready="{{true}}"  
                data-event-opts="{{[['^placeorder',[['placeorder_func']]],['^getgoodsinfo',[['getgoodsinfo_func']]],['^pay',[['pay_func']]],['^error',[['error_func']]]]}}"  
                bind:placeorder="__e" bind:getgoodsinfo="__e" bind:pay="__e" bind:error="__e" bind:__l="__l">  
              </pay-button>

操作步骤:

如bug描述

预期结果:

如bug描述

实际结果:

如bug描述

bug描述:

抖音小程序的提单页组件《pay-button》里有一个函数绑定,名为bind:getgoodsinfo。
这个虽然是要求绑定函数,但最终绑定上去的是一个Promise对象。
经过uniapp的处理后,绑定上去的是一个函数,所以一直报错,“getGoodsInfo should be object, but got undefined”
希望uniapp后续更新里,针对这种原生平台的特殊操作做一下处理

例如针对<!-- #ifdef MP-TOUTIAO -->或 // #ifdef MP-TOUTIAO
被这些所包裹的,就不要被包进__e里,哪怕以后抖音或微信又更新了新的特性,也能一劳永逸。

2024-01-19 14:05 负责人:无 分享
已邀请:
DCloud_UNI_OttoJi

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

感谢反馈。我看了这个组件文档,是是个行业组件。能进一步补充一个 demo 说明吗。

我看你提到 getgoodsinfo 是一个异步函数,返回 PRomise ,现在转换的 __e 是什么结果?补充更多信息有助于定位你的问题。

如果使用自定义原生组件能绕过吗?

更新:
参考 https://ask.dcloud.net.cn/question/189088 进行兼容

  • 尘雨雾录 (作者)

    自定义原生组件能绕过此问题,只是我作为开发者而言,主观上肯定不想维护两套体系的代码。

    抖音小程序针对pay-button的这个bind:getgoodsinfo,可以看以下文档的说明,要求最后输出的是Promise对象。

    https://developer.open-douyin.com/docs/resource/zh-CN/mini-app/develop/component/industry/trading-system/pay-button-sdk#2e204620


    现在转换的e就是跑在抖音小程序下的结果,unpackage/dist/dev/mp-toutiao 这个目录内的小程序代码里,【bind:placeorder="e" bind:getgoodsinfo="e" bind:pay="e" bind:error="e"】,这个e我翻看了下导出后的common/vendor.js源码,是一个被统一管理的函数,也正因为是函数类型,所以在类型上,对不上。


    我提出的建议是,要么再定义一个类似// #ifdef的规则,将不需要被纳入统一管理的属性函数给独立开。

    要么强化下现有的// #ifdef逻辑,让被包裹的特定平台代码,不会被包裹进统一处理函数。

    2024-01-22 09:42

  • 祖传皮卡丘

    大佬,抖音pay-button已被pay-button-sdk取代,还是老样子,属性丢失,和当时pay-button刚出来一样的,后来看你们更新文档说适配了。希望这次也快点吧,谢啦!

    2024-01-23 09:05

  • 音符cap

    回复 尘雨雾录: 你的抖音pay-button的should be an object 问题解决了吗

    2024-01-29 16:04

  • 尘雨雾录 (作者)

    回复 音符cap: 还没,需要用自定义原生组件方式。

    2024-01-30 16:11

  • tody

    回复 尘雨雾录: 自定义原生组件如何写,在抖音小程序开发工具里面去写吗?

    2024-04-08 10:36

  • HRK_01

    回复 tody: 是的

    2024-04-09 20:20

  • HRK_01

    回复 祖传皮卡丘: 最新版本不会复现了吧?我测试了没丢失属性

    2024-04-09 20:34

凉月

凉月

你好,请问自定义原生组件方式是如何写的?但还是在error里报错
errMsg: "Method bind:getgoodsinfo fail"
errNo: 21512
看了社区加上了async还是一样,
<pay-button-sdk :mode="2" :goods-type="2" goods-id="123" @getgoodsinfo="getgoodsinfo" @placeorder="userLogin"
@pay="onPay" @error="payErr" />
async getgoodsinfo(event) {
console.log('getgoodsinfo', event.detail)
return new Promise(resolve => {
resolve({
...
});
});
},
求大佬解决

  • DCloud_UNI_OttoJi

    参考 https://ask.dcloud.net.cn/question/189088

    2024-04-09 11:53

tody

tody - tody

我现在也是遇到了这个问题,只是场景是在退款的时候,

The return value of bind:applyrefund should be an object

tody

tody - tody

望平台兼容下抖音小程序的内置交易插件

DCloud_UNI_OttoJi

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

参考 https://ask.dcloud.net.cn/question/189088

要回复问题请先登录注册