uni-app 抖音支付pay-button-sdk组件属性丢失

uni-app 抖音支付pay-button-sdk组件属性丢失

操作步骤：

如图

预期结果：

携带属性：mode、goods-type、goods-id

实际结果：

丢失了属性：mode、goods-type、goods-id

bug描述：

HBuilderX里面的pay-button-sdk组件编译到抖音小程序后，丢失了mode、goods-type、goods-id

23 回复

感谢反馈，已确认问题，抖音小程序使用扩展插件会丢失属性，后续会修复。
临时解决方案： 替换附件文件 transformComponent.js 到 HBuilderX根目录/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-compiler/dist/transforms/ 替换附件文件 jsonFile.js 到 HBuilderX根目录/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-cli-shared/dist/json/mp/

更多关于uni-app 抖音支付pay-button-sdk组件属性丢失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


收到谢谢，临时方案测试可行

回复 祖传皮卡丘: 刚好要用这个功能，感谢英雄踩坑

本帖问题已解决，有相关问题请开新贴交流

编译后的产物要是能自动引入该插件就好了，希望尽快适配。抖音那个东西出来很久了。嘿嘿

关于自动引入的问题，需要你在pages.json文件下配置好，你上传的demo里面并没有配置，也可能是我们官方文档没有说明清楚，后续会补充文档 “pages”: [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { “path”: “pages/index/index”, “style”: { “navigationBarTitleText”: “uni-app”, “usingComponents”: { “pay-button-sdk”: “ext://industry/pay-button” } }

回复 HRK_01: 常学常新哇！谢谢谢谢！这个文档里的确有，是我没看清。解决了一个大问题。

个人零时解决：把丢失的属性手动在编译后的产物上加上，能正常使用，希望官方尽快适配啊！

经过后续测试发现，属性都会丢失，方法不会丢失

我也一直没搞好。真的搞服了。 准备放弃组件模式了。 你真机调试是怎么弄得？现在真机调试也是调试包过大。

这还没遇到过

我也遇到了pay-button的问题，https://ask.dcloud.net.cn/question/185516 但是我遇到的问题不是属性丢失，而是bind:getgoodsinfo函数被“__e”给统一包裹管理了，导致识别非Promise对象，无法绑定。 而我看你的目标代码里面，bind:getgoodsinfo都是分别的处理。 难道是windows环境和mac有差异么

我用的是pay-button-sdk那个新的组件，你那个pay-button老组件已经适配了。

如果是插件的话，这些属性应该会在运行时动态传递，实际功能正常吗？

感谢回复，实际功能不正常，需要手动在编译后的产物上加上丢失的属性才能正常。期望解决

回复 祖传皮卡丘: 方便提供一个测试工程吗，这边排查下

回复 YUANRJ: 很荣幸，已上传。index里面有具体实现方法。

测试工程

感谢反馈，我验证一下

已经复现该问题，现正排查中，十分感谢你的反馈！

辛苦啦！

HBuilderX 4.02.2024030621-alpha 已修复。

在使用 uni-app 开发抖音小程序时，如果你发现 pay-button-sdk 组件的属性丢失或无法正常工作，可能是由于以下几个原因导致的。你可以按照以下步骤进行排查和解决：

1. 检查组件引入是否正确

确保你在页面或组件中正确引入了 pay-button-sdk 组件。例如：

<pay-button-sdk :order-info="orderInfo" [@success](/user/success)="onPaySuccess" [@fail](/user/fail)="onPayFail"></pay-button-sdk>

确保 pay-button-sdk 组件在你的 components 中正确注册。

2. 检查属性绑定

确保你正确绑定了组件的属性。例如，order-info 属性应该是一个包含支付信息的对象：

export default {
  data() {
    return {
      orderInfo: {
        order_id: '123456',
        amount: 100, // 金额，单位为分
        // 其他支付信息
      }
    };
  },
  methods: {
    onPaySuccess(res) {
      console.log('支付成功', res);
    },
    onPayFail(err) {
      console.log('支付失败', err);
    }
  }
};

确保 orderInfo 是一个有效的对象，并且包含了必要的字段。

3. 检查组件版本

确保你使用的 pay-button-sdk 组件版本是最新的，或者与你当前开发环境兼容。你可以尝试更新 pay-button-sdk 组件到最新版本。

4. 检查抖音小程序SDK版本

确保你的抖音小程序 SDK 版本支持 pay-button-sdk 组件。你可以查看抖音小程序的官方文档，确认 SDK 版本是否支持该组件。

5. 检查控制台错误信息

打开开发者工具的控制台，查看是否有任何错误或警告信息。这些信息可能会帮助你定位问题。

6. 检查组件事件监听

确保你正确监听了组件的事件，例如 [@success](/user/success) 和 [@fail](/user/fail)，并在对应的方法中处理支付结果。

7. 调试组件属性

你可以在组件的 created 或 mounted 生命周期钩子中打印组件的属性，检查是否按预期传递：

export default {
  mounted() {
    console.log('Order Info:', this.orderInfo);
  }
};
回到顶部