uni-app开发抖音小程序时使用抖音小程序<pay-button-sdk>组件丢失属性问题

uni-app开发抖音小程序时使用抖音小程序<pay-button-sdk>组件丢失属性问题

操作步骤:

见bug描述

预期结果:

传入的mode、order-status、order-id编译为抖音小程序代码后也为单独的属性

实际结果:

编译前传入的mode、order-status、order-id属性,在编译后均被包裹到X对象,绑定到了u-p属性

bug描述:

编译完成前:

<pay-button-sdk :mode="1" :order-status="1" :order-id="item.order_number" @refund="refund" @error="handleError"

编译完成后:

<pay-button-sdk tt:if="{{item.t}}" bindrefund="{{item.q}}" binderror="{{item.r}}" u-i="{{item.s}}" bind:l="{{item.t}}" u-p="{{item.t}}"/>

编译前传入的mode、order-status、order-id属性,在编译后均被包裹到X对象,绑定到了u-p属性



| 项目信息         | 值             |
|------------------|----------------|
| 产品分类         | uniapp/小程序/抖音 |
| PC开发环境操作系统 | Mac            |
| PC开发环境操作系统版本号 | Mac OS 14.7.4 |
| HBuilderX类型   | 正式           |
| HBuilderX版本号 | 4.76           |
| 第三方开发者工具版本号 | 4.4.4          |
| 基础库版本号     | 3.83.0.3       |
| 项目创建方式     | HBuilderX      |

更多关于uni-app开发抖音小程序时使用抖音小程序<pay-button-sdk>组件丢失属性问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

4.81.2025091909-alpha 版本已添加 nativeTags 配置,可升级到此版本

如果是其他类似的组件也可以使用这个解决思路,下个alpha版本会在 mainfest.json 中提供一个参数 nativeTags,只需要在这个参数中添加组件名称即可解决此类问题,具体可参考官方文档 https://uniapp.dcloud.net.cn/collocation/manifest.html#mp-toutiao
版本发布之后,我会在这里回复。

更多关于uni-app开发抖音小程序时使用抖音小程序<pay-button-sdk>组件丢失属性问题的实战教程也可以访问 https://www.itying.com/category-93-b0.html


你的代码怎么写的,是否声明了 “pay-button-sdk”: “ext://industry/pay-button”

这篇帖子的问题跟我的不一样吧,引入pay-button的方式就不一样

在页面json里引入了插件

vue版本是多少?发个可复现的demo

demo如下,用的vue 3

找到 HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/@dcloudio/uni-mp-toutiao/dist/uni.compiler.js 文件,找到 customElements 数组,把 pay-button-sdk 加到数组中

好了,可以了

这是一个典型的uni-app编译抖音小程序时的组件属性传递问题。在uni-app编译过程中,部分自定义组件的属性会被优化合并到u-p对象中,这是框架的编译策略。

针对抖音小程序的<pay-button-sdk>组件,建议的解决方案:

  1. 使用原生渲染模式:在manifest.json中配置抖音小程序使用原生渲染,避免编译时的属性合并:
"mp-toutiao": {
  "usingComponents": true
}
  1. 检查组件声明:确保在抖音小程序的配置文件中正确声明了该组件:
{
  "usingComponents": {
    "pay-button-sdk": "路径/to/pay-button-sdk"
  }
}
回到顶部