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

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

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

操作步骤：

见BUG描述

预期结果：

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

实际结果：

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

bug描述：

<pay-button  
    v-if="order.userOrderState <= 31 && order.refundFlag"  
    :mode="1"  
    :order-status="1"  
    :order-id="orderNo"  
    @applyrefund="refundFunc"  
    @error="error_func"  
/>

编译后的结果如下： ttml：

<pay-button tt:if="{{U}}" bindapplyrefund="{{V}}" binderror="{{W}}" u-i="a2c81783-1" bind:__l="__l" u-p="{{X}}" />

js：

V: common_vendor.o($options.refundFunc),  
W: common_vendor.o($options.error_func),  
X: common_vendor.p({  
      mode: 1,  
      ["order-status"]: 1,  
      ["order-id"]: $data.orderNo  
})

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

1 回复

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


在 uni-app 开发抖音小程序时，如果你使用抖音小程序的 <pay-button> 组件时遇到属性丢失的问题，可能是由于以下几个原因导致的：

1. uni-app 对抖音小程序的原生组件支持问题

uni-app 是一个跨平台开发框架，虽然它支持多个平台（如微信小程序、支付宝小程序、抖音小程序等），但在某些平台上，uni-app 可能对原生组件的支持不完全，导致一些属性无法正常传递或生效。

2. 抖音小程序 <pay-button> 组件的属性要求

抖音小程序的 <pay-button> 组件有一些特定的属性要求，例如 order-id、app-id、sign 等。如果你在 uni-app 中使用该组件时，属性没有正确传递，可能会导致组件无法正常工作。

3. 属性命名问题

在 uni-app 中，属性命名可能与抖音小程序原生的属性命名不一致。例如，抖音小程序原生组件可能使用 camelCase 或 kebab-case 命名方式，而 uni-app 可能默认使用 camelCase。你需要确保属性命名与抖音小程序的要求一致。

4. 平台差异

uni-app 在不同平台上的实现可能会有差异。如果你在微信小程序或其他平台上开发过类似的功能，迁移到抖音小程序时，可能需要针对抖音小程序的特性进行调整。

解决方案

  1. 检查属性命名 确保你在 uni-app 中使用的属性名称与抖音小程序原生组件的属性名称一致。例如，如果抖音小程序的 <pay-button> 组件要求 order-id，你需要在 uni-app 中正确传递该属性。

    <pay-button order-id="your-order-id" app-id="your-app-id" sign="your-sign"></pay-button>

  2. 使用原生组件 如果 uni-app 对抖音小程序的 <pay-button> 组件支持不完全，你可以尝试直接在 .ttml 文件中使用原生组件，而不是通过 uni-app 的模板语法。

    <!-- 在 .ttml 文件中 -->
<pay-button order-id="your-order-id" app-id="your-app-id" sign="your-sign"></pay-button>

  3. 检查 uni-app 版本 确保你使用的 uni-app 版本是最新的，因为 uni-app 团队会不断更新对各个小程序平台的支持。如果问题是由于 uni-app 的 bug 导致的，升级到最新版本可能会解决问题。

  4. 手动处理属性 如果 uni-app 无法正确传递属性，你可以尝试在 onLoad 或 onReady 生命周期中手动设置组件的属性。

    onReady() {
  const payButton = this.$refs.payButton;
  payButton.setAttribute('order-id', 'your-order-id');
  payButton.setAttribute('app-id', 'your-app-id');
  payButton.setAttribute('sign', 'your-sign');
}
回到顶部