抖音小程序uni-app uni-col组件报错

抖音小程序uni-app uni-col组件报错

示例代码：

<uni-row>  
    <uni-col :span="6">  
        <view class="col-class-img">  
            <image class="img" mode="scaleToFill"  
                src="1.png"  
                @tap="areaproject"></image>  
            <view class="imgtext" @tap="areaproject">附近</view>  
        </view>  
    </uni-col>
</uni-row>

操作步骤：

  • 编译到抖音开发者工具

预期结果：

  • 不弹出错误提示

实际结果：

  • 如图

bug描述：

微信小程序中正常，编译到抖音小程序出现错误提醒

Image

信息类别 详细信息
产品分类 uniapp/小程序/字节跳动
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 Alpha
HBuilderX版本号 4.55
第三方开发者工具版本号 4.3.6
基础库版本号 3.59.0.1
项目创建方式 HBuilderX

更多关于抖音小程序uni-app uni-col组件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

hello , 我这里运行到抖音小程序没有问题。

你可以检查一下插件版本，或者是看一下项目中有什么其它设置选项，提供一下我测试看看

更多关于抖音小程序uni-app uni-col组件报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个错误是由于抖音小程序平台对组件命名规则的限制导致的。在抖音小程序中，组件名不能包含短横线"-"，而uni-col和uni-row组件名不符合这个要求。

解决方案有两种：

  1. 使用原生view+flex布局替代uni-col组件：
<view class="row">
    <view class="col-6">
        <!-- 内容 -->
    </view>
</view>

<style>
.row {
    display: flex;
}
.col-6 {
    width: 25%; /* 6/24 */
}
</style>
  1. 使用条件编译针对抖音平台做特殊处理：
<!-- #ifdef MP_TOUTIAO -->
<view class="row">
    <view class="col-6">
        <!-- 内容 -->
    </view>
</view>
<!-- #else -->
<uni-row>
    <uni-col :span="6">
        <!-- 内容 -->
    </uni-col>
</uni-row>
<!-- #endif -->
回到顶部