uni-app编写抖音小程序的pay-button组件兼容问题

uni-app编写抖音小程序的pay-button组件兼容问题

开发环境 版本号 项目创建方式
Windows windows11 HBuilderX

示例代码：

<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"/>

操作步骤：

如bug描述

预期结果：

如bug描述

实际结果：

如bug描述

bug描述：

抖音小程序的提单页组件《pay-button》里有一个函数绑定，名为bind:getgoodsinfo。

这个虽然是要求绑定函数，但最终绑定上去的是一个Promise对象。

经过uniapp的处理后，绑定上去的是一个函数，所以一直报错，“getGoodsInfo should be object, but got undefined”

希望uniapp后续更新里，针对这种原生平台的特殊操作做一下处理

例如针对或 // #ifdef MP-TOUTIAO

被这些所包裹的，就不要被包进__e里，哪怕以后抖音或微信又更新了新的特性，也能一劳永逸。


更多关于uni-app编写抖音小程序的pay-button组件兼容问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

17 回复

感谢反馈。我看了这个组件文档，是是个行业组件。能进一步补充一个 demo 说明吗。
我看你提到 getgoodsinfo 是一个异步函数，返回 PRomise ，现在转换的 __e 是什么结果？补充更多信息有助于定位你的问题。
如果使用自定义原生组件能绕过吗？
更新： 参考 https://ask.dcloud.net.cn/question/189088 进行兼容

更多关于uni-app编写抖音小程序的pay-button组件兼容问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


自定义原生组件能绕过此问题，只是我作为开发者而言，主观上肯定不想维护两套体系的代码。 抖音小程序针对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逻辑，让被包裹的特定平台代码，不会被包裹进统一处理函数。

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

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

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

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

回复 tody: 是的

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

回复 HRK_01: 看我帖子，官方说修复了

你好，请问自定义原生组件方式是如何写的？但还是在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({ … }); }); }, 求大佬解决

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

我现在也是遇到了这个问题，只是场景是在退款的时候，
The return value of bind:applyrefund should be an object

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

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

在 uni-app 中编写抖音小程序时，使用 pay-button 组件可能会遇到一些兼容性问题。以下是一些常见问题及其解决方案：

1. pay-button 组件未显示

  • 问题描述：在抖音小程序中，pay-button 组件可能无法正常显示。

  • 解决方案：

    • 确保在 pages.json 中正确配置了 usingComponents，并且引入了 pay-button 组件。
    • 检查抖音小程序的版本，确保支持 pay-button 组件。
    {
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "usingComponents": {
    "pay-button": "path/to/pay-button"
  }
}

2. pay-button 组件样式问题

  • 问题描述：pay-button 组件的样式在抖音小程序中可能无法正常显示或布局错乱。

  • 解决方案：

    • 使用抖音小程序的样式语法，确保样式兼容。
    • 避免使用 uni-app 中特有的样式语法，如 rpx，可以尝试使用 px 或 rem。
    .pay-button {
  width: 100px;
  height: 40px;
  background-color: #ff0000;
  color: #ffffff;
}

3. pay-button 组件事件绑定问题

  • 问题描述：pay-button 组件的事件（如 bindtap）在抖音小程序中无法正常触发。

  • 解决方案：

    • 确保事件绑定语法正确，抖音小程序中使用 bindtap 而不是 @tap。
    • 检查事件处理函数是否正确定义。
    <pay-button bindtap="handlePay">支付</pay-button>

    Page({
  handlePay() {
    console.log('支付按钮被点击');
  }
});

4. pay-button 组件 API 调用问题

  • 问题描述：pay-button 组件调用的支付 API 在抖音小程序中无法正常工作。

  • 解决方案：

    • 确保使用的支付 API 是抖音小程序支持的 API。
    • 检查 API 的调用方式是否正确，抖音小程序的 API 调用方式可能与 uni-app 有所不同。
    tt.requestPayment({
  orderInfo: 'orderInfo',
  success(res) {
    console.log('支付成功', res);
  },
  fail(err) {
    console.log('支付失败', err);
  }
});

5. pay-button 组件在真机调试中的问题

  • 问题描述：在真机调试时，pay-button 组件可能无法正常工作。
  • 解决方案：
    • 确保抖音小程序的开发者工具和真机环境是最新版本。
    • 在真机调试时，检查控制台日志，排查可能的错误。

6. pay-button 组件的兼容性处理

  • 问题描述：pay-button 组件在不同平台（如微信小程序、抖音小程序）上的行为不一致。

  • 解决方案：

    • 使用条件编译来处理不同平台的兼容性问题。
    <!-- #ifdef MP-TOUTIAO -->
<pay-button bindtap="handlePay">支付</pay-button>
<!-- #endif -->

<!-- #ifdef MP-WEIXIN -->
<button @tap="handlePay">支付</button>
<!-- #endif -->

7. pay-button 组件的权限问题

  • 问题描述：pay-button 组件需要特定的权限才能正常工作，但权限未正确配置。

  • 解决方案：

    • 在 app.json 中配置所需的权限。
    {
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}
回到顶部