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
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>组件,建议的解决方案:
- 使用原生渲染模式:在
manifest.json中配置抖音小程序使用原生渲染,避免编译时的属性合并:
"mp-toutiao": {
"usingComponents": true
}
- 检查组件声明:确保在抖音小程序的配置文件中正确声明了该组件:
{
"usingComponents": {
"pay-button-sdk": "路径/to/pay-button-sdk"
}
}

